API tools faq
paste
laanaanaal

Untitled

laanaanaal
Aug 1st, 2025
32
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 25.94 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=375, initial-scale=1, maximum-scale=1, user-scalable=no">
  6.   <title>Momentum AI — Automate Your Workflow. Unleash Your Potential.</title>
  7.   <meta name="description" content="Momentum AI: Automate your workflow with intelligent task routing, predictive analytics, and seamless integration. Unleash your team's potential.">
  8.   <!-- CSS Custom Properties: Colors, Fonts, Sizes -->
  9.   <style>
  10.     :root {
  11.       --color-primary: #2071e4;
  12.       --color-primary-dark: #1451a3;
  13.       --color-secondary: #28c8c8;
  14.       --color-bg: #f8fafc;
  15.       --color-bg-alt: #ffffff;
  16.       --color-text: #172133;
  17.       --color-text-light: #48506a;
  18.       --color-accent: #f6b930;
  19.       --color-focus: #fdcf44;
  20.  
  21.       --font-display: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  22.       --font-body: 'Inter', system-ui, sans-serif;
  23.  
  24.       /* Responsive font sizes with clamp() */
  25.       --fs-h1: clamp(2.2rem, 5vw + 1rem, 4rem);
  26.       --fs-h2: clamp(1.3rem, 2vw + 1rem, 2.2rem);
  27.       --fs-h3: clamp(1.1rem, 1.6vw + .9rem, 1.35rem);
  28.       --fs-body: clamp(1rem, 1vw + .7rem, 1.15rem);
  29.       --fs-small: clamp(0.89rem, 0.5vw + .75rem, 1rem);
  30.  
  31.       /* Spacing */
  32.       --space-xs: 0.75rem;
  33.       --space-sm: 1.25rem;
  34.       --space-md: 2rem;
  35.       --space-lg: 3.5rem;
  36.       --space-xl: 5rem;
  37.  
  38.       /* Rounded corners */
  39.       --radius: 0.7rem;
  40.  
  41.       /* Shadows */
  42.       --shadow-lg: 0 4px 20px 0 rgba(32, 113, 228, 0.13);
  43.       --shadow-sm: 0 1.5px 6px 0 rgba(72, 80, 106, 0.06);
  44.     }
  45.  
  46.     html {
  47.       scroll-behavior: smooth;
  48.       background: var(--color-bg);
  49.       font-size: 16px;
  50.       box-sizing: border-box;
  51.     }
  52.     *, *::before, *::after {
  53.       box-sizing: inherit;
  54.     }
  55.     body {
  56.       margin: 0;
  57.       font-family: var(--font-body);
  58.       color: var(--color-text);
  59.       background: var(--color-bg);
  60.       min-height: 100vh;
  61.       line-height: 1.55;
  62.       -webkit-font-smoothing: antialiased;
  63.       font-size: var(--fs-body);
  64.       letter-spacing: -.005em;
  65.     }
  66.     /* Header & Navigation */
  67.    header {
  68.      background: var(--color-bg-alt);
  69.       box-shadow: var(--shadow-sm);
  70.       position: sticky;
  71.       top: 0; left: 0; right: 0;
  72.       z-index: 9000;
  73.     }
  74.     .container {
  75.       width: 100%;
  76.       max-width: 1160px;
  77.       margin: 0 auto;
  78.       padding: 0 var(--space-sm);
  79.     }
  80.     nav {
  81.       display: flex;
  82.       align-items: center;
  83.       justify-content: space-between;
  84.       min-height: 64px;
  85.       gap: var(--space-sm);
  86.     }
  87.     .logo {
  88.       display: flex;
  89.       align-items: center;
  90.       gap: 0.7em;
  91.       font-size: 1.38rem;
  92.       font-family: var(--font-display);
  93.       font-weight: 700;
  94.       color: var(--color-primary);
  95.       letter-spacing: -0.03em;
  96.       text-decoration: none;
  97.     }
  98.     .logo-mark {
  99.       background: linear-gradient(135deg, var(--color-primary), var(--color-secondary) 90%);
  100.       height: 2.25em;
  101.       width: 2.25em;
  102.       border-radius: 50%;
  103.       display: flex;
  104.       align-items: center;
  105.       justify-content: center;
  106.       color: #fff;
  107.       font-size: 1.03em;
  108.       font-weight: 800;
  109.       box-shadow: var(--shadow-sm);
  110.     }
  111.     .nav-links {
  112.       display: flex;
  113.       gap: var(--space-md);
  114.       align-items: center;
  115.     }
  116.     .nav-link {
  117.       background: none;
  118.       border: none;
  119.       padding: 0;
  120.       font-family: inherit;
  121.       font-size: 1rem;
  122.       color: var(--color-text);
  123.       text-decoration: none;
  124.       line-height: 1;
  125.       cursor: pointer;
  126.       position: relative;
  127.       font-weight: 500;
  128.       outline: none;
  129.       transition: color 0.2s;
  130.     }
  131.     .nav-link[aria-current="true"], .nav-link:hover, .nav-link:focus-visible {
  132.       color: var(--color-primary);
  133.     }
  134.     .nav-link:focus-visible {
  135.       outline: 3px solid var(--color-focus);
  136.       border-radius: 6px;
  137.       outline-offset: 1px;
  138.     }
  139.     /* Hero Section */
  140.     .hero {
  141.       display: grid;
  142.       grid-template-columns: 1fr;
  143.       align-items: center;
  144.       gap: var(--space-lg);
  145.       min-height: 75vh;
  146.       padding: var(--space-lg) 0 var(--space-xl);
  147.       background: var(--color-bg);
  148.     }
  149.     @media (min-width: 768px) {
  150.       .hero {
  151.         grid-template-columns: 1fr 1fr;
  152.         gap: var(--space-xl);
  153.         padding-top: var(--space-xl);
  154.       }
  155.     }
  156.     .hero-text {
  157.       display: flex;
  158.       flex-direction: column;
  159.       align-items: flex-start;
  160.       gap: var(--space-md);
  161.       z-index: 2;
  162.     }
  163.     .hero-title {
  164.       font-size: var(--fs-h1);
  165.       font-family: var(--font-display);
  166.       font-weight: 800;
  167.       margin: 0;
  168.       color: var(--color-text);
  169.       line-height: 1.08;
  170.       letter-spacing: -0.01em;
  171.       max-width: 660px;
  172.     }
  173.     .hero-tagline {
  174.       font-size: var(--fs-h2);
  175.       color: var(--color-primary-dark);
  176.       font-weight: 500;
  177.       margin: 0 0 var(--space-md) 0;
  178.       letter-spacing: 0.01em;
  179.       line-height: 1.19;
  180.       max-width: 520px;
  181.     }
  182.     .hero-cta {
  183.       margin-top: var(--space-sm);
  184.     }
  185.     /* CTA Button */
  186.     .btn-primary {
  187.       display: inline-block;
  188.       background: linear-gradient(90deg, var(--color-primary), var(--color-secondary) 90%);
  189.       color: #fff;
  190.       font-family: var(--font-display);
  191.       font-weight: 600;
  192.       font-size: 1.13rem;
  193.       padding: 0.85em 2.3em;
  194.       border: none;
  195.       border-radius: var(--radius);
  196.       box-shadow: var(--shadow-lg);
  197.       cursor: pointer;
  198.       transition: background 0.27s, transform 0.08s, box-shadow 0.16s;
  199.       outline: none;
  200.       text-align: center;
  201.       letter-spacing: -0.01em;
  202.       position: relative;
  203.     }
  204.     .btn-primary:active {
  205.       transform: translateY(2px) scale(0.99);
  206.       box-shadow: 0 2px 10px 0 rgba(32, 113, 228, 0.07);
  207.     }
  208.     .btn-primary:focus-visible {
  209.       outline: 3px solid var(--color-focus);
  210.       outline-offset: 3px;
  211.       box-shadow: 0 0 0 3px var(--color-focus), var(--shadow-lg);
  212.     }
  213.     .hero-image {
  214.       display: flex;
  215.       align-items: center;
  216.       justify-content: center;
  217.       z-index: 1;
  218.       min-width: 0;
  219.     }
  220.     .hero-image img {
  221.       width: 100%;
  222.       max-width: 420px;
  223.       height: auto;
  224.       border-radius: var(--radius);
  225.       box-shadow: var(--shadow-lg);
  226.       object-fit: cover;
  227.     }
  228.  
  229.     /* Features Section using CSS Grid for layout */
  230.     .features-section {
  231.       background: var(--color-bg-alt);
  232.       padding: var(--space-lg) 0;
  233.     }
  234.     .features-header {
  235.       margin: 0 auto var(--space-md) auto;
  236.       text-align: center;
  237.       max-width: 700px;
  238.     }
  239.     .features-title {
  240.       font-family: var(--font-display);
  241.       font-size: var(--fs-h2);
  242.       font-weight: 700;
  243.       color: var(--color-text);
  244.       margin-bottom: var(--space-xs);
  245.       margin-top: 0;
  246.     }
  247.     .features-text {
  248.       color: var(--color-text-light);
  249.       font-size: var(--fs-body);
  250.       margin-bottom: 0;
  251.       margin-top: 0;
  252.     }
  253.     .features-grid {
  254.       display: grid;
  255.       gap: var(--space-md) var(--space-lg);
  256.       margin-top: var(--space-md);
  257.       max-width: 1100px;
  258.       margin-left: auto;
  259.       margin-right: auto;
  260.       /* Responsive columns */
  261.       grid-template-columns: 1fr;
  262.     }
  263.     @media (min-width: 640px) {
  264.       .features-grid {
  265.         grid-template-columns: 1fr 1fr;
  266.       }
  267.     }
  268.     @media (min-width: 1024px) {
  269.       .features-grid {
  270.         grid-template-columns: 1fr 1fr 1fr;
  271.       }
  272.     }
  273.     .feature-article {
  274.       background: var(--color-bg);
  275.       border-radius: var(--radius);
  276.       box-shadow: var(--shadow-sm);
  277.       padding: var(--space-md) var(--space-sm) var(--space-sm) var(--space-sm);
  278.       display: flex;
  279.       flex-direction: column;
  280.       align-items: flex-start;
  281.       gap: var(--space-sm);
  282.       outline: none;
  283.       transition: box-shadow 0.2s, transform 0.15s;
  284.     }
  285.     .feature-article:focus-visible {
  286.       box-shadow: 0 0 0 3px var(--color-focus), var(--shadow-sm);
  287.     }
  288.     .feature-icon {
  289.       width: 54px;
  290.       height: 54px;
  291.       border-radius: 13px;
  292.       background: linear-gradient(135deg, var(--color-secondary) 45%, var(--color-primary) 99%);
  293.       display: flex;
  294.       align-items: center;
  295.       justify-content: center;
  296.       color: white;
  297.       font-size: 1.8rem;
  298.       margin-bottom: var(--space-xs);
  299.       box-shadow: 0 2px 8px 0 rgba(32,113,228,.07);
  300.       flex-shrink: 0;
  301.     }
  302.     .feature-title {
  303.       font-size: var(--fs-h3);
  304.       font-family: var(--font-display);
  305.       font-weight: 700;
  306.       margin: 0 0 .3em 0;
  307.       color: var(--color-primary-dark);
  308.     }
  309.     .feature-desc {
  310.       color: var(--color-text);
  311.       margin: 0;
  312.       font-size: var(--fs-body);
  313.       font-weight: 400;
  314.       flex: 1 0 auto;
  315.     }
  316.  
  317.     /* Integrations Section (uses flexbox for two-column layout on desktop) */
  318.     .integrations-section {
  319.       background: var(--color-bg);
  320.       padding: var(--space-lg) 0 var(--space-xl);
  321.       display: flex;
  322.       align-items: center;
  323.       justify-content: center;
  324.     }
  325.     .integrations-container {
  326.       display: flex;
  327.       flex-direction: column;
  328.       align-items: center;
  329.       gap: var(--space-md);
  330.       width: 100%;
  331.       max-width: 980px;
  332.       padding: 0 var(--space-sm);
  333.     }
  334.     @media (min-width: 850px) {
  335.       .integrations-container {
  336.         flex-direction: row;
  337.         align-items: stretch;
  338.         gap: var(--space-xl);
  339.       }
  340.       .integrations-img-col {
  341.         flex: 0 0 350px;
  342.       }
  343.       .integrations-text-col {
  344.         flex: 1 1 0%;
  345.         min-width: 0;
  346.       }
  347.     }
  348.     .integrations-img-col {
  349.       margin-bottom: var(--space-md);
  350.       display: flex;
  351.       align-items: center;
  352.       justify-content: center;
  353.       max-width: 350px;
  354.       width: 100%;
  355.     }
  356.     .integrations-img-col img {
  357.       width: 100%;
  358.       height: auto;
  359.       border-radius: var(--radius);
  360.       box-shadow: var(--shadow-lg);
  361.       object-fit: cover;
  362.     }
  363.     .integrations-text-col {
  364.       display: flex;
  365.       flex-direction: column;
  366.       justify-content: center;
  367.       gap: var(--space-xs);
  368.       max-width: 440px;
  369.     }
  370.     .integrations-title {
  371.       margin: 0 0 var(--space-xs) 0;
  372.       font-family: var(--font-display);
  373.       font-size: var(--fs-h3);
  374.       font-weight: 700;
  375.       color: var(--color-primary-dark);
  376.     }
  377.     .integrations-desc {
  378.       color: var(--color-text);
  379.       margin: 0;
  380.       font-size: var(--fs-body);
  381.       font-weight: 400;
  382.     }
  383.     .integrations-tools-logos {
  384.       display: flex;
  385.       gap: 1em;
  386.       flex-wrap: wrap;
  387.       margin-top: var(--space-xs);
  388.       align-items: center;
  389.     }
  390.     .logo-badge {
  391.       background: var(--color-bg-alt);
  392.       padding: 0.35em 0.8em;
  393.       border-radius: 22px;
  394.       box-shadow: var(--shadow-sm);
  395.       font-size: var(--fs-small);
  396.       color: var(--color-text-light);
  397.       font-weight: 500;
  398.       display: flex;
  399.       align-items: center;
  400.       gap: 0.5em;
  401.     }
  402.     /* Footer */
  403.     footer {
  404.       background: var(--color-bg-alt);
  405.       border-top: 1px solid #ecf0f8;
  406.       padding: var(--space-md) 0;
  407.       margin-top: var(--space-md);
  408.     }
  409.     .footer-content {
  410.       max-width: 1160px;
  411.       margin: 0 auto;
  412.       text-align: center;
  413.       color: var(--color-text-light);
  414.       font-size: var(--fs-small);
  415.       display: flex;
  416.       justify-content: center;
  417.       align-items: center;
  418.       flex-wrap: wrap;
  419.       gap: 0.6em;
  420.     }
  421.     .footer-link {
  422.       color: var(--color-primary);
  423.       text-decoration: underline;
  424.       font-weight: 500;
  425.       font-size: inherit;
  426.       outline: none;
  427.       border-radius: 4px;
  428.       padding: .1em .3em;
  429.       transition: background 0.1s, color 0.13s;
  430.     }
  431.     .footer-link:focus-visible {
  432.       outline: 2.5px solid var(--color-focus);
  433.       background: var(--color-focus);
  434.       color: var(--color-text);
  435.     }
  436.     /* Fade-in-on-scroll effect base styles */
  437.     .fade-section {
  438.       opacity: 0;
  439.       transform: translateY(22px) scale(0.98);
  440.       transition: opacity 0.7s cubic-bezier(.7,.23,.35,1), transform 0.7s cubic-bezier(.7,.23,.35,1);
  441.       will-change: opacity, transform;
  442.     }
  443.     .fade-section.inview {
  444.       opacity: 1 !important;
  445.       transform: none !important;
  446.     }
  447.  
  448.     /* Focus visible debugging if Tab is pressed */
  449.     :focus-visible {
  450.       /* provides clear focus indication on any element, overridden as needed */
  451.       outline: 2px solid var(--color-focus);
  452.       outline-offset: 2px;
  453.     }
  454.  
  455.     /* Responsive Typography/Spacing Adjustments */
  456.     @media (max-width: 480px) {
  457.       .nav-links {
  458.         gap: var(--space-sm);
  459.       }
  460.       .container {
  461.         padding-left: .5em;
  462.         padding-right: .5em;
  463.       }
  464.     }
  465.  
  466.     /* Hide skip link until focused */
  467.     .skip-link {
  468.       position: absolute;
  469.       top: -40px; left: 0;
  470.       background: var(--color-focus);
  471.       color: var(--color-text);
  472.       padding: .7em 1.1em;
  473.       z-index: 9999;
  474.       border-radius: 0 0 9px 0;
  475.       font-weight: 600;
  476.       text-decoration: none;
  477.       outline: none;
  478.       transition: top 0.19s;
  479.     }
  480.     .skip-link:focus {
  481.       top: 0;
  482.       outline: 3px solid var(--color-primary);
  483.     }
  484.  
  485.     /* Tablet & Above: Take advantage of grid and larger spacing */
  486.    @media (min-width: 768px) {
  487.      .container {
  488.        padding: 0 var(--space-md);
  489.       }
  490.       .features-section {
  491.         padding: var(--space-xl) 0;
  492.       }
  493.       .features-header {
  494.         margin-bottom: var(--space-lg);
  495.       }
  496.       .integrations-section {
  497.         padding-top: var(--space-xl);
  498.         padding-bottom: var(--space-xl);
  499.       }
  500.     }
  501.     /* Desktop: extra-wide paddings */
  502.     @media (min-width: 1200px) {
  503.       .container {
  504.         padding: 0;
  505.       }
  506.     }
  507.   </style>
  508. </head>
  509. <body>
  510.   <!-- Skip to main content link for accessibility -->
  511.   <a href="#main-content" class="skip-link">Skip to main content</a>
  512.  
  513.   <!-- HEADER & NAVIGATION -->
  514.   <header>
  515.     <nav class="container" aria-label="Main navigation">
  516.       <a href="/" class="logo" aria-label="Momentum AI homepage">
  517.         <span class="logo-mark" aria-hidden="true">M</span> Momentum&nbsp;AI
  518.       </a>
  519.       <ul class="nav-links" role="menubar">
  520.         <li role="none">
  521.           <a class="nav-link" href="#features" aria-label="Show Features section" role="menuitem">Features</a>
  522.         </li>
  523.         <li role="none">
  524.           <a class="nav-link" href="#integrations" aria-label="Show Integrations section" role="menuitem">Integrations</a>
  525.         </li>
  526.         <li role="none">
  527.           <a class="nav-link" href="#request-demo" aria-label="Request a demo" role="menuitem">Request a Demo</a>
  528.         </li>
  529.       </ul>
  530.     </nav>
  531.   </header>
  532.  
  533.   <!-- MAIN CONTENT -->
  534.   <main id="main-content" tabindex="-1">
  535.     <!-- HERO SECTION -->
  536.     <section class="hero fade-section" aria-label="Welcome to Momentum AI">
  537.       <div class="hero-text">
  538.         <h1 class="hero-title">Momentum AI</h1>
  539.         <p class="hero-tagline">Automate Your Workflow. Unleash Your Potential.</p>
  540.         <a href="#request-demo" class="btn-primary hero-cta"
  541.           aria-label="Request a demo of Momentum AI">Request a Demo</a>
  542.       </div>
  543.       <div class="hero-image" aria-hidden="true">
  544.         <img
  545.          src="https://placehold.co/420x330/2071e4/fff?text=AI+Dashboard"
  546.          alt="Illustration showing an AI workflow dashboard visualization"
  547.          width="420" height="330"
  548.        />
  549.       </div>
  550.     </section>
  551.  
  552.     <!-- FEATURES SECTION -->
  553.     <section id="features" class="features-section fade-section" aria-label="Key Features">
  554.       <header class="features-header">
  555.         <h2 class="features-title">Key Features</h2>
  556.         <p class="features-text">Make your team unstoppable with AI-driven automation and deep project foresight.</p>
  557.       </header>
  558.       <div class="features-grid">
  559.         <article class="feature-article" tabindex="0">
  560.           <span class="feature-icon" aria-hidden="true">
  561.             <!-- Task Routing Icon (Direction Arrows) SVG -->
  562.             <svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true" focusable="false">
  563.               <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"/>
  564.               <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"/>
  565.             </svg>
  566.           </span>
  567.           <h3 class="feature-title">Intelligent Task Routing</h3>
  568.           <p class="feature-desc">
  569.             Automatically assigns tasks to the right team member based on priority and real-time workload. Increase efficiency without the micromanagement.
  570.           </p>
  571.         </article>
  572.         <article class="feature-article" tabindex="0">
  573.           <span class="feature-icon" aria-hidden="true">
  574.             <!-- Analytics Icon (Chart) SVG -->
  575.             <svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true" focusable="false">
  576.               <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"/>
  577.               <circle fill="currentColor" cx="19" cy="11" r="2"/>
  578.             </svg>
  579.           </span>
  580.           <h3 class="feature-title">Predictive Analytics</h3>
  581.           <p class="feature-desc">
  582.             Forecast project deadlines and resource needs with 95% accuracy, using machine learning trained on thousands of team projects.
  583.           </p>
  584.         </article>
  585.         <article class="feature-article" tabindex="0">
  586.           <span class="feature-icon" aria-hidden="true">
  587.             <!-- Integration Link Icon (Chain) SVG -->
  588.             <svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true" focusable="false">
  589.               <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"/>
  590.             </svg>
  591.           </span>
  592.           <h3 class="feature-title">Seamless Integration</h3>
  593.           <p class="feature-desc">
  594.             Connect effortlessly with over 200+ tools like Slack, Jira, Asana, Trello, Microsoft Teams, and more—all in one unified workspace.
  595.           </p>
  596.         </article>
  597.       </div>
  598.     </section>
  599.  
  600.     <!-- INTEGRATIONS SECTION -->
  601.     <section id="integrations" class="integrations-section fade-section" aria-label="Integrations Overview">
  602.       <div class="integrations-container">
  603.         <div class="integrations-img-col" aria-hidden="true">
  604.           <img
  605.            src="https://placehold.co/350x270/28c8c8/fff?text=App+Integrations"
  606.            alt="Collage showing app and service integrations"
  607.            width="350" height="270"
  608.          />
  609.         </div>
  610.         <div class="integrations-text-col">
  611.           <h2 class="integrations-title">Seamless Connections</h2>
  612.           <p class="integrations-desc">
  613.             Integrate with your favorite tools in just a few clicks—Momentum AI connects to 200+ major platforms without the hassle.
  614.           </p>
  615.           <div class="integrations-tools-logos" aria-label="Popular Integrations">
  616.             <span class="logo-badge">
  617.               <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;">
  618.               Slack
  619.             </span>
  620.             <span class="logo-badge">
  621.               <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;">
  622.               Jira
  623.             </span>
  624.             <span class="logo-badge">
  625.               <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;">
  626.               Asana
  627.             </span>
  628.             <span class="logo-badge">
  629.               <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;">
  630.               Trello
  631.             </span>
  632.             <span class="logo-badge">
  633.               <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;">
  634.               MS Teams
  635.             </span>
  636.           </div>
  637.         </div>
  638.       </div>
  639.     </section>
  640.  
  641.     <!-- CALL-TO-ACTION / REQUEST DEMO SECTION -->
  642.     <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);">
  643.       <div class="container" style="display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-md);">
  644.         <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>
  645.         <p style="color: var(--color-text-light); max-width: 500px; margin: 0 auto; font-size: var(--fs-body);">
  646.           Get a personalized demo, tailored to your workflow. See how Momentum AI can automate your operations and empower your team.
  647.         </p>
  648.         <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;">
  649.           <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>
  650.           <input
  651.            type="email"
  652.            id="email"
  653.            name="email"
  654.            inputmode="email"
  655.            required
  656.            autocomplete="email"
  657.            placeholder="[email protected]"
  658.            aria-label="Enter your work email"
  659.            style="
  660.              width: 100%;
  661.              padding: .87em 1.15em;
  662.              border: 1.5px solid #c3d5ef;
  663.              border-radius: var(--radius);
  664.              font-family: inherit;
  665.              font-size: 1.09rem;
  666.              outline: none;
  667.              margin-bottom: var(--space-sm);
  668.              background: #fff;
  669.              color: var(--color-text);
  670.              box-shadow: var(--shadow-sm);
  671.              transition: border 0.19s;
  672.            "
  673.            onfocus="this.style.borderColor='var(--color-primary)';"
  674.            onblur="this.style.borderColor='#c3d5ef';"
  675.          >
  676.           <button
  677.            type="submit"
  678.            class="btn-primary"
  679.            aria-label="Request a demo"
  680.            style="width:100%;margin-top:.4em;"
  681.          >
  682.             Request a Demo
  683.           </button>
  684.         </form>
  685.       </div>
  686.     </section>
  687.   </main>
  688.  
  689.   <!-- FOOTER -->
  690.   <footer>
  691.     <div class="footer-content">
  692.       &copy; <span id="copyright-year">2024</span> Momentum AI.
  693.       <span aria-hidden="true">•</span>
  694.       <a href="#request-demo" class="footer-link" aria-label="Request a demo in footer">Request a Demo</a>
  695.       <span aria-hidden="true">•</span>
  696.       <a href="#main-content" class="footer-link" aria-label="Back to top">Back to Top</a>
  697.     </div>
  698.   </footer>
  699.  
  700.   <!-- JavaScript: Smooth scroll for nav links & fade-in-on-scroll effect -->
  701.   <script>
  702.     // --- CURRENT YEAR for copyright (accessibility: not strictly required, but nice UX)
  703.     document.getElementById('copyright-year').textContent = new Date().getFullYear();
  704.  
  705.     // --- Smooth scrolling for internal navigation links ---
  706.     // Only for on-page anchor links starting with '#'
  707.     document.querySelectorAll('a.nav-link, .footer-link, .btn-primary.hero-cta').forEach(function(link) {
  708.       link.addEventListener('click', function(e) {
  709.         var href = link.getAttribute('href');
  710.         if(href && href.startsWith('#')) {
  711.          var target = document.getElementById(href.substring(1));
  712.           if(target) {
  713.             e.preventDefault();
  714.             target.scrollIntoView({behavior: 'smooth', block: 'start'});
  715.             // Move keyboard focus to target section for accessibility
  716.             if(target.tabIndex !== 0) target.setAttribute('tabindex', '-1');
  717.             target.focus({preventScroll:true});
  718.           }
  719.         }
  720.       });
  721.     });
  722.  
  723.     // --- Fade-in-on-scroll effect for main sections ---
  724.     // Uses IntersectionObserver for efficiency
  725.     // Adds the .inview class to fade-section when at least 20% visible
  726.     (function() {
  727.       var fadeSections = Array.prototype.slice.call(document.querySelectorAll('.fade-section'));
  728.       if(!('IntersectionObserver' in window)) {
  729.         // Fallback: just show all
  730.         fadeSections.forEach(function(sec){ sec.classList.add('inview'); });
  731.         return;
  732.       }
  733.       var observer = new window.IntersectionObserver(function(entries) {
  734.         entries.forEach(function(entry) {
  735.           if(entry.isIntersecting) {
  736.             entry.target.classList.add('inview');
  737.             // Only animate once
  738.             observer.unobserve(entry.target);
  739.           }
  740.         });
  741.       }, { threshold: 0.2 });
  742.       fadeSections.forEach(function(sec){
  743.         observer.observe(sec);
  744.       });
  745.     })();
  746.  
  747.     // --- Ensure skip link focus works in all browsers (tabindex on main set appropriately) ---
  748.     // Already done by adding tabindex="-1" to #main-content
  749.  
  750.     // --- Prevent form submission for the demo (non-functional placeholder) ---
  751.     document.querySelector('form[aria-label="Request a demo form"]').addEventListener('submit', function(e) {
  752.       e.preventDefault();
  753.       var email = this.elements['email'].value;
  754.       if(email) {
  755.         alert('Thank you! We will reach out soon at ' + email + ' 🎉');
  756.         this.reset();
  757.       }
  758.     });
  759.   </script>
  760. </body>
  761. </html>
  762. ```
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!