| <!DOCTYPE html> |
| <html lang="en" class="h-full scroll-smooth"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <title>ProductName — Build, Launch, Scale</title> |
| <meta name="description" content="ProductName helps teams build, launch, and scale faster with powerful integrations, robust APIs, and enterprise-grade security." /> |
| <meta property="og:title" content="ProductName — Build, Launch, Scale" /> |
| <meta property="og:description" content="Powerful integrations, robust APIs, and enterprise-grade security." /> |
| <meta property="og:type" content="website" /> |
| <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%233B82F6' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 3l8.66 5v8l-8.66 5L3.34 16V8L12 3z'/%3E%3C/svg%3E" /> |
| <link rel="stylesheet" href="style.css" /> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script> |
| tailwind.config = { |
| darkMode: 'class', |
| theme: { |
| extend: { |
| fontFamily: { |
| sans: ['ui-sans-serif', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', 'Apple Color Emoji', 'Segoe UI Emoji'] |
| }, |
| boxShadow: { |
| soft: '0 10px 30px rgba(2, 6, 23, 0.08)' |
| }, |
| animation: { |
| fadeUp: 'fadeUp .6s ease-out forwards', |
| float: 'float 6s ease-in-out infinite' |
| }, |
| keyframes: { |
| fadeUp: { |
| '0%': { opacity: 0, transform: 'translateY(10px)' }, |
| '100%': { opacity: 1, transform: 'translateY(0)' } |
| }, |
| float: { |
| '0%, 100%': { transform: 'translateY(0)' }, |
| '50%': { transform: 'translateY(-6px)' } |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| </head> |
| <body class="min-h-full bg-white text-slate-800 antialiased dark:bg-slate-950 dark:text-slate-100"> |
| |
| <header class="sticky top-0 z-50 w-full border-b border-slate-200/60 bg-white/80 backdrop-blur dark:border-slate-800 dark:bg-slate-950/80"> |
| <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> |
| <div class="flex h-16 items-center justify-between"> |
| <a href="#" class="flex items-center gap-3"> |
| <span class="inline-flex h-8 w-8 items-center justify-center rounded bg-blue-500 text-white shadow-soft"> |
| <i data-feather="cpu"></i> |
| </span> |
| <span class="text-lg font-semibold tracking-tight">ProductName</span> |
| </a> |
| <nav class="hidden items-center gap-8 md:flex"> |
| <a href="#features" class="text-sm font-medium text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white">Features</a> |
| <a href="#pricing" class="text-sm font-medium text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white">Pricing</a> |
| <a href="#integrations" class="text-sm font-medium text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white">Integrations</a> |
| <a href="#use-cases" class="text-sm font-medium text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white">Use Cases</a> |
| <a href="#security" class="text-sm font-medium text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white">Security</a> |
| <a href="#customers" class="text-sm font-medium text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white">Customers</a> |
| </nav> |
| <div class="flex items-center gap-3"> |
| <button id="themeToggle" class="rounded-full p-2 text-slate-600 hover:bg-slate-100 hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:text-slate-300 dark:hover:bg-slate-800" aria-label="Toggle theme"> |
| <i data-feather="moon" class="h-5 w-5"></i> |
| </button> |
| <a href="#api" class="hidden text-sm font-semibold text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 sm:inline">API Docs</a> |
| <a href="javascript:void(0)" id="openSignupTop" class="inline-flex items-center gap-2 rounded-md bg-blue-500 px-4 py-2 text-sm font-semibold text-white shadow hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <i data-feather="play"></i> |
| Start Free Trial |
| </a> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| <main> |
| |
| <section class="relative isolate overflow-hidden"> |
| <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pt-16 pb-12 md:pt-24 md:pb-16"> |
| <div class="grid items-center gap-10 md:grid-cols-2"> |
| <div class="space-y-6 animate-fadeUp"> |
| <span class="inline-flex items-center gap-2 rounded-full border border-blue-200 bg-blue-50 px-3 py-1 text-xs font-semibold text-blue-700 dark:border-blue-900/50 dark:bg-blue-900/30 dark:text-blue-300"> |
| <span class="inline-flex h-2 w-2 rounded-full bg-blue-500"></span> |
| New: Webhooks + OAuth 2.1 |
| </span> |
| <h1 class="text-4xl font-bold tracking-tight sm:text-5xl"> |
| Build, launch, and scale faster with ProductName |
| </h1> |
| <p class="text-lg text-slate-600 dark:text-slate-300"> |
| A unified platform for integrations, automation, and analytics. Ship features in minutes—not weeks—with an API that scales and security you can trust. |
| </p> |
| <div class="flex flex-col gap-3 sm:flex-row"> |
| <a href="javascript:void(0)" id="openSignupHero" class="inline-flex items-center justify-center gap-2 rounded-md bg-blue-500 px-6 py-3 text-sm font-semibold text-white shadow hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <i data-feather="zap"></i> |
| Start your free trial |
| </a> |
| <a href="#demo" class="inline-flex items-center justify-center gap-2 rounded-md border border-slate-300 bg-white px-6 py-3 text-sm font-semibold text-slate-800 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"> |
| <i data-feather="video"></i> |
| Watch demo |
| </a> |
| </div> |
| <div class="flex items-center gap-4 pt-2 text-sm text-slate-500"> |
| <div class="flex items-center gap-2"> |
| <i data-feather="check-circle" class="h-4 w-4 text-green-500"></i> |
| No credit card required |
| </div> |
| <div class="hidden sm:flex items-center gap-2"> |
| <i data-feather="shield" class="h-4 w-4 text-emerald-500"></i> |
| SOC 2 & GDPR ready |
| </div> |
| </div> |
| </div> |
| <div id="demo" class="relative"> |
| <div class="aspect-video overflow-hidden rounded-xl border border-slate-200 bg-slate-900 shadow-2xl ring-1 ring-black/5 dark:border-slate-800"> |
| <video id="heroVideo" class="h-full w-full" controls poster=""> |
| <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" /> |
| Your browser does not support the video tag. |
| </video> |
| </div> |
| <div class="pointer-events-none absolute -left-8 -top-8 hidden h-24 w-24 rounded-full bg-indigo-500/20 blur-xl lg:block"></div> |
| <div class="pointer-events-none absolute -bottom-10 -right-8 hidden h-28 w-28 rounded-full bg-blue-500/20 blur-xl lg:block"></div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="integrations" class="border-y border-slate-200 bg-slate-50 py-10 dark:border-slate-800 dark:bg-slate-950"> |
| <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> |
| <p class="text-center text-sm text-slate-500">Trusted by teams that integrate with</p> |
| <div class="mx-auto mt-6 grid max-w-4xl grid-cols-2 items-center gap-8 sm:grid-cols-3 md:grid-cols-6"> |
| |
| <div class="flex items-center justify-center"> |
| <svg role="img" aria-label="Slack" class="h-8 w-8 text-slate-500" viewBox="0 0 24 24" fill="currentColor"><path d="M6.72 2.704a1.5 1.5 0 0 1 2.122 0l.53.53a1.5 1.5 0 0 0 2.121 0l.53-.53a1.5 1.5 0 0 1 2.121 0l.53.53a1.5 1.5 0 0 0 2.121 0l.53-.53a1.5 1.5 0 0 1 2.121 0l.53.53a1.5 1.5 0 0 0 2.121 0l.53-.53v4.243a1.5 1.5 0 0 0 1.5 1.5H24a1.5 1.5 0 0 0 1.5-1.5V7.05a1.5 1.5 0 0 0-2.121 0l-.53.53a1.5 1.5 0 0 1-2.121 0l-.53-.53a1.5 1.5 0 0 0-2.121 0l-.53.53a1.5 1.5 0 0 1-2.121 0l-.53-.53a1.5 1.5 0 0 0-2.121 0l-.53.53a1.5 1.5 0 0 1-2.121 0l-.53-.53a1.5 1.5 0 0 0-2.121 0l-.53.53V2.704a1.5 1.5 0 0 0-1.5-1.5h-4.243a1.5 1.5 0 0 0-1.5 1.5v.53zM24 14.707V24a1.5 1.5 0 0 1-1.5 1.5h-4.243a1.5 1.5 0 0 0-1.5 1.5v.53a1.5 1.5 0 0 1-2.121 0l-.53-.53a1.5 1.5 0 0 0-2.121 0l-.53.53a1.5 1.5 0 0 1-2.121 0l-.53-.53a1.5 1.5 0 0 0-2.121 0l-.53.53a1.5 1.5 0 0 1-2.121 0l-.53-.53a1.5 1.5 0 0 0-2.121 0l-.53.53V22.5A1.5 1.5 0 0 1 0 21H1.5A1.5 1.5 0 0 0 3 19.5V14.707a1.5 1.5 0 0 1 2.121 0l.53-.53a1.5 1.5 0 0 0 2.121 0l.53.53a1.5 1.5 0 0 1 2.121 0l.53-.53a1.5 1.5 0 0 0 2.121 0l.53.53a1.5 1.5 0 0 1 2.121 0l.53-.53a1.5 1.5 0 0 0 2.121 0l.53.53a1.5 1.5 0 0 1 2.121 0l.53-.53a1.5 1.5 0 0 0 2.121 0l.53.53V19.5A1.5 1.5 0 0 0 22.5 21H24a1.5 1.5 0 0 1 0-3z"/></svg> |
| </div> |
| |
| <div class="flex items-center justify-center"> |
| <svg role="img" aria-label="GitHub" class="h-8 w-8 text-slate-500" viewBox="0 0 24 24" fill="currentColor"><path d="M12 .5a12 12 0 0 0-3.79 23.39c.6.11.82-.26.82-.57v-2.02c-3.34.73-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.1-.76.08-.75.08-.75 1.22.09 1.86 1.25 1.86 1.25 1.08 1.85 2.83 1.32 3.52 1.01.11-.79.42-1.32.76-1.62-2.67-.3-5.48-1.34-5.48-5.95 0-1.31.47-2.38 1.25-3.22-.13-.31-.54-1.56.12-3.25 0 0 1.01-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.29-1.55 3.3-1.23 3.3-1.23.66 1.69.25 2.94.12 3.25.77.84 1.24 1.9 1.24 3.22 0 4.62-2.81 5.65-5.49 5.94.43.37.81 1.1.81 2.22v3.29c0 .32.21.7.82.58A12 12 0 0 0 12 .5z"/></svg> |
| </div> |
| |
| <div class="flex items-center justify-center"> |
| <svg role="img" aria-label="Stripe" class="h-8 w-8 text-slate-500" viewBox="0 0 24 24" fill="currentColor"><path d="M12.89 5.04a9.77 9.77 0 0 1 2.28.3l.44.12.13.44a9.94 9.94 0 0 1-3.63 7.6l-.17.16-.17.17a9.96 9.96 0 0 1-3.55 2.05l-.46.16-.14.47c1.45.44 3.05.66 4.74.66 1.47 0 2.9-.14 4.26-.42l.34-.07.15-.5c.17-.58.33-1.18.47-1.8l.24-.99.1-.47c.86-3.9 1.22-8.02 1.07-12.2l-.04-.92-.18-.5a9.7 9.7 0 0 1-.44-1.87l-.18-.62-.56.05a9.8 9.8 0 0 1-2.38.31c-.44 0-.87-.03-1.3-.1l-.59-.1-.23-.6c-.28-.74-.6-1.46-.95-2.15l-.18-.34-.45.17a9.87 9.87 0 0 1-2.7 3.3l-.23.2-.27.22a9.94 9.94 0 0 1-3.86 2.04l-.5.16-.16.53c1.37.43 2.88.64 4.48.64l.58-.03c.52-.08 1.04-.2 1.55-.36l.8-.25.22-.58c.37-1 1.04-2.04 2-3.07l.27-.28.2-.23c.34-.39.65-.8.94-1.22l.44-.64-.44.07a9.85 9.85 0 0 1-1.62.22c-.35 0-.69-.02-1.02-.07l-.52-.07-.16-.56c-.4-1.38-.9-2.72-1.5-4l-.17-.37-.5.18a9.88 9.88 0 0 1-2.7 3.29l-.23.2-.27.22a9.94 9.94 0 0 1-3.86 2.04l-.5.16-.16.53c1.37.43 2.88.64 4.48.64.4 0 .79-.02 1.18-.06l.61-.07.18-.54c.27-.8.59-1.57.96-2.32l.48-.95.01-.47c.18-1.02.36-2.03.54-3.03l.18-.95.07-.47c.4-2.21.75-4.5 1.03-6.85l.04-.4.33-.4c.34-.4.7-.78 1.08-1.12l.26-.23.35-.28a9.8 9.8 0 0 1 2.66-1.76l.47-.21.16-.49z"/></svg> |
| </div> |
| |
| <div class="flex items-center justify-center"> |
| <svg role="img" aria-label="AWS" class="h-8 w-8 text-slate-500" viewBox="0 0 24 24" fill="currentColor"><path d="M6.763 17.086 2.52 18.5l.776-3.29-2.61 1.517 3.17-.184-.776 3.29 2.683-1.74zM21.48 18.5l-4.243-1.414-.776-3.29 2.61 1.517-3.17-.184.776 3.29 2.683-1.74zM16.5 4.77l-1.414-4.243L13.5.03l-1.586 4.243L10.5 3.67l3.17-.184-1.414 4.243L14.5 6.63zM8.5 4.77l-1.414-4.243L5.5.03l-1.586 4.243L2.5 3.67l3.17-.184L4.257 7.73 6.5 6.63z"/></svg> |
| </div> |
| |
| <div class="flex items-center justify-center"> |
| <svg role="img" aria-label="Shopify" class="h-8 w-8 text-slate-500" viewBox="0 0 24 24" fill="currentColor"><path d="M12.06 2.25c-.53 0-.98.44-.99.98 0 .07.01.13.01.2-.34-.04-.68-.06-1.03-.06-.35 0-.7.02-1.04.06.01-.07.01-.13.01-.2 0-.54-.46-.98-.99-.98-.53 0-.98.44-.99.98 0 .07.01.13.01.2-.34-.04-.68-.06-1.03-.06-.35 0-.7.02-1.04.06.01-.07.01-.13.01-.2 0-.54-.46-.98-.99-.98-.53 0-.98.44-.99.98 0 .07.01.13.01.2C3.5 7.15 2.5 9.6 2.5 12.25c0 3.2 1.9 5.9 4.8 7.25.34.16.74.16 1.09 0 2.9-1.35 4.8-4.05 4.8-7.25 0-2.65-1-5.1-2.59-7.09.01-.07.01-.13.01-.2 0-.54-.46-.98-.99-.98zM8.64 5.7c.11 0 .2.09.2.2v8.8c0 .11-.09.2-.2.2s-.2-.09-.2-.2v-8.8c0-.11.09-.2.2-.2zm6.72 0c.11 0 .2.09.2.2v8.8c0 .11-.09.2-.2.2s-.2-.09-.2-.2v-8.8c0-.11.09-.2.2-.2z"/></svg> |
| </div> |
| |
| <div class="flex items-center justify-center"> |
| <svg role="img" aria-label="Zapier" class="h-8 w-8 text-slate-500" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2a1 1 0 0 1 .92.61l2.78 6.92h6.76a1 1 0 0 1 0 2h-5.73l1.09 2.72a1 1 0 0 1-1.88.7l-1.2-3H9.18l-1.2 3a1 1 0 0 1-1.88-.7L7.1 11.53H2.54a1 1 0 0 1 0-2h6.7L8.56 2.61A1 1 0 0 1 9.48 2h2.52z"/></svg> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="features" class="py-16 sm:py-20"> |
| <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> |
| <div class="mx-auto max-w-3xl text-center"> |
| <h2 class="text-3xl font-semibold sm:text-4xl">Everything you need to go from idea to impact</h2> |
| <p class="mt-3 text-slate-600 dark:text-slate-300">Plug into the tools you already use. Automate repeatable work. Measure outcomes in real time.</p> |
| </div> |
| <div class="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3"> |
| |
| <div class="rounded-xl border border-slate-200 p-6 shadow-sm hover:shadow-soft dark:border-slate-800"> |
| <div class="flex items-center gap-3"> |
| <span class="rounded-md bg-blue-500/10 p-2 text-blue-600 dark:text-blue-400"> |
| <i data-feather="layers"></i> |
| </span> |
| <h3 class="font-semibold">100+ Integrations</h3> |
| </div> |
| <p class="mt-3 text-sm text-slate-600 dark:text-slate-300">Native connectors for Slack, GitHub, Stripe, AWS, Shopify, and more.</p> |
| </div> |
| <div class="rounded-xl border border-slate-200 p-6 shadow-sm hover:shadow-soft dark:border-slate-800"> |
| <div class="flex items-center gap-3"> |
| <span class="rounded-md bg-indigo-500/10 p-2 text-indigo-600 dark:text-indigo-400"> |
| <i data-feather="cpu"></i> |
| </span> |
| <h3 class="font-semibold">Powerful API</h3> |
| </div> |
| <p class="mt-3 text-sm text-slate-600 dark:text-slate-300">REST + Webhooks, OAuth 2.1, rate limiting, and granular scopes.</p> |
| </div> |
| <div class="rounded-xl border border-slate-200 p-6 shadow-sm hover:shadow-soft dark:border-slate-800"> |
| <div class="flex items-center gap-3"> |
| <span class="rounded-md bg-emerald-500/10 p-2 text-emerald-600"> |
| <i data-feather="zap"></i> |
| </span> |
| <h3 class="font-semibold">No-code Automations</h3> |
| </div> |
| <p class="mt-3 text-sm text-slate-600 dark:text-slate-300">Drag-and-drop workflows with triggers, conditions, and retries.</p> |
| </div> |
| <div class="rounded-xl border border-slate-200 p-6 shadow-sm hover:shadow-soft dark:border-slate-800"> |
| <div class="flex items-center gap-3"> |
| <span class="rounded-md bg-amber-500/10 p-2 text-amber-600"> |
| <i data-feather="bar-chart-2"></i> |
| </span> |
| <h3 class="font-semibold">Realtime Analytics</h3> |
| </div> |
| <p class="mt-3 text-sm text-slate-600 dark:text-slate-300">Measure conversion, latency, and cost savings in live dashboards.</p> |
| </div> |
| <div class="rounded-xl border border-slate-200 p-6 shadow-sm hover:shadow-soft dark:border-slate-800"> |
| <div class="flex items-center gap-3"> |
| <span class="rounded-md bg-rose-500/10 p-2 text-rose-600"> |
| <i data-feather="shield"></i> |
| </span> |
| <h3 class="font-semibold">Enterprise Security</h3> |
| </div> |
| <p class="mt-3 text-sm text-slate-600 dark:text-slate-300">SSO/SAML, SCIM, audit logs, and data residency options.</p> |
| </div> |
| <div class="rounded-xl border border-slate-200 p-6 shadow-sm hover:shadow-soft dark:border-slate-800"> |
| <div class="flex items-center gap-3"> |
| <span class="rounded-md bg-sky-500/10 p-2 text-sky-600"> |
| <i data-feather="users"></i> |
| </span> |
| <h3 class="font-semibold">Collaboration</h3> |
| </div> |
| <p class="mt-3 text-sm text-slate-600 dark:text-slate-300">Shared workspaces, RBAC, and comments that speed up decisions.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="pricing" class="bg-slate-50 py-16 sm:py-20 dark:bg-slate-950"> |
| <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> |
| <div class="mx-auto max-w-3xl text-center"> |
| <h2 class="text-3xl font-semibold sm:text-4xl">Compare plans and features</h2> |
| <p class="mt-3 text-slate-600 dark:text-slate-300">Transparent pricing for teams of any size.</p> |
| </div> |
| <div class="mt-10 overflow-x-auto rounded-xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900"> |
| <table class="min-w-full text-left text-sm"> |
| <thead class="bg-slate-50 text-xs uppercase tracking-wider text-slate-500 dark:bg-slate-800"> |
| <tr> |
| <th class="px-4 py-3">Feature</th> |
| <th class="px-4 py-3">Starter</th> |
| <th class="px-4 py-3">Pro</th> |
| <th class="px-4 py-3">Enterprise</th> |
| </tr> |
| </thead> |
| <tbody class="divide-y divide-slate-200 dark:divide-slate-800"> |
| <tr> |
| <td class="px-4 py-3 font-medium">Monthly active users</td> |
| <td class="px-4 py-3">Up to 1,000</td> |
| <td class="px-4 py-3">Up to 25,000</td> |
| <td class="px-4 py-3">Unlimited</td> |
| </tr> |
| <tr> |
| <td class="px-4 py-3 font-medium">Integrations</td> |
| <td class="px-4 py-3">20+</td> |
| <td class="px-4 py-3">100+</td> |
| <td class="px-4 py-3">100+ custom SSO</td> |
| </tr> |
| <tr> |
| <td class="px-4 py-3 font-medium">API rate limit</td> |
| <td class="px-4 py-3">60 req/min</td> |
| <td class="px-4 py-3">600 req/min</td> |
| <td class="px-4 py-3">Custom</td> |
| </tr> |
| <tr> |
| <td class="px-4 py-3 font-medium">Webhooks</td> |
| <td class="px-4 py-3"><i data-feather="check" class="inline h-4 w-4 text-green-500"></i></td> |
| <td class="px-4 py-3"><i data-feather="check" class="inline h-4 w-4 text-green-500"></i></td> |
| <td class="px-4 py-3"><i data-feather="check" class="inline h-4 w-4 text-green-500"></i></td> |
| </tr> |
| <tr> |
| <td class="px-4 py-3 font-medium">SAML/SSO</td> |
| <td class="px-4 py-3"><i data-feather="x" class="inline h-4 w-4 text-slate-400"></i></td> |
| <td class="px-4 py-3"><i data-feather="check" class="inline h-4 w-4 text-green-500"></i></td> |
| <td class="px-4 py-3"><i data-feather="check" class="inline h-4 w-4 text-green-500"></i></td> |
| </tr> |
| <tr> |
| <td class="px-4 py-3 font-medium">Support</td> |
| <td class="px-4 py-3">Email</td> |
| <td class="px-4 py-3">Priority</td> |
| <td class="px-4 py-3">24/7 + TAM</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| <div class="mt-6 flex items-center justify-center"> |
| <a href="javascript:void(0)" id="openSignupPricing" class="inline-flex items-center gap-2 rounded-md bg-blue-500 px-5 py-3 text-sm font-semibold text-white shadow hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <i data-feather="credit-card"></i> |
| Start free on Pro |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="api" class="py-16 sm:py-20"> |
| <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> |
| <div class="grid items-center gap-10 md:grid-cols-2"> |
| <div> |
| <h2 class="text-3xl font-semibold sm:text-4xl">API-first by design</h2> |
| <p class="mt-3 text-slate-600 dark:text-slate-300">Ship faster with REST endpoints, webhooks, and client SDKs. Manage credentials with OAuth 2.1 and granular scopes.</p> |
| <ul class="mt-4 space-y-2 text-sm text-slate-600 dark:text-slate-300"> |
| <li class="flex items-center gap-2"><i data-feather="check" class="h-4 w-4 text-green-500"></i> SDKs: JS, Python, Ruby, Go</li> |
| <li class="flex items-center gap-2"><i data-feather="check" class="h-4 w-4 text-green-500"></i> Webhook retries & signing</li> |
| <li class="flex items-center gap-2"><i data-feather="check" class="h-4 w-4 text-green-500"></i> Interactive docs with Postman collection</li> |
| </ul> |
| <div class="mt-6"> |
| <a href="https://developer.productname.dev" target="_blank" class="inline-flex items-center gap-2 rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-800 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"> |
| <i data-feather="book-open"></i> |
| Read API Docs |
| </a> |
| </div> |
| </div> |
| <div class="relative"> |
| <div class="rounded-xl border border-slate-200 bg-slate-900 p-4 text-slate-200 shadow-2xl dark:border-slate-800"> |
| <div class="flex items-center gap-2"> |
| <span class="h-3 w-3 rounded-full bg-rose-500"></span> |
| <span class="h-3 w-3 rounded-full bg-amber-400"></span> |
| <span class="h-3 w-3 rounded-full bg-emerald-500"></span> |
| <span class="ml-2 text-xs text-slate-400">curl</span> |
| </div> |
| <pre class="mt-3 overflow-x-auto text-sm"><code id="codeCurl">curl -X POST https://api.productname.dev/v1/run \ |
| -H "Authorization: Bearer YOUR_TOKEN" \ |
| -H "Content-Type: application/json" \ |
| -d '{"flow":"onboard_user","input":{"email":"alice@example.com"}}'</code></pre> |
| <button data-copy="#codeCurl" class="absolute right-4 top-4 inline-flex items-center gap-1 rounded-md bg-slate-800 px-2 py-1 text-xs text-slate-200 hover:bg-slate-700"> |
| <i data-feather="copy" class="h-3 w-3"></i> |
| <span class="copy-label">Copy</span> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="use-cases" class="bg-slate-50 py-16 sm:py-20 dark:bg-slate-950"> |
| <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> |
| <div class="mx-auto max-w-3xl text-center"> |
| <h2 class="text-3xl font-semibold sm:text-4xl">Use cases with examples</h2> |
| <p class="mt-3 text-slate-600 dark:text-slate-300">From ecommerce to healthcare, ProductName helps teams automate the busywork.</p> |
| </div> |
| <div class="mt-10 grid gap-6 md:grid-cols-3"> |
| <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-800 dark:bg-slate-900"> |
| <h3 class="font-semibold">E-commerce</h3> |
| <p class="mt-2 text-sm text-slate-600 dark:text-slate-300">Sync orders from Shopify, charge with Stripe, notify Slack on fulfillment.</p> |
| <pre class="mt-4 overflow-x-auto rounded bg-slate-900 p-3 text-xs text-slate-200"><code>POST /v1/flows/execute |
| { |
| "flow": "order_fulfilled", |
| "store": "shopify", |
| "charge": "stripe", |
| "notify": "slack" |
| }</code></pre> |
| </div> |
| <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-800 dark:bg-slate-900"> |
| <h3 class="font-semibold">SaaS</h3> |
| <p class="mt-2 text-sm text-slate-600 dark:text-slate-300">Automate onboarding with CRM updates, user provisioning, and email sequences.</p> |
| <pre class="mt-4 overflow-x-auto rounded bg-slate-900 p-3 text-xs text-slate-200"><code>POST /v1/run |
| { "flow": "onboard_user", "input": { "email": "jane@acme.com" } }</code></pre> |
| </div> |
| <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-800 dark:bg-slate-900"> |
| <h3 class="font-semibold">Healthcare</h3> |
| <p class="mt-2 text-sm text-slate-600 dark:text-slate-300">Securely process PHI with encryption, audit logs, and role-based access.</p> |
| <pre class="mt-4 overflow-x-auto rounded bg-slate-900 p-3 text-xs text-slate-200"><code>POST /v1/run |
| { "flow": "sync_ehr", "mode": "phi", "encrypt": true }</code></pre> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="security" class="py-16 sm:py-20"> |
| <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> |
| <div class="grid items-center gap-8 md:grid-cols-3"> |
| <div class="rounded-xl border border-slate-200 p-6 shadow-sm dark:border-slate-800"> |
| <div class="flex items-center gap-3"> |
| <span class="rounded-md bg-emerald-500/10 p-2 text-emerald-600"> |
| <i data-feather="shield"></i> |
| </span> |
| <h3 class="font-semibold">SOC 2 Type II</h3> |
| </div> |
| <p class="mt-3 text-sm text-slate-600 dark:text-slate-300">Independent audit of controls for security, availability, and confidentiality.</p> |
| </div> |
| <div class="rounded-xl border border-slate-200 p-6 shadow-sm dark:border-slate-800"> |
| <div class="flex items-center gap-3"> |
| <span class="rounded-md bg-amber-500/10 p-2 text-amber-600"> |
| <i data-feather="lock"></i> |
| </span> |
| <h3 class="font-semibold">GDPR + DPA</h3> |
| </div> |
| <p class="mt-3 text-sm text-slate-600 dark:text-slate-300">Data Processing Addendum, encryption in transit and at rest, and right to erasure.</p> |
| </div> |
| <div class="rounded-xl border border-slate-200 p-6 shadow-sm dark:border-slate-800"> |
| <div class="flex items-center gap-3"> |
| <span class="rounded-md bg-blue-500/10 p-2 text-blue-600"> |
| <i data-feather="award"></i> |
| </span> |
| <h3 class="font-semibold">HIPAA (BAA)</h3> |
| </div> |
| <p class="mt-3 text-sm text-slate-600 dark:text-slate-300">Business Associate Agreement available for healthcare workloads.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="customers" class="bg-slate-50 py-16 sm:py-20 dark:bg-slate-950"> |
| <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> |
| <div class="mx-auto max-w-3xl text-center"> |
| <h2 class="text-3xl font-semibold sm:text-4xl">What customers say</h2> |
| <p class="mt-3 text-slate-600 dark:text-slate-300">Real results from teams that switched to ProductName.</p> |
| </div> |
| <div class="mt-10 grid gap-6 md:grid-cols-3"> |
| <figure class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-800 dark:bg-slate-900"> |
| <blockquote class="text-sm text-slate-700 dark:text-slate-300">“We replaced three internal tools. Our release cycle dropped from weeks to days.”</blockquote> |
| <figcaption class="mt-4 flex items-center gap-3"> |
| <img alt="Avatar" src="https://i.pravatar.cc/48?img=15" class="h-10 w-10 rounded-full object-cover" /> |
| <div> |
| <div class="font-semibold">Alex Kim</div> |
| <div class="text-xs text-slate-500">CTO, Composable</div> |
| </div> |
| </figcaption> |
| </figure> |
| <figure class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-800 dark:bg-slate-900"> |
| <blockquote class="text-sm text-slate-700 dark:text-slate-300">“The API is clean and the docs are excellent. Onboarding took less than an afternoon.”</blockquote> |
| <figcaption class="mt-4 flex items-center gap-3"> |
| <img alt="Avatar" src="https://i.pravatar.cc/48?img=32" class="h-10 w-10 rounded-full object-cover" /> |
| <div> |
| <div class="font-semibold">Priya Natarajan</div> |
| <div class="text-xs text-slate-500">Engineering Manager, Finch</div> |
| </div> |
| </figcaption> |
| </figure> |
| <figure class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-800 dark:bg-slate-900"> |
| <blockquote class="text-sm text-slate-700 dark:text-slate-300">“Security reviews were a breeze thanks to SOC 2 and the detailed audit logs.”</blockquote> |
| <figcaption class="mt-4 flex items-center gap-3"> |
| <img alt="Avatar" src="https://i.pravatar.cc/48?img=7" class="h-10 w-10 rounded-full object-cover" /> |
| <div> |
| <div class="font-semibold">Miguel Santos</div> |
| <div class="text-xs text-slate-500">VP Security, MedOps</div> |
| </div> |
| </figcaption> |
| </figure> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 sm:py-20"> |
| <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> |
| <div class="relative overflow-hidden rounded-2xl border border-slate-200 bg-gradient-to-br from-blue-600 to-indigo-600 p-8 text-white shadow-2xl dark:border-slate-800"> |
| <div class="max-w-2xl"> |
| <h3 class="text-2xl font-semibold sm:text-3xl">Start your free trial today</h3> |
| <p class="mt-2 text-blue-100">No credit card required. 14-day Pro trial included.</p> |
| </div> |
| <form id="signupForm" class="mt-6 grid w-full max-w-xl gap-3 sm:grid-cols-[1fr,auto]"> |
| <label class="sr-only" for="email">Work email</label> |
| <input id="email" name="email" type="email" required placeholder="you@company.com" class="w-full rounded-md border-0 bg-white/10 px-4 py-3 text-white placeholder-blue-100 ring-1 ring-inset ring-white/20 backdrop-blur-sm focus:ring-2 focus:ring-white/70" /> |
| <button type="submit" class="inline-flex items-center justify-center gap-2 rounded-md bg-white px-5 py-3 font-semibold text-blue-700 hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-white"> |
| <i data-feather="rocket"></i> |
| Get started |
| </button> |
| <p id="formMessage" class="sm:col-span-2 text-sm text-blue-100"></p> |
| </form> |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| |
| <footer class="border-t border-slate-200 bg-white py-10 dark:border-slate-800 dark:bg-slate-950"> |
| <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> |
| <div class="grid gap-6 sm:grid-cols-2 md:grid-cols-4"> |
| <div> |
| <div class="flex items-center gap-2"> |
| <span class="inline-flex h-8 w-8 items-center justify-center rounded bg-blue-500 text-white"> |
| <i data-feather="cpu"></i> |
| </span> |
| <span class="font-semibold">ProductName</span> |
| </div> |
| <p class="mt-3 text-sm text-slate-600 dark:text-slate-300">Build, launch, and scale—faster.</p> |
| </div> |
| <div> |
| <h4 class="text-sm font-semibold">Product</h4> |
| <ul class="mt-3 space-y-2 text-sm"> |
| <li><a href="#features" class="text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white">Features</a></li> |
| <li><a href="#pricing" class="text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white">Pricing</a></li> |
| <li><a href="#api" class="text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white">API</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="text-sm font-semibold">Company</h4> |
| <ul class="mt-3 space-y-2 text-sm"> |
| <li><a href="#" class="text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white">About</a></li> |
| <li><a href="#" class="text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white">Careers</a></li> |
| <li><a href="#" class="text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white">Contact</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="text-sm font-semibold">Legal</h4> |
| <ul class="mt-3 space-y-2 text-sm"> |
| <li><a href="#" class="text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white">Privacy</a></li> |
| <li><a href="#" class="text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white">Terms</a></li> |
| <li><a href="#" class="text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white">DPA</a></li> |
| </ul> |
| </div> |
| </div> |
| <div class="mt-8 flex items-center justify-between"> |
| <p class="text-xs text-slate-500">© <span id="year"></span> ProductName, Inc.</p> |
| <div class="flex items-center gap-3 text-slate-500"> |
| <a href="#" class="hover:text-slate-700 dark:hover:text-slate-200" aria-label="Twitter"> |
| <i data-feather="twitter"></i> |
| </a> |
| <a href="#" class="hover:text-slate-700 dark:hover:text-slate-200" aria-label="GitHub"> |
| <i data-feather="github"></i> |
| </a> |
| <a href="#" class="hover:text-slate-700 dark:hover:text-slate-200" aria-label="LinkedIn"> |
| <i data-feather="linkedin"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <div id="signupModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/50 p-4"> |
| <div role="dialog" aria-modal="true" aria-labelledby="signupTitle" class="w-full max-w-lg rounded-xl bg-white p-6 shadow-2xl dark:bg-slate-900"> |
| <div class="flex items-start justify-between"> |
| <h3 id="signupTitle" class="text-lg font-semibold">Start your free trial</h3> |
| <button id="closeSignup" class="rounded-md p-2 text-slate-500 hover:bg-slate-100 hover:text-slate-800 dark:hover:bg-slate-800"> |
| <i data-feather="x"></i> |
| </button> |
| </div> |
| <p class="mt-2 text-sm text-slate-600 dark:text-slate-300">No credit card required. We'll create your workspace instantly.</p> |
| <form id="signupModalForm" class="mt-6 grid gap-3"> |
| <div> |
| <label class="mb-1 block text-sm font-medium" for="modalEmail">Work email</label> |
| <input id="modalEmail" name="email" type="email" required placeholder="you@company.com" class="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm shadow-sm placeholder:text-slate-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-slate-700 dark:bg-slate-950" /> |
| </div> |
| <div> |
| <label class="mb-1 block text-sm font-medium" for="modalPassword">Password</label> |
| <input id="modalPassword" name="password" type="password" required minlength="8" placeholder="At least 8 characters" class="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm shadow-sm placeholder:text-slate-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-slate-700 dark:bg-slate-950" /> |
| </div> |
| <button type="submit" class="inline-flex items-center justify-center gap-2 rounded-md bg-blue-500 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <i data-feather="rocket"></i> |
| Create workspace |
| </button> |
| <p id="modalMessage" class="text-sm text-slate-600 dark:text-slate-300"></p> |
| </form> |
| </div> |
| </div> |
|
|
| <script src="script.js"></script> |
| <script>feather.replace();</script> |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
| </body> |
| </html> |
