Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Momentum AI - Automate Your Workflow</title>
    <style>
        :root {
            --primary-color: #0047FF;
            --secondary-color: #f4f4f9;
            --text-color: #333;
            --font-family: 'Arial', sans-serif;
            --max-width: 1200px;
        }

        body, h1, h2, h3, p, a {
            margin: 0;
            padding: 0;
            line-height: 1.6;
            color: var(--text-color);
        }

        body {
            font-family: var(--font-family);
            background-color: var(--secondary-color);
        }

        header {
            background-color: var(--primary-color);
            color: #fff;
            padding: 1rem;
            text-align: center;
        }

        nav {
            display: flex;
            justify-content: center;
            margin-top: 1rem;
        }

        nav a {
            color: #fff;
            text-decoration: none;
            margin: 0 1rem;
            font-size: clamp(1rem, 1vw + 1rem, 1.25rem);
            position: relative;
        }

        nav a::after {
            content: '';
            display: block;
            width: 0;
            height: 2px;
            background: #fff;
            transition: width .3s;
            position: absolute;
            bottom: -5px;
            left: 50%;
            transform: translateX(-50%);
        }

        nav a:focus-visible::after,
        nav a:hover::after {
            width: 100%;
        }

        main {
            max-width: var(--max-width);
            margin: auto;
            padding: 2rem;
        }

        .hero {
            text-align: center;
            margin-bottom: 3rem;
        }

        .hero h1 {
            font-size: clamp(2rem, 2.5vw + 2rem, 3rem);
        }

        .hero p {
            font-size: clamp(1rem, 1.5vw + 1rem, 1.25rem);
        }

        .cta-button {
            background-color: var(--primary-color);
            color: #fff;
            padding: 1rem 2rem;
            border: none;
            border-radius: 5px;
            font-size: 1rem;
            cursor: pointer;
            margin-top: 1rem;
        }

        .cta-button:focus-visible,
        .cta-button:hover {
            background-color: #0033cc;
        }

        section {
            margin-bottom: 3rem;
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }

        section.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }

        .feature {
            background: #fff;
            padding: 1.5rem;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .feature img {
            width: 100%;
            border-radius: 5px;
        }

        footer {
            text-align: center;
            padding: 1rem;
            background-color: var(--primary-color);
            color: #fff;
        }

        @media (min-width: 768px) {
            nav {
                justify-content: flex-start;
            }
        }

    </style>
</head>
<body>
    <header>
        <h1>Momentum AI</h1>
        <p>Automate Your Workflow. Unleash Your Potential.</p>
    </header>
    <nav aria-label="Main Navigation">
        <a href="#features">Features</a>
        <a href="#demo" class="cta-button">Request a Demo</a>
    </nav>
    <main>
        <section class="hero" id="hero">
            <h2>Welcome to Momentum AI</h2>
            <p>Empowering teams with the AI-driven tools to automate workflows and harness their potential.</p>
            <button class="cta-button" aria-label="Request a Demo">Request a Demo</button>
        </section>
        <section id="features" class="features">
            <article class="feature">
                <img src="https://placehold.co/300x200" alt="Illustration of intelligent task routing">
                <h3>Intelligent Task Routing</h3>
                <p>Automatically assigns tasks to the right team member based on priority and workload.</p>
            </article>
            <article class="feature">
                <img src="https://placehold.co/300x200" alt="Graph representing predictive analytics">
                <h3>Predictive Analytics</h3>
                <p>Forecasts project deadlines and resource needs with 95% accuracy.</p>
            </article>
            <article class="feature">
                <img src="https://placehold.co/300x200" alt="Integration example with multiple tool logos">
                <h3>Seamless Integration</h3>
                <p>Connects effortlessly with over 200+ existing tools like Slack, Jira, and Asana.</p>
            </article>
        </section>
    </main>
    <footer>
        <p>© 2023 Momentum AI. All rights reserved.</p>
    </footer>
    <script>
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });

        // Utilizing IntersectionObserver for fade-in effect
        const observer = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                    observer.unobserve(entry.target);
                }
            });
        }, {threshold: 0.1});

        document.querySelectorAll('section').forEach(section => {
            observer.observe(section);
        });
    </script>
</body>
</html>