API tools faq
paste
laanaanaal

Untitled

laanaanaal
Aug 1st, 2025
304
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 23.61 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8" />
  5.   <meta name="viewport" content="width=device-width, initial-scale=1" />
  6.   <title>Momentum AI — Automate Your Workflow. Unleash Your Potential.</title>
  7.   <meta name="description" content="Momentum AI optimizes your team with intelligent task routing, predictive analytics, and seamless integrations. Request a demo today." />
  8.   <style>
  9.     /* ================================
  10.        CSS Variables and Base Styles
  11.        ================================ */
  12.     :root {
  13.       /* Color palette (WCAG AA compliant on white) */
  14.       --clr-primary-700: #1a2a6c;   /* Deep indigo (contrast on white ~9.7:1) */
  15.       --clr-primary-500: #2a4fc6;   /* Indigo-blue */
  16.       --clr-accent-500: #00a884;    /* Teal accent (on white ~4.6:1) */
  17.       --clr-neutral-900: #0f172a;   /* Slate-900 */
  18.       --clr-neutral-700: #334155;   /* Slate-700 */
  19.       --clr-neutral-600: #475569;   /* Slate-600 */
  20.       --clr-neutral-200: #e2e8f0;   /* Slate-200 */
  21.       --clr-neutral-100: #f1f5f9;   /* Slate-100 */
  22.       --clr-white: #ffffff;
  23.  
  24.       /* Typography */
  25.       --ff-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  26.       --fs-900: clamp(2rem, 5vw + 1rem, 3.75rem);  /* Hero headline */
  27.       --fs-700: clamp(1.125rem, 1.2vw + 1rem, 1.5rem);
  28.       --fs-600: clamp(1.0625rem, 0.6vw + 0.9rem, 1.25rem);
  29.       --fs-500: clamp(1rem, 0.5vw + 0.9rem, 1.125rem);
  30.       --fs-400: 1rem;
  31.  
  32.       /* Spacing */
  33.       --space-2xs: 0.25rem;
  34.       --space-xs: 0.5rem;
  35.       --space-s: 0.75rem;
  36.       --space-m: 1rem;
  37.       --space-l: 1.5rem;
  38.       --space-xl: 2rem;
  39.       --space-2xl: 3rem;
  40.       --space-3xl: 4rem;
  41.       --radius-m: 12px;
  42.  
  43.       /* Shadows */
  44.       --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.08);
  45.       --shadow-md: 0 10px 30px rgba(15, 23, 42, 0.12);
  46.     }
  47.  
  48.     /* Global resets and base */
  49.     * { box-sizing: border-box; }
  50.     html:focus-within { scroll-behavior: smooth; }
  51.     body {
  52.       margin: 0;
  53.       font-family: var(--ff-sans);
  54.       color: var(--clr-neutral-900);
  55.       background: linear-gradient(180deg, #fafcff 0%, #f6f9ff 35%, #ffffff 100%);
  56.       line-height: 1.6;
  57.       text-rendering: optimizeLegibility;
  58.     }
  59.     img { max-width: 100%; display: block; }
  60.     a { color: inherit; text-decoration: none; }
  61.     a:focus-visible, button:focus-visible { outline: 3px solid var(--clr-accent-500); outline-offset: 2px; }
  62.     /* Visually hidden utility for a11y */
  63.     .visually-hidden {
  64.       position: absolute !important;
  65.       width: 1px; height: 1px;
  66.       padding: 0; margin: -1px;
  67.       overflow: hidden; clip: rect(0 0 0 0);
  68.       white-space: nowrap; border: 0;
  69.     }
  70.  
  71.     /* ================================
  72.        Layout: Header & Navigation
  73.       ================================ */
  74.    header {
  75.      position: sticky;
  76.       top: 0;
  77.       z-index: 1000;
  78.       background: rgba(255, 255, 255, 0.85);
  79.       backdrop-filter: blur(10px);
  80.       border-bottom: 1px solid var(--clr-neutral-200);
  81.     }
  82.     .container {
  83.       width: min(1120px, 92vw);
  84.       margin-inline: auto;
  85.     }
  86.     nav {
  87.       display: flex;
  88.       align-items: center;
  89.       justify-content: space-between;
  90.       padding: var(--space-m) 0;
  91.       gap: var(--space-l);
  92.     }
  93.     .brand {
  94.       display: flex;
  95.       align-items: center;
  96.       gap: var(--space-s);
  97.       color: var(--clr-primary-700);
  98.       font-weight: 700;
  99.       letter-spacing: 0.3px;
  100.     }
  101.     .brand img {
  102.       width: 40px; height: 40px;
  103.       border-radius: 8px;
  104.       box-shadow: var(--shadow-sm);
  105.     }
  106.     .nav-links {
  107.       display: flex;
  108.       gap: clamp(0.75rem, 2vw, 2rem);
  109.       align-items: center;
  110.     }
  111.     .nav-links a {
  112.       font-size: var(--fs-500);
  113.       color: var(--clr-neutral-700);
  114.     }
  115.     .nav-links a:hover,
  116.     .nav-links a:focus-visible {
  117.       color: var(--clr-primary-500);
  118.     }
  119.     .btn {
  120.       display: inline-flex;
  121.       align-items: center;
  122.       justify-content: center;
  123.       gap: 0.5rem;
  124.       border-radius: 999px;
  125.       padding: 0.75rem 1.25rem;
  126.       font-weight: 700;
  127.       border: 2px solid transparent;
  128.       cursor: pointer;
  129.       transition: transform 0.08s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
  130.     }
  131.     .btn:active { transform: translateY(1px); }
  132.     .btn-primary {
  133.       background: var(--clr-primary-700);
  134.       color: var(--clr-white);
  135.       box-shadow: var(--shadow-sm);
  136.     }
  137.     .btn-primary:hover {
  138.       background: var(--clr-primary-500);
  139.       box-shadow: var(--shadow-md);
  140.     }
  141.     .btn-outline {
  142.       background: transparent;
  143.       color: var(--clr-primary-700);
  144.       border-color: var(--clr-primary-700);
  145.     }
  146.     .btn-outline:hover {
  147.       background: var(--clr-primary-700);
  148.       color: var(--clr-white);
  149.     }
  150.  
  151.     /* ================================
  152.        Hero Section (Flexbox)
  153.        ================================ */
  154.     .hero {
  155.       padding: clamp(2rem, 6vw, 5rem) 0 clamp(2.5rem, 8vw, 6rem);
  156.     }
  157.     .hero-inner {
  158.       display: flex;
  159.       align-items: center;
  160.       gap: clamp(1.5rem, 4vw, 3rem);
  161.       flex-wrap: wrap; /* Stack on mobile */
  162.     }
  163.     .hero-content {
  164.       flex: 1 1 420px;
  165.       min-width: 280px;
  166.     }
  167.     .hero-eyebrow {
  168.       display: inline-flex;
  169.       align-items: center;
  170.       gap: 0.5rem;
  171.       padding: 0.35rem 0.75rem;
  172.       border-radius: 999px;
  173.       background: #e7eefc;
  174.       color: var(--clr-primary-700);
  175.       font-size: 0.9rem;
  176.       font-weight: 700;
  177.       letter-spacing: 0.3px;
  178.     }
  179.     .hero h1 {
  180.       font-size: var(--fs-900);
  181.       line-height: 1.1;
  182.       margin: var(--space-m) 0 var(--space-s);
  183.       color: var(--clr-neutral-900);
  184.     }
  185.     .hero p {
  186.       font-size: var(--fs-600);
  187.       color: var(--clr-neutral-700);
  188.       margin: 0 0 var(--space-l);
  189.     }
  190.     .hero-cta {
  191.       display: flex; gap: var(--space-m); flex-wrap: wrap;
  192.     }
  193.     .hero-media {
  194.       flex: 1 1 380px;
  195.       min-width: 280px;
  196.     }
  197.     .hero-figure {
  198.       border-radius: var(--radius-m);
  199.       overflow: hidden;
  200.       box-shadow: var(--shadow-md);
  201.       border: 1px solid var(--clr-neutral-200);
  202.       background: var(--clr-white);
  203.     }
  204.  
  205.     /* ================================
  206.        Features (CSS Grid)
  207.        ================================ */
  208.     .section {
  209.       padding: clamp(2rem, 6vw, 4rem) 0;
  210.     }
  211.     .section-header {
  212.       max-width: 720px;
  213.       margin-inline: auto;
  214.       text-align: center;
  215.       margin-bottom: clamp(1.25rem, 3vw, 2rem);
  216.     }
  217.     .section h2 {
  218.       font-size: clamp(1.5rem, 2.2vw, 2.25rem);
  219.       line-height: 1.2;
  220.       margin: 0 0 var(--space-s);
  221.       color: var(--clr-neutral-900);
  222.     }
  223.     .section p.lead {
  224.       font-size: var(--fs-600);
  225.       color: var(--clr-neutral-700);
  226.       margin: 0;
  227.     }
  228.     .features-grid {
  229.       display: grid;
  230.       grid-template-columns: repeat(12, 1fr);
  231.       gap: clamp(1rem, 2.5vw, 2rem);
  232.       margin-top: clamp(1rem, 3vw, 2rem);
  233.     }
  234.     .feature-card {
  235.       grid-column: span 12;
  236.       background: var(--clr-white);
  237.       border-radius: var(--radius-m);
  238.       border: 1px solid var(--clr-neutral-200);
  239.       box-shadow: var(--shadow-sm);
  240.       padding: clamp(1rem, 3vw, 1.5rem);
  241.       display: grid;
  242.       grid-template-columns: 64px 1fr;
  243.       gap: var(--space-m);
  244.       align-items: start;
  245.     }
  246.     .feature-icon {
  247.       width: 64px; height: 64px;
  248.       border-radius: 12px;
  249.       display: grid; place-items: center;
  250.       background: #e6fbf6;
  251.       color: var(--clr-accent-500);
  252.       font-weight: 900;
  253.       border: 1px solid #bff1e6;
  254.     }
  255.     .feature-content h3 {
  256.       margin: 0 0 var(--space-xs);
  257.       font-size: var(--fs-700);
  258.       color: var(--clr-neutral-900);
  259.       line-height: 1.25;
  260.     }
  261.     .feature-content p {
  262.       margin: 0;
  263.       color: var(--clr-neutral-700);
  264.       font-size: var(--fs-500);
  265.     }
  266.  
  267.     @media (min-width: 640px) {
  268.       .feature-card { grid-column: span 6; }
  269.     }
  270.     @media (min-width: 1024px) {
  271.       .feature-card { grid-column: span 4; }
  272.     }
  273.  
  274.     /* ================================
  275.        Integrations (Responsive Grid)
  276.        ================================ */
  277.     .integrations {
  278.       background: var(--clr-neutral-100);
  279.       border-top: 1px solid var(--clr-neutral-200);
  280.       border-bottom: 1px solid var(--clr-neutral-200);
  281.     }
  282.     .logo-grid {
  283.       display: grid;
  284.       grid-template-columns: repeat(6, minmax(80px, 1fr));
  285.       gap: 1rem;
  286.       align-items: center;
  287.       justify-items: center;
  288.       margin-top: var(--space-l);
  289.     }
  290.     .logo-grid figure {
  291.       margin: 0;
  292.       width: 100%;
  293.       border-radius: 10px;
  294.       border: 1px dashed var(--clr-neutral-200);
  295.       background: var(--clr-white);
  296.       padding: var(--space-m);
  297.       display: grid;
  298.       place-items: center;
  299.       min-height: 80px;
  300.     }
  301.     @media (max-width: 1023px) {
  302.       .logo-grid { grid-template-columns: repeat(4, 1fr); }
  303.     }
  304.     @media (max-width: 639px) {
  305.       .logo-grid { grid-template-columns: repeat(2, 1fr); }
  306.     }
  307.  
  308.     /* ================================
  309.        CTA Banner
  310.        ================================ */
  311.     .cta {
  312.       background: radial-gradient(1200px 600px at 80% -10%, #d7e0ff 0%, transparent 60%), linear-gradient(180deg, #ffffff 0, #eef2ff 100%);
  313.       border-top: 1px solid var(--clr-neutral-200);
  314.     }
  315.     .cta-box {
  316.       background: var(--clr-white);
  317.       border: 1px solid var(--clr-neutral-200);
  318.       border-radius: 16px;
  319.       padding: clamp(1.25rem, 3vw, 2rem);
  320.       display: grid;
  321.       gap: var(--space-m);
  322.       align-items: center;
  323.       grid-template-columns: 1fr;
  324.       box-shadow: var(--shadow-md);
  325.     }
  326.     @media (min-width: 768px) {
  327.       .cta-box { grid-template-columns: 1.5fr auto; }
  328.     }
  329.     .cta h3 {
  330.       font-size: clamp(1.25rem, 1.6vw, 1.75rem);
  331.       margin: 0 0 var(--space-xs);
  332.       color: var(--clr-primary-700);
  333.     }
  334.     .cta p {
  335.       margin: 0;
  336.       color: var(--clr-neutral-700);
  337.       font-size: var(--fs-500);
  338.     }
  339.  
  340.     /* ================================
  341.        Footer
  342.        ================================ */
  343.     footer {
  344.       padding: var(--space-2xl) 0;
  345.       color: var(--clr-neutral-600);
  346.     }
  347.     .footer-inner {
  348.       display: grid;
  349.       grid-template-columns: 1fr;
  350.       gap: var(--space-l);
  351.       border-top: 1px solid var(--clr-neutral-200);
  352.       padding-top: var(--space-l);
  353.     }
  354.     @media (min-width: 768px) {
  355.       .footer-inner {
  356.         grid-template-columns: 1fr auto;
  357.         align-items: center;
  358.       }
  359.     }
  360.     .footer-nav {
  361.       display: flex;
  362.       flex-wrap: wrap;
  363.       gap: var(--space-m);
  364.     }
  365.     .footer-nav a {
  366.       color: var(--clr-neutral-700);
  367.       font-size: 0.95rem;
  368.     }
  369.     .footer-nav a:hover,
  370.     .footer-nav a:focus-visible {
  371.       color: var(--clr-primary-500);
  372.     }
  373.     .copyright {
  374.       font-size: 0.9rem;
  375.     }
  376.  
  377.     /* ================================
  378.        Fade-in on scroll animations
  379.        ================================ */
  380.     [data-animate] {
  381.       opacity: 0;
  382.       transform: translateY(16px);
  383.       transition: opacity 600ms ease, transform 600ms ease;
  384.       will-change: opacity, transform;
  385.     }
  386.     [data-animate].in-view {
  387.       opacity: 1;
  388.       transform: translateY(0);
  389.     }
  390.   </style>
  391. </head>
  392. <body>
  393.   <a class="visually-hidden" href="#main" aria-label="Skip to main content">Skip to main content</a>
  394.  
  395.   <header>
  396.     <div class="container">
  397.       <nav aria-label="Primary">
  398.         <a class="brand" href="#top" aria-label="Momentum AI home">
  399.           <img src="https://placehold.co/80x80/2a4fc6/ffffff?text=MAI" width="40" height="40" alt="Momentum AI logo" />
  400.           <span>Momentum AI</span>
  401.         </a>
  402.         <div class="nav-links" role="menubar" aria-label="Main navigation links">
  403.           <a role="menuitem" href="#features" aria-label="Go to features section">Features</a>
  404.           <a role="menuitem" href="#integrations" aria-label="Go to integrations section">Integrations</a>
  405.           <a role="menuitem" href="#about" aria-label="Go to about section">About</a>
  406.           <a role="menuitem" href="#contact" aria-label="Go to contact section">Contact</a>
  407.           <a class="btn btn-outline" href="#demo" aria-label="Request a demo from the navigation">Request a Demo</a>
  408.         </div>
  409.       </nav>
  410.     </div>
  411.   </header>
  412.  
  413.   <main id="main">
  414.     <!-- Hero -->
  415.     <section id="top" class="hero" aria-labelledby="hero-title">
  416.       <div class="container hero-inner">
  417.         <article class="hero-content" data-animate>
  418.           <span class="hero-eyebrow" aria-hidden="true">AI-Powered Operations</span>
  419.           <h1 id="hero-title">Automate Your Workflow. Unleash Your Potential.</h1>
  420.           <p>
  421.             Momentum AI streamlines teamwork with intelligent task routing, predictive analytics, and seamless integrations.
  422.             Work smarter, deliver faster, and focus on what matters.
  423.           </p>
  424.           <p class="hero-cta">
  425.             <a class="btn btn-primary" href="#demo" aria-label="Request a demo from hero section">Request a Demo</a>
  426.             <a class="btn btn-outline" href="#features" aria-label="Learn more about Momentum AI features">Learn More</a>
  427.           </p>
  428.         </article>
  429.         <aside class="hero-media" aria-label="Product illustration" data-animate>
  430.           <figure class="hero-figure">
  431.             <img
  432.              src="https://placehold.co/960x600/ffffff/1a2a6c?text=Dashboard+Preview"
  433.              width="960"
  434.              height="600"
  435.              alt="Momentum AI dashboard preview showing task routing and analytics"
  436.            />
  437.             <figcaption class="visually-hidden">A sample dashboard illustrating task routing and analytics charts.</figcaption>
  438.           </figure>
  439.         </aside>
  440.       </div>
  441.     </section>
  442.  
  443.     <!-- Features -->
  444.     <section id="features" class="section" aria-labelledby="features-title">
  445.       <div class="container">
  446.         <header class="section-header" data-animate>
  447.           <h2 id="features-title">What Makes Momentum AI Different</h2>
  448.           <p class="lead">Built for modern teams that need clarity, speed, and reliability.</p>
  449.         </header>
  450.  
  451.         <div class="features-grid" role="list">
  452.           <article class="feature-card" role="listitem" data-animate>
  453.             <div class="feature-icon" aria-hidden="true">↪</div>
  454.             <div class="feature-content">
  455.               <h3>Intelligent Task Routing</h3>
  456.               <p>Automatically assigns tasks to the right team member based on priority, skills, and workload—no more manual juggling.</p>
  457.             </div>
  458.           </article>
  459.  
  460.           <article class="feature-card" role="listitem" data-animate>
  461.             <div class="feature-icon" aria-hidden="true">📈</div>
  462.             <div class="feature-content">
  463.               <h3>Predictive Analytics</h3>
  464.               <p>Forecast project deadlines and resource needs with 95% accuracy so you can plan ahead with confidence.</p>
  465.             </div>
  466.           </article>
  467.  
  468.           <article class="feature-card" role="listitem" data-animate>
  469.             <div class="feature-icon" aria-hidden="true">🔗</div>
  470.             <div class="feature-content">
  471.               <h3>Seamless Integration</h3>
  472.               <p>Connect effortlessly with over 200 tools like Slack, Jira, and Asana to keep your workflows in one place.</p>
  473.             </div>
  474.           </article>
  475.         </div>
  476.       </div>
  477.     </section>
  478.  
  479.     <!-- Integrations -->
  480.     <section id="integrations" class="section integrations" aria-labelledby="integrations-title">
  481.       <div class="container">
  482.         <header class="section-header" data-animate>
  483.           <h2 id="integrations-title">Works With Your Favorite Tools</h2>
  484.           <p class="lead">Plug Momentum AI into your existing stack in minutes.</p>
  485.         </header>
  486.  
  487.         <div class="logo-grid" aria-label="Supported integrations logos">
  488.           <figure data-animate>
  489.             <img src="https://placehold.co/160x60/ffffff/2a4fc6?text=Slack" width="160" height="60" alt="Slack logo" />
  490.           </figure>
  491.           <figure data-animate>
  492.             <img src="https://placehold.co/160x60/ffffff/2a4fc6?text=Jira" width="160" height="60" alt="Jira logo" />
  493.           </figure>
  494.           <figure data-animate>
  495.             <img src="https://placehold.co/160x60/ffffff/2a4fc6?text=Asana" width="160" height="60" alt="Asana logo" />
  496.           </figure>
  497.           <figure data-animate>
  498.             <img src="https://placehold.co/160x60/ffffff/2a4fc6?text=GitHub" width="160" height="60" alt="GitHub logo" />
  499.           </figure>
  500.           <figure data-animate>
  501.             <img src="https://placehold.co/160x60/ffffff/2a4fc6?text=Notion" width="160" height="60" alt="Notion logo" />
  502.           </figure>
  503.           <figure data-animate>
  504.             <img src="https://placehold.co/160x60/ffffff/2a4fc6?text=G+Suite" width="160" height="60" alt="Google Workspace logo" />
  505.           </figure>
  506.         </div>
  507.       </div>
  508.     </section>
  509.  
  510.     <!-- About -->
  511.     <section id="about" class="section" aria-labelledby="about-title">
  512.       <div class="container">
  513.         <header class="section-header" data-animate>
  514.           <h2 id="about-title">Built for Teams, Designed for Impact</h2>
  515.           <p class="lead">We believe AI should be practical, transparent, and accessible—helping teams do their best work.</p>
  516.         </header>
  517.  
  518.         <article class="container" data-animate style="max-width: 900px;">
  519.           <p style="margin-top:0">
  520.             Momentum AI eliminates busywork so your team can focus on outcomes. From startup sprints to enterprise programs,
  521.             our platform adapts to how you work—providing real-time visibility, predictive insights, and automation where it counts.
  522.           </p>
  523.           <p>
  524.             Security and privacy are built-in: role-based access, audit trails, and data residency options keep your organization compliant.
  525.             With a human-centered approach, Momentum AI augments decision-making while keeping people in control.
  526.           </p>
  527.         </article>
  528.       </div>
  529.     </section>
  530.  
  531.     <!-- Demo CTA -->
  532.     <section id="demo" class="section cta" aria-labelledby="demo-title">
  533.       <div class="container">
  534.         <div class="cta-box" data-animate>
  535.           <div>
  536.             <h3 id="demo-title">See Momentum AI in Action</h3>
  537.             <p>Request a personalized demo tailored to your workflows and tools.</p>
  538.           </div>
  539.           <p style="margin:0;">
  540.             <a class="btn btn-primary" href="#contact" aria-label="Proceed to contact section to request a demo">Request a Demo</a>
  541.           </p>
  542.         </div>
  543.       </div>
  544.     </section>
  545.  
  546.     <!-- Contact -->
  547.     <section id="contact" class="section" aria-labelledby="contact-title">
  548.       <div class="container">
  549.         <header class="section-header" data-animate>
  550.           <h2 id="contact-title">Contact Us</h2>
  551.           <p class="lead">Tell us about your team and goals—our experts will reach out within one business day.</p>
  552.         </header>
  553.  
  554.         <!-- Simple accessible form -->
  555.         <form class="container" data-animate style="max-width: 720px;" aria-labelledby="contact-title" aria-describedby="contact-desc">
  556.           <p id="contact-desc" class="visually-hidden">All fields are required unless marked optional.</p>
  557.           <fieldset style="border:0; padding:0; margin:0; display:grid; gap:1rem;">
  558.             <label>
  559.               <span>Name</span><br />
  560.               <input aria-label="Your full name" name="name" type="text" required
  561.                     style="width:100%; padding:0.75rem 0.9rem; border:1px solid var(--clr-neutral-200); border-radius:10px; font-size:1rem;" />
  562.             </label>
  563.             <label>
  564.               <span>Email</span><br />
  565.               <input aria-label="Your email address" name="email" type="email" required
  566.                     style="width:100%; padding:0.75rem 0.9rem; border:1px solid var(--clr-neutral-200); border-radius:10px; font-size:1rem;" />
  567.             </label>
  568.             <label>
  569.               <span>Company (optional)</span><br />
  570.               <input aria-label="Your company name (optional)" name="company" type="text"
  571.                     style="width:100%; padding:0.75rem 0.9rem; border:1px solid var(--clr-neutral-200); border-radius:10px; font-size:1rem;" />
  572.             </label>
  573.             <label>
  574.               <span>How can we help?</span><br />
  575.               <textarea aria-label="Describe your needs" name="message" rows="5" required
  576.                        style="width:100%; padding:0.75rem 0.9rem; border:1px solid var(--clr-neutral-200); border-radius:10px; font-size:1rem; resize:vertical;"></textarea>
  577.             </label>
  578.             <div>
  579.               <button type="submit" class="btn btn-primary" aria-label="Submit the contact form to request a demo">Send Request</button>
  580.             </div>
  581.           </fieldset>
  582.         </form>
  583.       </div>
  584.     </section>
  585.   </main>
  586.  
  587.   <footer aria-labelledby="footer-title">
  588.     <div class="container">
  589.       <h2 id="footer-title" class="visually-hidden">Footer</h2>
  590.       <div class="footer-inner">
  591.         <p class="copyright">© <span id="year"></span> Momentum AI. All rights reserved.</p>
  592.         <nav class="footer-nav" aria-label="Footer">
  593.           <a href="#about" aria-label="About Momentum AI">About</a>
  594.           <a href="#features" aria-label="Momentum AI features">Features</a>
  595.           <a href="#integrations" aria-label="Momentum AI integrations">Integrations</a>
  596.           <a href="#contact" aria-label="Contact Momentum AI">Contact</a>
  597.           <a href="#top" aria-label="Back to top">Back to Top</a>
  598.         </nav>
  599.       </div>
  600.     </div>
  601.   </footer>
  602.  
  603.   <script>
  604.     // Smooth scroll is handled by CSS (html:focus-within -> scroll-behavior:smooth) and native browser behavior.
  605.     // Below we enhance anchor clicks to also shift focus to target for accessibility and consistent behavior.
  606.  
  607.     (function () {
  608.       // Set current year in footer
  609.       document.getElementById('year').textContent = new Date().getFullYear();
  610.  
  611.       // Enhance in-page navigation with focus management
  612.       const internalLinks = document.querySelectorAll('a[href^="#"]:not([href="#"])');
  613.       internalLinks.forEach(link => {
  614.         link.addEventListener('click', function (e) {
  615.           const id = this.getAttribute('href').slice(1);
  616.           const target = document.getElementById(id) || document.querySelector(`[name="${id}"]`);
  617.           if (target) {
  618.             e.preventDefault();
  619.             target.setAttribute('tabindex', '-1'); // make focusable if not already
  620.             target.scrollIntoView({ behavior: 'smooth', block: 'start' });
  621.             // After scroll ends, move focus for screen readers/keyboard users
  622.             setTimeout(() => {
  623.               target.focus({ preventScroll: true });
  624.               // Clean up tabindex if it wasn't there originally
  625.               if (!target.dataset.keepTabindex) {
  626.                 target.removeAttribute('tabindex');
  627.               }
  628.             }, 500);
  629.           }
  630.         });
  631.       });
  632.  
  633.       // IntersectionObserver for fade-in on scroll
  634.       const animated = document.querySelectorAll('[data-animate]');
  635.       const io = new IntersectionObserver((entries, observer) => {
  636.         entries.forEach(entry => {
  637.           if (entry.isIntersecting) {
  638.             entry.target.classList.add('in-view');
  639.             observer.unobserve(entry.target); // animate once
  640.           }
  641.         });
  642.       }, { threshold: 0.15 });
  643.  
  644.       animated.forEach(el => io.observe(el));
  645.     })();
  646.   </script>
  647. </body>
  648. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!