Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- {
- "timestamp": "2025-08-01T11:48:19.821Z",
- "prompt": "You are an expert front-end developer specializing in modern, accessible, and high-performance web design. Your task is to generate the complete code for a single-file landing page for a fictional AI company. Fictional Company Details: Company Name: \"Momentum AI\" Tagline: \"Automate Your Workflow. Unleash Your Potential.\" Key Features (for a features section): Intelligent Task Routing: Automatically assigns tasks to the right team member based on priority and workload. Predictive Analytics: Forecasts project deadlines and resource needs with 95% accuracy. Seamless Integration: Connects effortlessly with over 200+ existing tools like Slack, Jira, and Asana. Call-to-Action (CTA): \"Request a Demo\" Strict Technical and Design Guidelines: Single File Output: The entire website—HTML, CSS, and any JavaScript—must be contained within a single HTML file. All styling must be inside a <style> tag in the <head>, and any scripts must be inside a <script> tag. Do not link to external files. Modern HTML5 Semantics: You must use semantic HTML5 tags extensively (<header>, <nav>, <main>, <section>, <article>, <footer>). Avoid \"div-itis\"; use divs only for grouping when no other semantic element is appropriate. Advanced Responsive Design: The layout must be fully responsive and look polished on three key screen sizes: mobile (375px), tablet (768px), and desktop (1440px). Use modern CSS layout techniques like Flexbox AND CSS Grid where each is best suited. The typography should also be responsive (e.g., using clamp() or media queries for font sizes). Accessibility (A11y) is Non-Negotiable: Maintain a logical heading hierarchy (one <h1>, then <h2>s, etc.). All interactive elements (buttons, links) must have clear aria-label attributes and keyboard focus states (:focus-visible). The color palette you choose must meet WCAG AA contrast ratio standards. Use placeholder images from https://placehold.co/ and ensure every <img> tag has a descriptive alt attribute. Subtle JavaScript Interactivity: Implement a \"smooth scroll\" behavior for the navigation links (e.g., clicking \"Features\" scrolls smoothly to the features section). Add a simple \"fade-in-on-scroll\" effect for the main sections of the page to give it a dynamic feel. Write this with modern, efficient JavaScript (e.g., using IntersectionObserver). Code Quality: The code must be clean, well-commented (explaining the CSS Grid/Flexbox structure and the JS logic), and formatted correctly. Use CSS Custom Properties (variables) for colors and fonts to demonstrate maintainability. Final Deliverable: Produce a single, complete HTML code block that is ready to be saved as index.html and opened in a browser. Do not add any explanation outside of the code block.",
- "models": [
- "gpt-4.1",
- "gpt-5-bench-chatcompletions-gpt41-api-ev3",
- "gpt-4o",
- "chatgpt-4o-latest"
- ],
- "responses": {
- "gpt-4.1": "```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=375, initial-scale=1, maximum-scale=1, user-scalable=no\">\n <title>Momentum AI — Automate Your Workflow. Unleash Your Potential.</title>\n <meta name=\"description\" content=\"Momentum AI: Automate your workflow with intelligent task routing, predictive analytics, and seamless integration. Unleash your team's potential.\">\n <!-- CSS Custom Properties: Colors, Fonts, Sizes -->\n <style>\n :root {\n --color-primary: #2071e4;\n --color-primary-dark: #1451a3;\n --color-secondary: #28c8c8;\n --color-bg: #f8fafc;\n --color-bg-alt: #ffffff;\n --color-text: #172133;\n --color-text-light: #48506a;\n --color-accent: #f6b930;\n --color-focus: #fdcf44;\n\n --font-display: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', Arial, sans-serif;\n --font-body: 'Inter', system-ui, sans-serif;\n\n /* Responsive font sizes with clamp() */\n --fs-h1: clamp(2.2rem, 5vw + 1rem, 4rem);\n --fs-h2: clamp(1.3rem, 2vw + 1rem, 2.2rem);\n --fs-h3: clamp(1.1rem, 1.6vw + .9rem, 1.35rem);\n --fs-body: clamp(1rem, 1vw + .7rem, 1.15rem);\n --fs-small: clamp(0.89rem, 0.5vw + .75rem, 1rem);\n\n /* Spacing */\n --space-xs: 0.75rem;\n --space-sm: 1.25rem;\n --space-md: 2rem;\n --space-lg: 3.5rem;\n --space-xl: 5rem;\n\n /* Rounded corners */\n --radius: 0.7rem;\n\n /* Shadows */\n --shadow-lg: 0 4px 20px 0 rgba(32, 113, 228, 0.13);\n --shadow-sm: 0 1.5px 6px 0 rgba(72, 80, 106, 0.06);\n }\n\n html {\n scroll-behavior: smooth;\n background: var(--color-bg);\n font-size: 16px;\n box-sizing: border-box;\n }\n *, *::before, *::after {\n box-sizing: inherit;\n }\n body {\n margin: 0;\n font-family: var(--font-body);\n color: var(--color-text);\n background: var(--color-bg);\n min-height: 100vh;\n line-height: 1.55;\n -webkit-font-smoothing: antialiased;\n font-size: var(--fs-body);\n letter-spacing: -.005em;\n }\n /* Header & Navigation */\n header {\n background: var(--color-bg-alt);\n box-shadow: var(--shadow-sm);\n position: sticky;\n top: 0; left: 0; right: 0;\n z-index: 9000;\n }\n .container {\n width: 100%;\n max-width: 1160px;\n margin: 0 auto;\n padding: 0 var(--space-sm);\n }\n nav {\n display: flex;\n align-items: center;\n justify-content: space-between;\n min-height: 64px;\n gap: var(--space-sm);\n }\n .logo {\n display: flex;\n align-items: center;\n gap: 0.7em;\n font-size: 1.38rem;\n font-family: var(--font-display);\n font-weight: 700;\n color: var(--color-primary);\n letter-spacing: -0.03em;\n text-decoration: none;\n }\n .logo-mark {\n background: linear-gradient(135deg, var(--color-primary), var(--color-secondary) 90%);\n height: 2.25em;\n width: 2.25em;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n font-size: 1.03em;\n font-weight: 800;\n box-shadow: var(--shadow-sm);\n }\n .nav-links {\n display: flex;\n gap: var(--space-md);\n align-items: center;\n }\n .nav-link {\n background: none;\n border: none;\n padding: 0;\n font-family: inherit;\n font-size: 1rem;\n color: var(--color-text);\n text-decoration: none;\n line-height: 1;\n cursor: pointer;\n position: relative;\n font-weight: 500;\n outline: none;\n transition: color 0.2s;\n }\n .nav-link[aria-current=\"true\"], .nav-link:hover, .nav-link:focus-visible {\n color: var(--color-primary);\n }\n .nav-link:focus-visible {\n outline: 3px solid var(--color-focus);\n border-radius: 6px;\n outline-offset: 1px;\n }\n /* Hero Section */\n .hero {\n display: grid;\n grid-template-columns: 1fr;\n align-items: center;\n gap: var(--space-lg);\n min-height: 75vh;\n padding: var(--space-lg) 0 var(--space-xl);\n background: var(--color-bg);\n }\n @media (min-width: 768px) {\n .hero {\n grid-template-columns: 1fr 1fr;\n gap: var(--space-xl);\n padding-top: var(--space-xl);\n }\n }\n .hero-text {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-md);\n z-index: 2;\n }\n .hero-title {\n font-size: var(--fs-h1);\n font-family: var(--font-display);\n font-weight: 800;\n margin: 0;\n color: var(--color-text);\n line-height: 1.08;\n letter-spacing: -0.01em;\n max-width: 660px;\n }\n .hero-tagline {\n font-size: var(--fs-h2);\n color: var(--color-primary-dark);\n font-weight: 500;\n margin: 0 0 var(--space-md) 0;\n letter-spacing: 0.01em;\n line-height: 1.19;\n max-width: 520px;\n }\n .hero-cta {\n margin-top: var(--space-sm);\n }\n /* CTA Button */\n .btn-primary {\n display: inline-block;\n background: linear-gradient(90deg, var(--color-primary), var(--color-secondary) 90%);\n color: #fff;\n font-family: var(--font-display);\n font-weight: 600;\n font-size: 1.13rem;\n padding: 0.85em 2.3em;\n border: none;\n border-radius: var(--radius);\n box-shadow: var(--shadow-lg);\n cursor: pointer;\n transition: background 0.27s, transform 0.08s, box-shadow 0.16s;\n outline: none;\n text-align: center;\n letter-spacing: -0.01em;\n position: relative;\n }\n .btn-primary:active {\n transform: translateY(2px) scale(0.99);\n box-shadow: 0 2px 10px 0 rgba(32, 113, 228, 0.07);\n }\n .btn-primary:focus-visible {\n outline: 3px solid var(--color-focus);\n outline-offset: 3px;\n box-shadow: 0 0 0 3px var(--color-focus), var(--shadow-lg);\n }\n .hero-image {\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1;\n min-width: 0;\n }\n .hero-image img {\n width: 100%;\n max-width: 420px;\n height: auto;\n border-radius: var(--radius);\n box-shadow: var(--shadow-lg);\n object-fit: cover;\n }\n\n /* Features Section using CSS Grid for layout */\n .features-section {\n background: var(--color-bg-alt);\n padding: var(--space-lg) 0;\n }\n .features-header {\n margin: 0 auto var(--space-md) auto;\n text-align: center;\n max-width: 700px;\n }\n .features-title {\n font-family: var(--font-display);\n font-size: var(--fs-h2);\n font-weight: 700;\n color: var(--color-text);\n margin-bottom: var(--space-xs);\n margin-top: 0;\n }\n .features-text {\n color: var(--color-text-light);\n font-size: var(--fs-body);\n margin-bottom: 0;\n margin-top: 0;\n }\n .features-grid {\n display: grid;\n gap: var(--space-md) var(--space-lg);\n margin-top: var(--space-md);\n max-width: 1100px;\n margin-left: auto;\n margin-right: auto;\n /* Responsive columns */\n grid-template-columns: 1fr;\n }\n @media (min-width: 640px) {\n .features-grid {\n grid-template-columns: 1fr 1fr;\n }\n }\n @media (min-width: 1024px) {\n .features-grid {\n grid-template-columns: 1fr 1fr 1fr;\n }\n }\n .feature-article {\n background: var(--color-bg);\n border-radius: var(--radius);\n box-shadow: var(--shadow-sm);\n padding: var(--space-md) var(--space-sm) var(--space-sm) var(--space-sm);\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-sm);\n outline: none;\n transition: box-shadow 0.2s, transform 0.15s;\n }\n .feature-article:focus-visible {\n box-shadow: 0 0 0 3px var(--color-focus), var(--shadow-sm);\n }\n .feature-icon {\n width: 54px;\n height: 54px;\n border-radius: 13px;\n background: linear-gradient(135deg, var(--color-secondary) 45%, var(--color-primary) 99%);\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 1.8rem;\n margin-bottom: var(--space-xs);\n box-shadow: 0 2px 8px 0 rgba(32,113,228,.07);\n flex-shrink: 0;\n }\n .feature-title {\n font-size: var(--fs-h3);\n font-family: var(--font-display);\n font-weight: 700;\n margin: 0 0 .3em 0;\n color: var(--color-primary-dark);\n }\n .feature-desc {\n color: var(--color-text);\n margin: 0;\n font-size: var(--fs-body);\n font-weight: 400;\n flex: 1 0 auto;\n }\n\n /* Integrations Section (uses flexbox for two-column layout on desktop) */\n .integrations-section {\n background: var(--color-bg);\n padding: var(--space-lg) 0 var(--space-xl);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .integrations-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-md);\n width: 100%;\n max-width: 980px;\n padding: 0 var(--space-sm);\n }\n @media (min-width: 850px) {\n .integrations-container {\n flex-direction: row;\n align-items: stretch;\n gap: var(--space-xl);\n }\n .integrations-img-col {\n flex: 0 0 350px;\n }\n .integrations-text-col {\n flex: 1 1 0%;\n min-width: 0;\n }\n }\n .integrations-img-col {\n margin-bottom: var(--space-md);\n display: flex;\n align-items: center;\n justify-content: center;\n max-width: 350px;\n width: 100%;\n }\n .integrations-img-col img {\n width: 100%;\n height: auto;\n border-radius: var(--radius);\n box-shadow: var(--shadow-lg);\n object-fit: cover;\n }\n .integrations-text-col {\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: var(--space-xs);\n max-width: 440px;\n }\n .integrations-title {\n margin: 0 0 var(--space-xs) 0;\n font-family: var(--font-display);\n font-size: var(--fs-h3);\n font-weight: 700;\n color: var(--color-primary-dark);\n }\n .integrations-desc {\n color: var(--color-text);\n margin: 0;\n font-size: var(--fs-body);\n font-weight: 400;\n }\n .integrations-tools-logos {\n display: flex;\n gap: 1em;\n flex-wrap: wrap;\n margin-top: var(--space-xs);\n align-items: center;\n }\n .logo-badge {\n background: var(--color-bg-alt);\n padding: 0.35em 0.8em;\n border-radius: 22px;\n box-shadow: var(--shadow-sm);\n font-size: var(--fs-small);\n color: var(--color-text-light);\n font-weight: 500;\n display: flex;\n align-items: center;\n gap: 0.5em;\n }\n /* Footer */\n footer {\n background: var(--color-bg-alt);\n border-top: 1px solid #ecf0f8;\n padding: var(--space-md) 0;\n margin-top: var(--space-md);\n }\n .footer-content {\n max-width: 1160px;\n margin: 0 auto;\n text-align: center;\n color: var(--color-text-light);\n font-size: var(--fs-small);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-wrap: wrap;\n gap: 0.6em;\n }\n .footer-link {\n color: var(--color-primary);\n text-decoration: underline;\n font-weight: 500;\n font-size: inherit;\n outline: none;\n border-radius: 4px;\n padding: .1em .3em;\n transition: background 0.1s, color 0.13s;\n }\n .footer-link:focus-visible {\n outline: 2.5px solid var(--color-focus);\n background: var(--color-focus);\n color: var(--color-text);\n }\n /* Fade-in-on-scroll effect base styles */\n .fade-section {\n opacity: 0;\n transform: translateY(22px) scale(0.98);\n transition: opacity 0.7s cubic-bezier(.7,.23,.35,1), transform 0.7s cubic-bezier(.7,.23,.35,1);\n will-change: opacity, transform;\n }\n .fade-section.inview {\n opacity: 1 !important;\n transform: none !important;\n }\n\n /* Focus visible debugging if Tab is pressed */\n :focus-visible {\n /* provides clear focus indication on any element, overridden as needed */\n outline: 2px solid var(--color-focus);\n outline-offset: 2px;\n }\n\n /* Responsive Typography/Spacing Adjustments */\n @media (max-width: 480px) {\n .nav-links {\n gap: var(--space-sm);\n }\n .container {\n padding-left: .5em;\n padding-right: .5em;\n }\n }\n\n /* Hide skip link until focused */\n .skip-link {\n position: absolute;\n top: -40px; left: 0;\n background: var(--color-focus);\n color: var(--color-text);\n padding: .7em 1.1em;\n z-index: 9999;\n border-radius: 0 0 9px 0;\n font-weight: 600;\n text-decoration: none;\n outline: none;\n transition: top 0.19s;\n }\n .skip-link:focus {\n top: 0;\n outline: 3px solid var(--color-primary);\n }\n\n /* Tablet & Above: Take advantage of grid and larger spacing */\n @media (min-width: 768px) {\n .container {\n padding: 0 var(--space-md);\n }\n .features-section {\n padding: var(--space-xl) 0;\n }\n .features-header {\n margin-bottom: var(--space-lg);\n }\n .integrations-section {\n padding-top: var(--space-xl);\n padding-bottom: var(--space-xl);\n }\n }\n /* Desktop: extra-wide paddings */\n @media (min-width: 1200px) {\n .container {\n padding: 0;\n }\n }\n </style>\n</head>\n<body>\n <!-- Skip to main content link for accessibility -->\n <a href=\"#main-content\" class=\"skip-link\">Skip to main content</a>\n \n <!-- HEADER & NAVIGATION -->\n <header>\n <nav class=\"container\" aria-label=\"Main navigation\">\n <a href=\"/\" class=\"logo\" aria-label=\"Momentum AI homepage\">\n <span class=\"logo-mark\" aria-hidden=\"true\">M</span> Momentum AI\n </a>\n <ul class=\"nav-links\" role=\"menubar\">\n <li role=\"none\">\n <a class=\"nav-link\" href=\"#features\" aria-label=\"Show Features section\" role=\"menuitem\">Features</a>\n </li>\n <li role=\"none\">\n <a class=\"nav-link\" href=\"#integrations\" aria-label=\"Show Integrations section\" role=\"menuitem\">Integrations</a>\n </li>\n <li role=\"none\">\n <a class=\"nav-link\" href=\"#request-demo\" aria-label=\"Request a demo\" role=\"menuitem\">Request a Demo</a>\n </li>\n </ul>\n </nav>\n </header>\n \n <!-- MAIN CONTENT -->\n <main id=\"main-content\" tabindex=\"-1\">\n <!-- HERO SECTION -->\n <section class=\"hero fade-section\" aria-label=\"Welcome to Momentum AI\">\n <div class=\"hero-text\">\n <h1 class=\"hero-title\">Momentum AI</h1>\n <p class=\"hero-tagline\">Automate Your Workflow. Unleash Your Potential.</p>\n <a href=\"#request-demo\" class=\"btn-primary hero-cta\"\n aria-label=\"Request a demo of Momentum AI\">Request a Demo</a>\n </div>\n <div class=\"hero-image\" aria-hidden=\"true\">\n <img \n src=\"https://placehold.co/420x330/2071e4/fff?text=AI+Dashboard\" \n alt=\"Illustration showing an AI workflow dashboard visualization\"\n width=\"420\" height=\"330\"\n />\n </div>\n </section>\n\n <!-- FEATURES SECTION -->\n <section id=\"features\" class=\"features-section fade-section\" aria-label=\"Key Features\">\n <header class=\"features-header\">\n <h2 class=\"features-title\">Key Features</h2>\n <p class=\"features-text\">Make your team unstoppable with AI-driven automation and deep project foresight.</p>\n </header>\n <div class=\"features-grid\">\n <article class=\"feature-article\" tabindex=\"0\">\n <span class=\"feature-icon\" aria-hidden=\"true\">\n <!-- Task Routing Icon (Direction Arrows) SVG -->\n <svg width=\"30\" height=\"30\" viewBox=\"0 0 30 30\" aria-hidden=\"true\" focusable=\"false\">\n <path fill=\"currentColor\" d=\"M13.5 7.25V19H8L12.94 23.94a1 1 0 001.41 0l4.94-4.94h-5.86V7.25a.75.75 0 10-1.5 0z\"/>\n <path fill=\"currentColor\" d=\"M22.53 13.03a.75.75 0 00-1.06 0l-4 4a.75.75 0 101.06 1.06l2.72-2.72V24a.75.75 0 001.5 0V15.37l2.72 2.72a.75.75 0 101.06-1.06l-4-4z\"/>\n </svg>\n </span>\n <h3 class=\"feature-title\">Intelligent Task Routing</h3>\n <p class=\"feature-desc\">\n Automatically assigns tasks to the right team member based on priority and real-time workload. Increase efficiency without the micromanagement.\n </p>\n </article>\n <article class=\"feature-article\" tabindex=\"0\">\n <span class=\"feature-icon\" aria-hidden=\"true\">\n <!-- Analytics Icon (Chart) SVG -->\n <svg width=\"30\" height=\"30\" viewBox=\"0 0 30 30\" aria-hidden=\"true\" focusable=\"false\">\n <path fill=\"currentColor\" d=\"M22.5 24.25h-15a.75.75 0 010-1.5h1V9a.75.75 0 011.5 0v13.75h3V13.5a.75.75 0 011.5 0v9.25h3V17a.75.75 0 011.5 0v5.25h2a.75.75 0 010 1.5z\"/>\n <circle fill=\"currentColor\" cx=\"19\" cy=\"11\" r=\"2\"/>\n </svg>\n </span>\n <h3 class=\"feature-title\">Predictive Analytics</h3>\n <p class=\"feature-desc\">\n Forecast project deadlines and resource needs with 95% accuracy, using machine learning trained on thousands of team projects.\n </p>\n </article>\n <article class=\"feature-article\" tabindex=\"0\">\n <span class=\"feature-icon\" aria-hidden=\"true\">\n <!-- Integration Link Icon (Chain) SVG -->\n <svg width=\"30\" height=\"30\" viewBox=\"0 0 30 30\" aria-hidden=\"true\" focusable=\"false\">\n <path fill=\"currentColor\" d=\"M21.1 8.9a5.52 5.52 0 010 7.8l-3.18 3.18a5.52 5.52 0 01-7.8-7.8l1.35-1.35a.75.75 0 111.06 1.06l-1.35 1.35a4.02 4.02 0 005.68 5.68l3.18-3.18a4.02 4.02 0 00-5.68-5.68L11 10.95A.75.75 0 019.94 9.9l1.35-1.35a5.52 5.52 0 017.8 0z\"/>\n </svg>\n </span>\n <h3 class=\"feature-title\">Seamless Integration</h3>\n <p class=\"feature-desc\">\n Connect effortlessly with over 200+ tools like Slack, Jira, Asana, Trello, Microsoft Teams, and more—all in one unified workspace.\n </p>\n </article>\n </div>\n </section>\n\n <!-- INTEGRATIONS SECTION -->\n <section id=\"integrations\" class=\"integrations-section fade-section\" aria-label=\"Integrations Overview\">\n <div class=\"integrations-container\">\n <div class=\"integrations-img-col\" aria-hidden=\"true\">\n <img \n src=\"https://placehold.co/350x270/28c8c8/fff?text=App+Integrations\"\n alt=\"Collage showing app and service integrations\"\n width=\"350\" height=\"270\"\n />\n </div>\n <div class=\"integrations-text-col\">\n <h2 class=\"integrations-title\">Seamless Connections</h2>\n <p class=\"integrations-desc\">\n Integrate with your favorite tools in just a few clicks—Momentum AI connects to 200+ major platforms without the hassle.\n </p>\n <div class=\"integrations-tools-logos\" aria-label=\"Popular Integrations\">\n <span class=\"logo-badge\">\n <img src=\"https://placehold.co/24x24/fff/2071e4?text=S\" alt=\"\" width=\"24\" height=\"24\" aria-hidden=\"true\" style=\"border-radius:6px;margin-right:.2em;\">\n Slack\n </span>\n <span class=\"logo-badge\">\n <img src=\"https://placehold.co/24x24/fff/28c8c8?text=J\" alt=\"\" width=\"24\" height=\"24\" aria-hidden=\"true\" style=\"border-radius:6px;margin-right:.2em;\">\n Jira\n </span>\n <span class=\"logo-badge\">\n <img src=\"https://placehold.co/24x24/fff/846afd?text=A\" alt=\"\" width=\"24\" height=\"24\" aria-hidden=\"true\" style=\"border-radius:6px;margin-right:.2em;\">\n Asana\n </span>\n <span class=\"logo-badge\">\n <img src=\"https://placehold.co/24x24/fff/55bb67?text=T\" alt=\"\" width=\"24\" height=\"24\" aria-hidden=\"true\" style=\"border-radius:6px;margin-right:.2em;\">\n Trello\n </span>\n <span class=\"logo-badge\">\n <img src=\"https://placehold.co/24x24/fff/242e4e?text=MT\" alt=\"\" width=\"24\" height=\"24\" aria-hidden=\"true\" style=\"border-radius:6px;margin-right:.2em;\">\n MS Teams\n </span>\n </div>\n </div>\n </div>\n </section>\n\n <!-- CALL-TO-ACTION / REQUEST DEMO SECTION -->\n <section id=\"request-demo\" class=\"fade-section\" aria-label=\"Request a Demo\" style=\"padding: var(--space-xl) 0 var(--space-lg) 0; background:var(--color-bg-alt);\">\n <div class=\"container\" style=\"display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-md);\">\n <h2 style=\"font-size: var(--fs-h2); font-family: var(--font-display); font-weight: 700; margin: 0; color: var(--color-primary-dark);\">Ready to Unleash Your Potential?</h2>\n <p style=\"color: var(--color-text-light); max-width: 500px; margin: 0 auto; font-size: var(--fs-body);\">\n Get a personalized demo, tailored to your workflow. See how Momentum AI can automate your operations and empower your team.\n </p>\n <form aria-label=\"Request a demo form\" style=\"margin-top: var(--space-sm); display: flex; gap: var(--space-sm); flex-direction: column; align-items: center; width: 100%; max-width: 380px;\">\n <label for=\"email\" style=\"align-self: flex-start; font-size: var(--fs-small); font-weight: 600; margin-bottom:0.4em; color: var(--color-text);\">Work Email</label>\n <input\n type=\"email\"\n id=\"email\"\n name=\"email\"\n inputmode=\"email\"\n required\n autocomplete=\"email\"\n placeholder=\"[email protected]\"\n aria-label=\"Enter your work email\"\n style=\"\n width: 100%;\n padding: .87em 1.15em;\n border: 1.5px solid #c3d5ef;\n border-radius: var(--radius);\n font-family: inherit;\n font-size: 1.09rem;\n outline: none;\n margin-bottom: var(--space-sm);\n background: #fff;\n color: var(--color-text);\n box-shadow: var(--shadow-sm);\n transition: border 0.19s;\n \"\n onfocus=\"this.style.borderColor='var(--color-primary)';\"\n onblur=\"this.style.borderColor='#c3d5ef';\"\n >\n <button\n type=\"submit\"\n class=\"btn-primary\"\n aria-label=\"Request a demo\"\n style=\"width:100%;margin-top:.4em;\"\n >\n Request a Demo\n </button>\n </form>\n </div>\n </section>\n </main>\n \n <!-- FOOTER -->\n <footer>\n <div class=\"footer-content\">\n © <span id=\"copyright-year\">2024</span> Momentum AI.\n <span aria-hidden=\"true\">•</span>\n <a href=\"#request-demo\" class=\"footer-link\" aria-label=\"Request a demo in footer\">Request a Demo</a>\n <span aria-hidden=\"true\">•</span>\n <a href=\"#main-content\" class=\"footer-link\" aria-label=\"Back to top\">Back to Top</a>\n </div>\n </footer>\n\n <!-- JavaScript: Smooth scroll for nav links & fade-in-on-scroll effect -->\n <script>\n // --- CURRENT YEAR for copyright (accessibility: not strictly required, but nice UX)\n document.getElementById('copyright-year').textContent = new Date().getFullYear();\n\n // --- Smooth scrolling for internal navigation links ---\n // Only for on-page anchor links starting with '#'\n document.querySelectorAll('a.nav-link, .footer-link, .btn-primary.hero-cta').forEach(function(link) {\n link.addEventListener('click', function(e) {\n var href = link.getAttribute('href');\n if(href && href.startsWith('#')) {\n var target = document.getElementById(href.substring(1));\n if(target) {\n e.preventDefault();\n target.scrollIntoView({behavior: 'smooth', block: 'start'});\n // Move keyboard focus to target section for accessibility\n if(target.tabIndex !== 0) target.setAttribute('tabindex', '-1');\n target.focus({preventScroll:true});\n }\n }\n });\n });\n\n // --- Fade-in-on-scroll effect for main sections ---\n // Uses IntersectionObserver for efficiency\n // Adds the .inview class to fade-section when at least 20% visible\n (function() {\n var fadeSections = Array.prototype.slice.call(document.querySelectorAll('.fade-section'));\n if(!('IntersectionObserver' in window)) {\n // Fallback: just show all\n fadeSections.forEach(function(sec){ sec.classList.add('inview'); });\n return;\n }\n var observer = new window.IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if(entry.isIntersecting) {\n entry.target.classList.add('inview');\n // Only animate once\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.2 });\n fadeSections.forEach(function(sec){\n observer.observe(sec);\n });\n })();\n\n // --- Ensure skip link focus works in all browsers (tabindex on main set appropriately) ---\n // Already done by adding tabindex=\"-1\" to #main-content\n\n // --- Prevent form submission for the demo (non-functional placeholder) ---\n document.querySelector('form[aria-label=\"Request a demo form\"]').addEventListener('submit', function(e) {\n e.preventDefault();\n var email = this.elements['email'].value;\n if(email) {\n alert('Thank you! We will reach out soon at ' + email + ' 🎉');\n this.reset();\n }\n });\n </script>\n</body>\n</html>\n```\n",
- "gpt-5-bench-chatcompletions-gpt41-api-ev3": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n <title>Momentum AI — Automate Your Workflow. Unleash Your Potential.</title>\n <meta name=\"description\" content=\"Momentum AI optimizes your team with intelligent task routing, predictive analytics, and seamless integrations. Request a demo today.\" />\n <style>\n /* ================================\n CSS Variables and Base Styles\n ================================ */\n :root {\n /* Color palette (WCAG AA compliant on white) */\n --clr-primary-700: #1a2a6c; /* Deep indigo (contrast on white ~9.7:1) */\n --clr-primary-500: #2a4fc6; /* Indigo-blue */\n --clr-accent-500: #00a884; /* Teal accent (on white ~4.6:1) */\n --clr-neutral-900: #0f172a; /* Slate-900 */\n --clr-neutral-700: #334155; /* Slate-700 */\n --clr-neutral-600: #475569; /* Slate-600 */\n --clr-neutral-200: #e2e8f0; /* Slate-200 */\n --clr-neutral-100: #f1f5f9; /* Slate-100 */\n --clr-white: #ffffff;\n\n /* Typography */\n --ff-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\";\n --fs-900: clamp(2rem, 5vw + 1rem, 3.75rem); /* Hero headline */\n --fs-700: clamp(1.125rem, 1.2vw + 1rem, 1.5rem);\n --fs-600: clamp(1.0625rem, 0.6vw + 0.9rem, 1.25rem);\n --fs-500: clamp(1rem, 0.5vw + 0.9rem, 1.125rem);\n --fs-400: 1rem;\n\n /* Spacing */\n --space-2xs: 0.25rem;\n --space-xs: 0.5rem;\n --space-s: 0.75rem;\n --space-m: 1rem;\n --space-l: 1.5rem;\n --space-xl: 2rem;\n --space-2xl: 3rem;\n --space-3xl: 4rem;\n --radius-m: 12px;\n\n /* Shadows */\n --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.08);\n --shadow-md: 0 10px 30px rgba(15, 23, 42, 0.12);\n }\n\n /* Global resets and base */\n * { box-sizing: border-box; }\n html:focus-within { scroll-behavior: smooth; }\n body {\n margin: 0;\n font-family: var(--ff-sans);\n color: var(--clr-neutral-900);\n background: linear-gradient(180deg, #fafcff 0%, #f6f9ff 35%, #ffffff 100%);\n line-height: 1.6;\n text-rendering: optimizeLegibility;\n }\n img { max-width: 100%; display: block; }\n a { color: inherit; text-decoration: none; }\n a:focus-visible, button:focus-visible { outline: 3px solid var(--clr-accent-500); outline-offset: 2px; }\n /* Visually hidden utility for a11y */\n .visually-hidden {\n position: absolute !important;\n width: 1px; height: 1px;\n padding: 0; margin: -1px;\n overflow: hidden; clip: rect(0 0 0 0);\n white-space: nowrap; border: 0;\n }\n\n /* ================================\n Layout: Header & Navigation\n ================================ */\n header {\n position: sticky;\n top: 0;\n z-index: 1000;\n background: rgba(255, 255, 255, 0.85);\n backdrop-filter: blur(10px);\n border-bottom: 1px solid var(--clr-neutral-200);\n }\n .container {\n width: min(1120px, 92vw);\n margin-inline: auto;\n }\n nav {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--space-m) 0;\n gap: var(--space-l);\n }\n .brand {\n display: flex;\n align-items: center;\n gap: var(--space-s);\n color: var(--clr-primary-700);\n font-weight: 700;\n letter-spacing: 0.3px;\n }\n .brand img {\n width: 40px; height: 40px;\n border-radius: 8px;\n box-shadow: var(--shadow-sm);\n }\n .nav-links {\n display: flex;\n gap: clamp(0.75rem, 2vw, 2rem);\n align-items: center;\n }\n .nav-links a {\n font-size: var(--fs-500);\n color: var(--clr-neutral-700);\n }\n .nav-links a:hover,\n .nav-links a:focus-visible {\n color: var(--clr-primary-500);\n }\n .btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n border-radius: 999px;\n padding: 0.75rem 1.25rem;\n font-weight: 700;\n border: 2px solid transparent;\n cursor: pointer;\n transition: transform 0.08s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;\n }\n .btn:active { transform: translateY(1px); }\n .btn-primary {\n background: var(--clr-primary-700);\n color: var(--clr-white);\n box-shadow: var(--shadow-sm);\n }\n .btn-primary:hover {\n background: var(--clr-primary-500);\n box-shadow: var(--shadow-md);\n }\n .btn-outline {\n background: transparent;\n color: var(--clr-primary-700);\n border-color: var(--clr-primary-700);\n }\n .btn-outline:hover {\n background: var(--clr-primary-700);\n color: var(--clr-white);\n }\n\n /* ================================\n Hero Section (Flexbox)\n ================================ */\n .hero {\n padding: clamp(2rem, 6vw, 5rem) 0 clamp(2.5rem, 8vw, 6rem);\n }\n .hero-inner {\n display: flex;\n align-items: center;\n gap: clamp(1.5rem, 4vw, 3rem);\n flex-wrap: wrap; /* Stack on mobile */\n }\n .hero-content {\n flex: 1 1 420px;\n min-width: 280px;\n }\n .hero-eyebrow {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.35rem 0.75rem;\n border-radius: 999px;\n background: #e7eefc;\n color: var(--clr-primary-700);\n font-size: 0.9rem;\n font-weight: 700;\n letter-spacing: 0.3px;\n }\n .hero h1 {\n font-size: var(--fs-900);\n line-height: 1.1;\n margin: var(--space-m) 0 var(--space-s);\n color: var(--clr-neutral-900);\n }\n .hero p {\n font-size: var(--fs-600);\n color: var(--clr-neutral-700);\n margin: 0 0 var(--space-l);\n }\n .hero-cta {\n display: flex; gap: var(--space-m); flex-wrap: wrap;\n }\n .hero-media {\n flex: 1 1 380px;\n min-width: 280px;\n }\n .hero-figure {\n border-radius: var(--radius-m);\n overflow: hidden;\n box-shadow: var(--shadow-md);\n border: 1px solid var(--clr-neutral-200);\n background: var(--clr-white);\n }\n\n /* ================================\n Features (CSS Grid)\n ================================ */\n .section {\n padding: clamp(2rem, 6vw, 4rem) 0;\n }\n .section-header {\n max-width: 720px;\n margin-inline: auto;\n text-align: center;\n margin-bottom: clamp(1.25rem, 3vw, 2rem);\n }\n .section h2 {\n font-size: clamp(1.5rem, 2.2vw, 2.25rem);\n line-height: 1.2;\n margin: 0 0 var(--space-s);\n color: var(--clr-neutral-900);\n }\n .section p.lead {\n font-size: var(--fs-600);\n color: var(--clr-neutral-700);\n margin: 0;\n }\n .features-grid {\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n gap: clamp(1rem, 2.5vw, 2rem);\n margin-top: clamp(1rem, 3vw, 2rem);\n }\n .feature-card {\n grid-column: span 12;\n background: var(--clr-white);\n border-radius: var(--radius-m);\n border: 1px solid var(--clr-neutral-200);\n box-shadow: var(--shadow-sm);\n padding: clamp(1rem, 3vw, 1.5rem);\n display: grid;\n grid-template-columns: 64px 1fr;\n gap: var(--space-m);\n align-items: start;\n }\n .feature-icon {\n width: 64px; height: 64px;\n border-radius: 12px;\n display: grid; place-items: center;\n background: #e6fbf6;\n color: var(--clr-accent-500);\n font-weight: 900;\n border: 1px solid #bff1e6;\n }\n .feature-content h3 {\n margin: 0 0 var(--space-xs);\n font-size: var(--fs-700);\n color: var(--clr-neutral-900);\n line-height: 1.25;\n }\n .feature-content p {\n margin: 0;\n color: var(--clr-neutral-700);\n font-size: var(--fs-500);\n }\n\n @media (min-width: 640px) {\n .feature-card { grid-column: span 6; }\n }\n @media (min-width: 1024px) {\n .feature-card { grid-column: span 4; }\n }\n\n /* ================================\n Integrations (Responsive Grid)\n ================================ */\n .integrations {\n background: var(--clr-neutral-100);\n border-top: 1px solid var(--clr-neutral-200);\n border-bottom: 1px solid var(--clr-neutral-200);\n }\n .logo-grid {\n display: grid;\n grid-template-columns: repeat(6, minmax(80px, 1fr));\n gap: 1rem;\n align-items: center;\n justify-items: center;\n margin-top: var(--space-l);\n }\n .logo-grid figure {\n margin: 0;\n width: 100%;\n border-radius: 10px;\n border: 1px dashed var(--clr-neutral-200);\n background: var(--clr-white);\n padding: var(--space-m);\n display: grid;\n place-items: center;\n min-height: 80px;\n }\n @media (max-width: 1023px) {\n .logo-grid { grid-template-columns: repeat(4, 1fr); }\n }\n @media (max-width: 639px) {\n .logo-grid { grid-template-columns: repeat(2, 1fr); }\n }\n\n /* ================================\n CTA Banner\n ================================ */\n .cta {\n background: radial-gradient(1200px 600px at 80% -10%, #d7e0ff 0%, transparent 60%), linear-gradient(180deg, #ffffff 0, #eef2ff 100%);\n border-top: 1px solid var(--clr-neutral-200);\n }\n .cta-box {\n background: var(--clr-white);\n border: 1px solid var(--clr-neutral-200);\n border-radius: 16px;\n padding: clamp(1.25rem, 3vw, 2rem);\n display: grid;\n gap: var(--space-m);\n align-items: center;\n grid-template-columns: 1fr;\n box-shadow: var(--shadow-md);\n }\n @media (min-width: 768px) {\n .cta-box { grid-template-columns: 1.5fr auto; }\n }\n .cta h3 {\n font-size: clamp(1.25rem, 1.6vw, 1.75rem);\n margin: 0 0 var(--space-xs);\n color: var(--clr-primary-700);\n }\n .cta p {\n margin: 0;\n color: var(--clr-neutral-700);\n font-size: var(--fs-500);\n }\n\n /* ================================\n Footer\n ================================ */\n footer {\n padding: var(--space-2xl) 0;\n color: var(--clr-neutral-600);\n }\n .footer-inner {\n display: grid;\n grid-template-columns: 1fr;\n gap: var(--space-l);\n border-top: 1px solid var(--clr-neutral-200);\n padding-top: var(--space-l);\n }\n @media (min-width: 768px) {\n .footer-inner {\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n }\n .footer-nav {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-m);\n }\n .footer-nav a {\n color: var(--clr-neutral-700);\n font-size: 0.95rem;\n }\n .footer-nav a:hover,\n .footer-nav a:focus-visible {\n color: var(--clr-primary-500);\n }\n .copyright {\n font-size: 0.9rem;\n }\n\n /* ================================\n Fade-in on scroll animations\n ================================ */\n [data-animate] {\n opacity: 0;\n transform: translateY(16px);\n transition: opacity 600ms ease, transform 600ms ease;\n will-change: opacity, transform;\n }\n [data-animate].in-view {\n opacity: 1;\n transform: translateY(0);\n }\n </style>\n</head>\n<body>\n <a class=\"visually-hidden\" href=\"#main\" aria-label=\"Skip to main content\">Skip to main content</a>\n\n <header>\n <div class=\"container\">\n <nav aria-label=\"Primary\">\n <a class=\"brand\" href=\"#top\" aria-label=\"Momentum AI home\">\n <img src=\"https://placehold.co/80x80/2a4fc6/ffffff?text=MAI\" width=\"40\" height=\"40\" alt=\"Momentum AI logo\" />\n <span>Momentum AI</span>\n </a>\n <div class=\"nav-links\" role=\"menubar\" aria-label=\"Main navigation links\">\n <a role=\"menuitem\" href=\"#features\" aria-label=\"Go to features section\">Features</a>\n <a role=\"menuitem\" href=\"#integrations\" aria-label=\"Go to integrations section\">Integrations</a>\n <a role=\"menuitem\" href=\"#about\" aria-label=\"Go to about section\">About</a>\n <a role=\"menuitem\" href=\"#contact\" aria-label=\"Go to contact section\">Contact</a>\n <a class=\"btn btn-outline\" href=\"#demo\" aria-label=\"Request a demo from the navigation\">Request a Demo</a>\n </div>\n </nav>\n </div>\n </header>\n\n <main id=\"main\">\n <!-- Hero -->\n <section id=\"top\" class=\"hero\" aria-labelledby=\"hero-title\">\n <div class=\"container hero-inner\">\n <article class=\"hero-content\" data-animate>\n <span class=\"hero-eyebrow\" aria-hidden=\"true\">AI-Powered Operations</span>\n <h1 id=\"hero-title\">Automate Your Workflow. Unleash Your Potential.</h1>\n <p>\n Momentum AI streamlines teamwork with intelligent task routing, predictive analytics, and seamless integrations.\n Work smarter, deliver faster, and focus on what matters.\n </p>\n <p class=\"hero-cta\">\n <a class=\"btn btn-primary\" href=\"#demo\" aria-label=\"Request a demo from hero section\">Request a Demo</a>\n <a class=\"btn btn-outline\" href=\"#features\" aria-label=\"Learn more about Momentum AI features\">Learn More</a>\n </p>\n </article>\n <aside class=\"hero-media\" aria-label=\"Product illustration\" data-animate>\n <figure class=\"hero-figure\">\n <img\n src=\"https://placehold.co/960x600/ffffff/1a2a6c?text=Dashboard+Preview\"\n width=\"960\"\n height=\"600\"\n alt=\"Momentum AI dashboard preview showing task routing and analytics\"\n />\n <figcaption class=\"visually-hidden\">A sample dashboard illustrating task routing and analytics charts.</figcaption>\n </figure>\n </aside>\n </div>\n </section>\n\n <!-- Features -->\n <section id=\"features\" class=\"section\" aria-labelledby=\"features-title\">\n <div class=\"container\">\n <header class=\"section-header\" data-animate>\n <h2 id=\"features-title\">What Makes Momentum AI Different</h2>\n <p class=\"lead\">Built for modern teams that need clarity, speed, and reliability.</p>\n </header>\n\n <div class=\"features-grid\" role=\"list\">\n <article class=\"feature-card\" role=\"listitem\" data-animate>\n <div class=\"feature-icon\" aria-hidden=\"true\">↪</div>\n <div class=\"feature-content\">\n <h3>Intelligent Task Routing</h3>\n <p>Automatically assigns tasks to the right team member based on priority, skills, and workload—no more manual juggling.</p>\n </div>\n </article>\n\n <article class=\"feature-card\" role=\"listitem\" data-animate>\n <div class=\"feature-icon\" aria-hidden=\"true\">📈</div>\n <div class=\"feature-content\">\n <h3>Predictive Analytics</h3>\n <p>Forecast project deadlines and resource needs with 95% accuracy so you can plan ahead with confidence.</p>\n </div>\n </article>\n\n <article class=\"feature-card\" role=\"listitem\" data-animate>\n <div class=\"feature-icon\" aria-hidden=\"true\">🔗</div>\n <div class=\"feature-content\">\n <h3>Seamless Integration</h3>\n <p>Connect effortlessly with over 200 tools like Slack, Jira, and Asana to keep your workflows in one place.</p>\n </div>\n </article>\n </div>\n </div>\n </section>\n\n <!-- Integrations -->\n <section id=\"integrations\" class=\"section integrations\" aria-labelledby=\"integrations-title\">\n <div class=\"container\">\n <header class=\"section-header\" data-animate>\n <h2 id=\"integrations-title\">Works With Your Favorite Tools</h2>\n <p class=\"lead\">Plug Momentum AI into your existing stack in minutes.</p>\n </header>\n\n <div class=\"logo-grid\" aria-label=\"Supported integrations logos\">\n <figure data-animate>\n <img src=\"https://placehold.co/160x60/ffffff/2a4fc6?text=Slack\" width=\"160\" height=\"60\" alt=\"Slack logo\" />\n </figure>\n <figure data-animate>\n <img src=\"https://placehold.co/160x60/ffffff/2a4fc6?text=Jira\" width=\"160\" height=\"60\" alt=\"Jira logo\" />\n </figure>\n <figure data-animate>\n <img src=\"https://placehold.co/160x60/ffffff/2a4fc6?text=Asana\" width=\"160\" height=\"60\" alt=\"Asana logo\" />\n </figure>\n <figure data-animate>\n <img src=\"https://placehold.co/160x60/ffffff/2a4fc6?text=GitHub\" width=\"160\" height=\"60\" alt=\"GitHub logo\" />\n </figure>\n <figure data-animate>\n <img src=\"https://placehold.co/160x60/ffffff/2a4fc6?text=Notion\" width=\"160\" height=\"60\" alt=\"Notion logo\" />\n </figure>\n <figure data-animate>\n <img src=\"https://placehold.co/160x60/ffffff/2a4fc6?text=G+Suite\" width=\"160\" height=\"60\" alt=\"Google Workspace logo\" />\n </figure>\n </div>\n </div>\n </section>\n\n <!-- About -->\n <section id=\"about\" class=\"section\" aria-labelledby=\"about-title\">\n <div class=\"container\">\n <header class=\"section-header\" data-animate>\n <h2 id=\"about-title\">Built for Teams, Designed for Impact</h2>\n <p class=\"lead\">We believe AI should be practical, transparent, and accessible—helping teams do their best work.</p>\n </header>\n\n <article class=\"container\" data-animate style=\"max-width: 900px;\">\n <p style=\"margin-top:0\">\n Momentum AI eliminates busywork so your team can focus on outcomes. From startup sprints to enterprise programs,\n our platform adapts to how you work—providing real-time visibility, predictive insights, and automation where it counts.\n </p>\n <p>\n Security and privacy are built-in: role-based access, audit trails, and data residency options keep your organization compliant.\n With a human-centered approach, Momentum AI augments decision-making while keeping people in control.\n </p>\n </article>\n </div>\n </section>\n\n <!-- Demo CTA -->\n <section id=\"demo\" class=\"section cta\" aria-labelledby=\"demo-title\">\n <div class=\"container\">\n <div class=\"cta-box\" data-animate>\n <div>\n <h3 id=\"demo-title\">See Momentum AI in Action</h3>\n <p>Request a personalized demo tailored to your workflows and tools.</p>\n </div>\n <p style=\"margin:0;\">\n <a class=\"btn btn-primary\" href=\"#contact\" aria-label=\"Proceed to contact section to request a demo\">Request a Demo</a>\n </p>\n </div>\n </div>\n </section>\n\n <!-- Contact -->\n <section id=\"contact\" class=\"section\" aria-labelledby=\"contact-title\">\n <div class=\"container\">\n <header class=\"section-header\" data-animate>\n <h2 id=\"contact-title\">Contact Us</h2>\n <p class=\"lead\">Tell us about your team and goals—our experts will reach out within one business day.</p>\n </header>\n\n <!-- Simple accessible form -->\n <form class=\"container\" data-animate style=\"max-width: 720px;\" aria-labelledby=\"contact-title\" aria-describedby=\"contact-desc\">\n <p id=\"contact-desc\" class=\"visually-hidden\">All fields are required unless marked optional.</p>\n <fieldset style=\"border:0; padding:0; margin:0; display:grid; gap:1rem;\">\n <label>\n <span>Name</span><br />\n <input aria-label=\"Your full name\" name=\"name\" type=\"text\" required\n style=\"width:100%; padding:0.75rem 0.9rem; border:1px solid var(--clr-neutral-200); border-radius:10px; font-size:1rem;\" />\n </label>\n <label>\n <span>Email</span><br />\n <input aria-label=\"Your email address\" name=\"email\" type=\"email\" required\n style=\"width:100%; padding:0.75rem 0.9rem; border:1px solid var(--clr-neutral-200); border-radius:10px; font-size:1rem;\" />\n </label>\n <label>\n <span>Company (optional)</span><br />\n <input aria-label=\"Your company name (optional)\" name=\"company\" type=\"text\"\n style=\"width:100%; padding:0.75rem 0.9rem; border:1px solid var(--clr-neutral-200); border-radius:10px; font-size:1rem;\" />\n </label>\n <label>\n <span>How can we help?</span><br />\n <textarea aria-label=\"Describe your needs\" name=\"message\" rows=\"5\" required\n style=\"width:100%; padding:0.75rem 0.9rem; border:1px solid var(--clr-neutral-200); border-radius:10px; font-size:1rem; resize:vertical;\"></textarea>\n </label>\n <div>\n <button type=\"submit\" class=\"btn btn-primary\" aria-label=\"Submit the contact form to request a demo\">Send Request</button>\n </div>\n </fieldset>\n </form>\n </div>\n </section>\n </main>\n\n <footer aria-labelledby=\"footer-title\">\n <div class=\"container\">\n <h2 id=\"footer-title\" class=\"visually-hidden\">Footer</h2>\n <div class=\"footer-inner\">\n <p class=\"copyright\">© <span id=\"year\"></span> Momentum AI. All rights reserved.</p>\n <nav class=\"footer-nav\" aria-label=\"Footer\">\n <a href=\"#about\" aria-label=\"About Momentum AI\">About</a>\n <a href=\"#features\" aria-label=\"Momentum AI features\">Features</a>\n <a href=\"#integrations\" aria-label=\"Momentum AI integrations\">Integrations</a>\n <a href=\"#contact\" aria-label=\"Contact Momentum AI\">Contact</a>\n <a href=\"#top\" aria-label=\"Back to top\">Back to Top</a>\n </nav>\n </div>\n </div>\n </footer>\n\n <script>\n // Smooth scroll is handled by CSS (html:focus-within -> scroll-behavior:smooth) and native browser behavior.\n // Below we enhance anchor clicks to also shift focus to target for accessibility and consistent behavior.\n\n (function () {\n // Set current year in footer\n document.getElementById('year').textContent = new Date().getFullYear();\n\n // Enhance in-page navigation with focus management\n const internalLinks = document.querySelectorAll('a[href^=\"#\"]:not([href=\"#\"])');\n internalLinks.forEach(link => {\n link.addEventListener('click', function (e) {\n const id = this.getAttribute('href').slice(1);\n const target = document.getElementById(id) || document.querySelector(`[name=\"${id}\"]`);\n if (target) {\n e.preventDefault();\n target.setAttribute('tabindex', '-1'); // make focusable if not already\n target.scrollIntoView({ behavior: 'smooth', block: 'start' });\n // After scroll ends, move focus for screen readers/keyboard users\n setTimeout(() => {\n target.focus({ preventScroll: true });\n // Clean up tabindex if it wasn't there originally\n if (!target.dataset.keepTabindex) {\n target.removeAttribute('tabindex');\n }\n }, 500);\n }\n });\n });\n\n // IntersectionObserver for fade-in on scroll\n const animated = document.querySelectorAll('[data-animate]');\n const io = new IntersectionObserver((entries, observer) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('in-view');\n observer.unobserve(entry.target); // animate once\n }\n });\n }, { threshold: 0.15 });\n\n animated.forEach(el => io.observe(el));\n })();\n </script>\n</body>\n</html>",
- "gpt-4o": "```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Momentum AI - Automate Your Workflow</title>\n <style>\n :root {\n --primary-color: #0047FF;\n --secondary-color: #f4f4f9;\n --text-color: #333;\n --font-family: 'Arial', sans-serif;\n --max-width: 1200px;\n }\n \n body, h1, h2, h3, p, a {\n margin: 0;\n padding: 0;\n line-height: 1.6;\n color: var(--text-color);\n }\n \n body {\n font-family: var(--font-family);\n background-color: var(--secondary-color);\n }\n \n header {\n background-color: var(--primary-color);\n color: #fff;\n padding: 1rem;\n text-align: center;\n }\n\n nav {\n display: flex;\n justify-content: center;\n margin-top: 1rem;\n }\n\n nav a {\n color: #fff;\n text-decoration: none;\n margin: 0 1rem;\n font-size: clamp(1rem, 1vw + 1rem, 1.25rem);\n position: relative;\n }\n\n nav a::after {\n content: '';\n display: block;\n width: 0;\n height: 2px;\n background: #fff;\n transition: width .3s;\n position: absolute;\n bottom: -5px;\n left: 50%;\n transform: translateX(-50%);\n }\n\n nav a:focus-visible::after,\n nav a:hover::after {\n width: 100%;\n }\n \n main {\n max-width: var(--max-width);\n margin: auto;\n padding: 2rem;\n }\n\n .hero {\n text-align: center;\n margin-bottom: 3rem;\n }\n\n .hero h1 {\n font-size: clamp(2rem, 2.5vw + 2rem, 3rem);\n }\n\n .hero p {\n font-size: clamp(1rem, 1.5vw + 1rem, 1.25rem);\n }\n\n .cta-button {\n background-color: var(--primary-color);\n color: #fff;\n padding: 1rem 2rem;\n border: none;\n border-radius: 5px;\n font-size: 1rem;\n cursor: pointer;\n margin-top: 1rem;\n }\n\n .cta-button:focus-visible,\n .cta-button:hover {\n background-color: #0033cc;\n }\n \n section {\n margin-bottom: 3rem;\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n }\n \n section.visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n .features {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n }\n \n .feature {\n background: #fff;\n padding: 1.5rem;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n }\n\n .feature img {\n width: 100%;\n border-radius: 5px;\n }\n\n footer {\n text-align: center;\n padding: 1rem;\n background-color: var(--primary-color);\n color: #fff;\n }\n\n @media (min-width: 768px) {\n nav {\n justify-content: flex-start;\n }\n }\n\n </style>\n</head>\n<body>\n <header>\n <h1>Momentum AI</h1>\n <p>Automate Your Workflow. Unleash Your Potential.</p>\n </header>\n <nav aria-label=\"Main Navigation\">\n <a href=\"#features\">Features</a>\n <a href=\"#demo\" class=\"cta-button\">Request a Demo</a>\n </nav>\n <main>\n <section class=\"hero\" id=\"hero\">\n <h2>Welcome to Momentum AI</h2>\n <p>Empowering teams with the AI-driven tools to automate workflows and harness their potential.</p>\n <button class=\"cta-button\" aria-label=\"Request a Demo\">Request a Demo</button>\n </section>\n <section id=\"features\" class=\"features\">\n <article class=\"feature\">\n <img src=\"https://placehold.co/300x200\" alt=\"Illustration of intelligent task routing\">\n <h3>Intelligent Task Routing</h3>\n <p>Automatically assigns tasks to the right team member based on priority and workload.</p>\n </article>\n <article class=\"feature\">\n <img src=\"https://placehold.co/300x200\" alt=\"Graph representing predictive analytics\">\n <h3>Predictive Analytics</h3>\n <p>Forecasts project deadlines and resource needs with 95% accuracy.</p>\n </article>\n <article class=\"feature\">\n <img src=\"https://placehold.co/300x200\" alt=\"Integration example with multiple tool logos\">\n <h3>Seamless Integration</h3>\n <p>Connects effortlessly with over 200+ existing tools like Slack, Jira, and Asana.</p>\n </article>\n </section>\n </main>\n <footer>\n <p>© 2023 Momentum AI. All rights reserved.</p>\n </footer>\n <script>\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n document.querySelector(this.getAttribute('href')).scrollIntoView({\n behavior: 'smooth'\n });\n });\n });\n\n // Utilizing IntersectionObserver for fade-in effect\n const observer = new IntersectionObserver((entries, observer) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n observer.unobserve(entry.target);\n }\n });\n }, {threshold: 0.1});\n\n document.querySelectorAll('section').forEach(section => {\n observer.observe(section);\n });\n </script>\n</body>\n</html>\n```",
- "chatgpt-4o-latest": "```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Momentum AI — Automate Your Workflow. Unleash Your Potential.</title>\n <style>\n :root {\n /* Color Palette (WCAG AA-compliant) */\n --color-primary: #1e40af; /* Blue - AA compliant */\n --color-secondary: #0f172a; /* Dark Navy */\n --color-accent: #facc15; /* Amber */\n --color-background: #ffffff;\n --color-text: #1e293b;\n --color-muted: #64748b;\n --color-white: #ffffff;\n\n /* Font Families */\n --font-sans: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\n\n /* Spacing */\n --spacing-section: clamp(3rem, 8vw, 6rem);\n }\n\n *, *::before, *::after {\n box-sizing: border-box;\n }\n\n body {\n margin: 0;\n font-family: var(--font-sans);\n font-size: clamp(1rem, 2vw, 1.125rem);\n line-height: 1.6;\n color: var(--color-text);\n background-color: var(--color-background);\n scroll-behavior: smooth;\n }\n\n a {\n color: inherit;\n text-decoration: none;\n }\n\n img {\n max-width: 100%;\n height: auto;\n display: block;\n }\n\n header {\n background-color: var(--color-white);\n border-bottom: 1px solid #e2e8f0;\n position: sticky;\n top: 0;\n z-index: 1000;\n }\n\n nav {\n display: flex;\n align-items: center;\n justify-content: space-between;\n max-width: 1200px;\n margin: 0 auto;\n padding: 1rem 2rem;\n }\n\n .logo {\n font-size: 1.5rem;\n font-weight: bold;\n color: var(--color-primary);\n }\n\n .nav-links {\n display: flex;\n gap: 1.5rem;\n }\n\n .nav-links a {\n font-weight: 500;\n position: relative;\n }\n\n .nav-links a:focus-visible {\n outline: 2px solid var(--color-accent);\n outline-offset: 2px;\n }\n\n main {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-section);\n }\n\n .hero {\n display: grid;\n place-items: center;\n text-align: center;\n padding: var(--spacing-section) 1.5rem;\n background: linear-gradient(to bottom right, var(--color-primary), var(--color-secondary));\n color: var(--color-white);\n }\n\n .hero h1 {\n font-size: clamp(2rem, 6vw, 3rem);\n margin-bottom: 0.5rem;\n }\n\n .hero p {\n font-size: clamp(1.125rem, 2vw, 1.5rem);\n margin-bottom: 2rem;\n color: #cbd5e1;\n }\n\n .hero button {\n background-color: var(--color-accent);\n color: var(--color-secondary);\n font-size: 1rem;\n padding: 0.75rem 1.5rem;\n border: none;\n border-radius: 0.375rem;\n cursor: pointer;\n font-weight: bold;\n }\n\n .hero button:hover,\n .hero button:focus-visible {\n background-color: #eab308;\n outline: 2px solid var(--color-secondary);\n outline-offset: 2px;\n }\n\n .features {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 1.5rem;\n }\n\n .features h2 {\n text-align: center;\n font-size: clamp(1.75rem, 4vw, 2.5rem);\n margin-bottom: 3rem;\n }\n\n .feature-grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: 2rem;\n }\n\n article {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n background-color: #f8fafc;\n padding: 2rem;\n border-radius: 0.5rem;\n transition: transform 0.3s ease;\n }\n\n article img {\n width: 100%;\n border-radius: 0.375rem;\n }\n\n article h3 {\n font-size: 1.25rem;\n color: var(--color-primary);\n }\n\n article p {\n color: var(--color-muted);\n }\n\n article:focus-within,\n article:hover {\n transform: translateY(-4px);\n }\n\n footer {\n background-color: var(--color-secondary);\n color: var(--color-white);\n text-align: center;\n padding: 2rem 1.5rem;\n }\n\n footer p {\n margin: 0.5rem 0;\n font-size: 0.875rem;\n color: #cbd5e1;\n }\n\n /* Responsive Feature Grid */\n @media (min-width: 768px) {\n .feature-grid {\n grid-template-columns: repeat(2, 1fr);\n }\n }\n\n @media (min-width: 1024px) {\n .feature-grid {\n grid-template-columns: repeat(3, 1fr);\n }\n }\n\n /* Fade-in animation */\n .fade-in {\n opacity: 0;\n transform: translateY(40px);\n transition: opacity 0.6s ease, transform 0.6s ease;\n }\n\n .fade-in.visible {\n opacity: 1;\n transform: translateY(0);\n }\n </style>\n</head>\n<body>\n <header>\n <nav aria-label=\"Primary\">\n <div class=\"logo\">Momentum AI</div>\n <div class=\"nav-links\">\n <a href=\"#features\" aria-label=\"Navigate to Features section\">Features</a>\n <a href=\"#demo\" aria-label=\"Navigate to Request a Demo section\">Request a Demo</a>\n </div>\n </nav>\n </header>\n\n <main>\n <section class=\"hero fade-in\" id=\"hero\">\n <div>\n <h1>Automate Your Workflow. Unleash Your Potential.</h1>\n <p>Momentum AI streamlines your team's productivity with intelligent automation and insights.</p>\n <a href=\"#demo\" aria-label=\"Request a Demo\">\n <button type=\"button\">Request a Demo</button>\n </a>\n </div>\n </section>\n\n <section class=\"features fade-in\" id=\"features\" aria-labelledby=\"features-heading\">\n <h2 id=\"features-heading\">Key Features</h2>\n <div class=\"feature-grid\">\n <article tabindex=\"0\">\n <img src=\"https://placehold.co/600x400?text=Intelligent+Task+Routing\" alt=\"Illustration of task routing with AI funneling assignments\" />\n <h3>Intelligent Task Routing</h3>\n <p>Automatically assigns tasks to the right team member based on priority and workload, ensuring optimal productivity.</p>\n </article>\n <article tabindex=\"0\">\n <img src=\"https://placehold.co/600x400?text=Predictive+Analytics\" alt=\"Illustration of predictive analytics dashboard with graphs\" />\n <h3>Predictive Analytics</h3>\n <p>Forecast project deadlines and resource needs with 95% accuracy using real-time data-driven models.</p>\n </article>\n <article tabindex=\"0\">\n <img src=\"https://placehold.co/600x400?text=Seamless+Integration\" alt=\"Illustration showing Slack, Jira, and Asana integration flows\" />\n <h3>Seamless Integration</h3>\n <p>Connects effortlessly with over 200+ tools including Slack, Jira, and Asana to automate your existing workflows.</p>\n </article>\n </div>\n </section>\n\n <section class=\"hero fade-in\" id=\"demo\" aria-labelledby=\"demo-heading\">\n <div>\n <h2 id=\"demo-heading\">Ready to Transform Your Workflow?</h2>\n <p>Get in touch and experience Momentum AI in action.</p>\n <a href=\"#\" aria-label=\"Request a personalized demo with our team\">\n <button type=\"button\">Request a Demo</button>\n </a>\n </div>\n </section>\n </main>\n\n <footer>\n <p>© 2024 Momentum AI. All rights reserved.</p>\n <p>Empowering teams with intelligent automation.</p>\n </footer>\n\n <script>\n // Smooth Scroll (automatically handled via CSS 'scroll-behavior: smooth')\n\n // Fade-in on scroll using IntersectionObserver\n const observerOptions = {\n threshold: 0.1\n };\n\n const fadeInElements = document.querySelectorAll('.fade-in');\n\n const observer = new IntersectionObserver((entries, observer) => {\n entries.forEach(entry => {\n if(entry.isIntersecting){\n entry.target.classList.add('visible');\n // Optional: unobserve for one-time animation\n observer.unobserve(entry.target);\n }\n });\n }, observerOptions);\n\n fadeInElements.forEach(el => observer.observe(el));\n </script>\n</body>\n</html>\n```"
- },
- "timings": {
- "gpt-4.1": {
- "start_time": "2025-08-01T11:48:19.821Z",
- "end_time": "2025-08-01T11:50:16.412Z",
- "duration_ms": 116591,
- "tokens_used": 7739,
- "tokens_details": {
- "prompt_tokens": 592,
- "completion_tokens": 7147,
- "total_tokens": 7739,
- "prompt_tokens_details": {
- "cached_tokens": 0,
- "audio_tokens": 0
- },
- "completion_tokens_details": {
- "reasoning_tokens": 0,
- "audio_tokens": 0,
- "accepted_prediction_tokens": 0,
- "rejected_prediction_tokens": 0
- }
- }
- },
- "gpt-5-bench-chatcompletions-gpt41-api-ev3": {
- "start_time": "2025-08-01T11:48:19.869Z",
- "end_time": "2025-08-01T11:49:53.838Z",
- "duration_ms": 93969,
- "tokens_used": 6910,
- "tokens_details": {
- "prompt_tokens": 591,
- "completion_tokens": 6319,
- "total_tokens": 6910,
- "prompt_tokens_details": {
- "cached_tokens": 0,
- "audio_tokens": 0
- },
- "completion_tokens_details": {
- "reasoning_tokens": 0,
- "audio_tokens": 0,
- "accepted_prediction_tokens": 0,
- "rejected_prediction_tokens": 0
- }
- }
- },
- "gpt-4o": {
- "start_time": "2025-08-01T11:48:19.871Z",
- "end_time": "2025-08-01T11:48:43.047Z",
- "duration_ms": 23176,
- "tokens_used": 2012,
- "tokens_details": {
- "prompt_tokens": 592,
- "completion_tokens": 1420,
- "total_tokens": 2012,
- "prompt_tokens_details": {
- "cached_tokens": 0,
- "audio_tokens": 0
- },
- "completion_tokens_details": {
- "reasoning_tokens": 0,
- "audio_tokens": 0,
- "accepted_prediction_tokens": 0,
- "rejected_prediction_tokens": 0
- }
- }
- },
- "chatgpt-4o-latest": {
- "start_time": "2025-08-01T11:48:19.872Z",
- "end_time": "2025-08-01T11:48:39.307Z",
- "duration_ms": 19435,
- "tokens_used": 2690,
- "tokens_details": {
- "prompt_tokens": 592,
- "completion_tokens": 2098,
- "total_tokens": 2690,
- "prompt_tokens_details": {
- "cached_tokens": 0,
- "audio_tokens": 0
- },
- "completion_tokens_details": {
- "reasoning_tokens": 0,
- "audio_tokens": 0,
- "accepted_prediction_tokens": 0,
- "rejected_prediction_tokens": 0
- }
- }
- }
- },
- "errors": {},
- "metadata": {
- "total_duration_ms": 116591,
- "successful_models": 4,
- "failed_models": 0
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
