Spaces:
Running
Running
| <html lang="en" class="h-full scroll-smooth"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width,initial-scale=1" /> | |
| <title>enzo.dev — Fullstack Developer & Designer</title> | |
| <meta name="description" content="Personal portfolio and blog of Enzo, a fullstack developer and designer passionate about creating beautiful, functional web experiences." /> | |
| <meta name="theme-color" content="#4f46e5" /> | |
| <!-- Open Graph --> | |
| <meta property="og:title" content="FlowForge — Ship faster with the modern operations platform" /> | |
| <meta property="og:description" content="Automate workflows, collaborate in real time, and deliver results faster." /> | |
| <meta property="og:type" content="website" /> | |
| <meta property="og:url" content="https://example.com" /> | |
| <meta property="og:image" content="https://images.unsplash.com/photo-1498050108023-c5249f4df085?q=80&w=1200&auto=format&fit=crop" /> | |
| <!-- Fonts --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" /> | |
| <!-- Styles --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| container: { center: true, padding: "1rem" }, | |
| extend: { | |
| fontFamily: { sans: ['Inter', 'system-ui', 'ui-sans-serif', 'Arial'] }, | |
| colors: { | |
| brand: { | |
| 50: '#eef2ff', 100: '#e0e7ff', 200: '#c7d2fe', | |
| 300: '#a5b4fc', 400: '#818cf8', 500: '#6366f1', | |
| 600: '#4f46e5', 700: '#4338ca', 800: '#3730a3', | |
| 900: '#312e81' | |
| } | |
| }, | |
| boxShadow: { | |
| 'soft': '0 10px 30px -10px rgba(2,6,23,.25)', | |
| }, | |
| backgroundImage: { | |
| 'grid': 'radial-gradient(circle at 1px 1px, rgba(2,6,23,0.15) 1px, transparent 0)', | |
| }, | |
| backgroundSize: { | |
| 'grid': '24px 24px', | |
| }, | |
| } | |
| }, | |
| darkMode: 'class', | |
| } | |
| </script> | |
| <link rel="stylesheet" href="style.css" /> | |
| <!-- Icons --> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| </head> | |
| <body class="h-full bg-white font-sans text-slate-800 antialiased selection:bg-brand-200 selection:text-slate-900"> | |
| <!-- Header --> | |
| <header class="sticky top-0 z-50 w-full border-b border-slate-200/60 bg-white/70 backdrop-blur supports-[backdrop-filter]:bg-white/60"> | |
| <div class="container flex h-16 items-center justify-between"> | |
| <a href="#" class="flex items-center gap-2"> | |
| <div class="h-9 w-9 grid place-items-center rounded-lg bg-gradient-to-br from-brand-500 to-indigo-600 text-white shadow-soft"> | |
| <i data-feather="activity" class="h-5 w-5"></i> | |
| </div> | |
| <span class="text-lg font-extrabold tracking-tight text-slate-900">FlowForge</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">Features</a> | |
| <a href="#pricing" class="text-sm font-medium text-slate-600 hover:text-slate-900">Pricing</a> | |
| <a href="#testimonials" class="text-sm font-medium text-slate-600 hover:text-slate-900">Customers</a> | |
| <a href="#faq" class="text-sm font-medium text-slate-600 hover:text-slate-900">FAQ</a> | |
| </nav> | |
| <div class="flex items-center gap-2"> | |
| <a href="#" class="hidden rounded-lg px-3.5 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-100 md:block">Sign in</a> | |
| <a href="#pricing" class="rounded-lg bg-gradient-to-r from-brand-600 to-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-soft hover:from-brand-700 hover:to-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/50">Start free trial</a> | |
| <button id="mobileMenuBtn" class="ml-2 inline-flex items-center justify-center rounded-md p-2 text-slate-600 hover:bg-slate-100 hover:text-slate-900 md:hidden" aria-label="Open menu"> | |
| <i data-feather="menu" class="h-5 w-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobileMenu" class="hidden border-t border-slate-200 bg-white md:hidden"> | |
| <div class="container py-3"> | |
| <a href="#features" class="block rounded-md px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-100">Features</a> | |
| <a href="#pricing" class="mt-1 block rounded-md px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-100">Pricing</a> | |
| <a href="#testimonials" class="mt-1 block rounded-md px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-100">Customers</a> | |
| <a href="#faq" class="mt-1 block rounded-md px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-100">FAQ</a> | |
| <div class="mt-2 flex gap-2 px-3"> | |
| <a href="#" class="w-full rounded-md border border-slate-300 px-4 py-2 text-center text-sm font-semibold text-slate-700">Sign in</a> | |
| <a href="#pricing" class="w-full rounded-md bg-gradient-to-r from-brand-600 to-indigo-600 px-4 py-2 text-center text-sm font-semibold text-white">Start free</a> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero --> | |
| <section class="relative overflow-hidden"> | |
| <div aria-hidden="true" class="pointer-events-none absolute inset-0 bg-grid"></div> | |
| <div class="container relative py-16 sm:py-24 lg:py-28"> | |
| <div class="grid items-center gap-12 lg:grid-cols-2"> | |
| <div> | |
| <div class="mb-4 inline-flex items-center gap-2 rounded-full border border-brand-200 bg-brand-50 px-3 py-1 text-xs font-semibold text-brand-700"> | |
| <span class="inline-flex h-2 w-2 rounded-full bg-brand-500"></span> | |
| Now in Public Beta | |
| </div> | |
| <h1 class="text-4xl font-extrabold tracking-tight text-slate-900 sm:text-5xl lg:text-6xl"> | |
| Ship faster with the modern operations platform | |
| </h1> | |
| <p class="mt-5 max-w-xl text-lg leading-relaxed text-slate-600"> | |
| Automate workflows, collaborate in real time, and deliver results faster with FlowForge — the all‑in‑one platform teams love. | |
| </p> | |
| <div class="mt-8 flex flex-col items-start gap-3 sm:flex-row sm:items-center"> | |
| <a href="#pricing" class="inline-flex items-center gap-2 rounded-lg bg-gradient-to-r from-brand-600 to-indigo-600 px-5 py-3 text-sm font-semibold text-white shadow-soft hover:from-brand-700 hover:to-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/50"> | |
| Start free trial | |
| <i data-feather="arrow-right" class="h-4 w-4"></i> | |
| </a> | |
| <button id="openDemo" class="inline-flex items-center gap-2 rounded-lg border border-slate-300 bg-white px-5 py-3 text-sm font-semibold text-slate-700 hover:bg-slate-50"> | |
| <i data-feather="play-circle" class="h-4 w-4"></i> | |
| Watch demo | |
| </button> | |
| <span class="text-xs text-slate-500">No credit card required</span> | |
| </div> | |
| <!-- Social proof --> | |
| <div class="mt-10"> | |
| <p class="text-xs font-medium uppercase tracking-wider text-slate-500">Trusted by teams at</p> | |
| <div class="mt-4 grid grid-cols-3 items-center gap-6 opacity-70 sm:grid-cols-5"> | |
| <div class="text-sm font-semibold text-slate-600">Acme Inc.</div> | |
| <div class="text-sm font-semibold text-slate-600">Globex</div> | |
| <div class="text-sm font-semibold text-slate-600">Initech</div> | |
| <div class="text-sm font-semibold text-slate-600">Umbrella</div> | |
| <div class="text-sm font-semibold text-slate-600">Soylent</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product Demo --> | |
| <div class="relative"> | |
| <div class="relative overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-soft"> | |
| <div class="flex items-center justify-between border-b border-slate-200 bg-slate-50 px-4 py-2"> | |
| <div class="flex items-center gap-1.5"> | |
| <span class="h-3 w-3 rounded-full bg-rose-400"></span> | |
| <span class="h-3 w-3 rounded-full bg-amber-400"></span> | |
| <span class="h-3 w-3 rounded-full bg-emerald-400"></span> | |
| </div> | |
| <div class="flex items-center gap-2 rounded-md bg-white px-2 py-1 text-xs font-medium text-slate-600 shadow"> | |
| <i data-feather="search" class="h-3.5 w-3.5"></i> | |
| flowforge.app/demo | |
| </div> | |
| </div> | |
| <div class="relative aspect-[16/10] w-full bg-gradient-to-br from-slate-50 to-slate-100"> | |
| <img alt="FlowForge demo dashboard" src="https://huggingface.co/spaces/enzostvs/saas-landing-page/resolve/main/images/10-hero-image-website-ideas-to-inspire-you-header-3.png" class="absolute inset-0 h-full w-full object-cover" /> | |
| <div class="absolute inset-0 grid place-items-center bg-slate-900/20"> | |
| <button id="demoPlayOverlay" class="group inline-flex items-center gap-3 rounded-full bg-white/90 px-5 py-3 font-semibold text-slate-900 shadow backdrop-blur hover:bg-white focus:outline-none focus-visible:ring-2 focus-visible:ring-white/70"> | |
| <i data-feather="play" class="h-5 w-5 text-brand-600"></i> | |
| Play product tour | |
| </button> | |
| </div> | |
| </div> | |
| <div class="border-t border-slate-200 bg-white p-4"> | |
| <div class="grid grid-cols-3 gap-3 text-center text-xs"> | |
| <div class="rounded-lg bg-slate-50 p-3"> | |
| <div class="text-2xl font-extrabold text-slate-900">12k</div> | |
| <div class="text-slate-500">Automations</div> | |
| </div> | |
| <div class="rounded-lg bg-slate-50 p-3"> | |
| <div class="text-2xl font-extrabold text-slate-900">99.99%</div> | |
| <div class="text-slate-500">Uptime</div> | |
| </div> | |
| <div class="rounded-lg bg-slate-50 p-3"> | |
| <div class="text-2xl font-extrabold text-slate-900">+240%</div> | |
| <div class="text-slate-500">Throughput</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pointer-events-none absolute -right-10 -top-10 -z-10 h-72 w-72 rounded-full bg-brand-400/30 blur-3xl"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features --> | |
| <section id="features" class="relative border-t border-slate-200 py-16 sm:py-24"> | |
| <div class="container"> | |
| <div class="mx-auto max-w-2xl text-center"> | |
| <h2 class="text-3xl font-extrabold tracking-tight text-slate-900 sm:text-4xl">Everything you need to go from idea to impact</h2> | |
| <p class="mt-4 text-slate-600">Powerful features that help your team automate work, gain insights, and scale with confidence.</p> | |
| </div> | |
| <div class="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Feature card --> | |
| <div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm hover:shadow-soft"> | |
| <div class="mb-4 inline-flex h-10 w-10 items-center justify-center rounded-xl bg-brand-50 text-brand-600"> | |
| <i data-feather="zap" class="h-5 w-5"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-slate-900">Instant automations</h3> | |
| <p class="mt-2 text-sm text-slate-600">Drag-and-drop builder with 100+ templates to automate manual steps in minutes.</p> | |
| </div> | |
| <div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm hover:shadow-soft"> | |
| <div class="mb-4 inline-flex h-10 w-10 items-center justify-center rounded-xl bg-brand-50 text-brand-600"> | |
| <i data-feather="shield" class="h-5 w-5"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-slate-900">Enterprise-grade security</h3> | |
| <p class="mt-2 text-sm text-slate-600">SSO/SAML, role-based access control, and audit logs baked in by default.</p> | |
| </div> | |
| <div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm hover:shadow-soft"> | |
| <div class="mb-4 inline-flex h-10 w-10 items-center justify-center rounded-xl bg-brand-50 text-brand-600"> | |
| <i data-feather="trending-up" class="h-5 w-5"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-slate-900">Real-time insights</h3> | |
| <p class="mt-2 text-sm text-slate-600">Dashboards update instantly and surface bottlenecks before they become fires.</p> | |
| </div> | |
| <div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm hover:shadow-soft"> | |
| <div class="mb-4 inline-flex h-10 w-10 items-center justify-center rounded-xl bg-brand-50 text-brand-600"> | |
| <i data-feather="cpu" class="h-5 w-5"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-slate-900">API-first</h3> | |
| <p class="mt-2 text-sm text-slate-600">Open APIs and webhooks that integrate with your stack and scale as you grow.</p> | |
| </div> | |
| <div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm hover:shadow-soft"> | |
| <div class="mb-4 inline-flex h-10 w-10 items-center justify-center rounded-xl bg-brand-50 text-brand-600"> | |
| <i data-feather="clock" class="h-5 w-5"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-slate-900">99.99% uptime SLA</h3> | |
| <p class="mt-2 text-sm text-slate-600">Multi-region failover and proactive monitoring keep your work moving.</p> | |
| </div> | |
| <div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm hover:shadow-soft"> | |
| <div class="mb-4 inline-flex h-10 w-10 items-center justify-center rounded-xl bg-brand-50 text-brand-600"> | |
| <i data-feather="users" class="h-5 w-5"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-slate-900">Collaboration</h3> | |
| <p class="mt-2 text-sm text-slate-600">Comments, mentions, and shared workspaces keep everyone aligned.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing --> | |
| <section id="pricing" class="relative border-t border-slate-200 bg-slate-50 py-16 sm:py-24"> | |
| <div class="container"> | |
| <div class="mx-auto max-w-2xl text-center"> | |
| <h2 class="text-3xl font-extrabold tracking-tight text-slate-900 sm:text-4xl">Simple, transparent pricing</h2> | |
| <p class="mt-4 text-slate-600">Choose a plan that fits your team. Cancel anytime.</p> | |
| <div class="mt-6 inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white p-1 text-sm"> | |
| <button id="billMonthly" class="rounded-full px-3 py-1 font-medium text-slate-700">Monthly</button> | |
| <button id="billYearly" class="rounded-full px-3 py-1 font-medium text-white bg-brand-600">Yearly <span class="ml-1 rounded bg-emerald-500 px-1.5 py-0.5 text-[10px] font-bold leading-none text-white">Save 20%</span></button> | |
| </div> | |
| </div> | |
| <div class="mt-10 overflow-hidden"> | |
| <div class="scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-300 hover:scrollbar-thumb-slate-400 flex gap-6 overflow-x-auto pb-4 pricing-cards"> | |
| <!-- Starter --> | |
| <div class="w-80 flex-shrink-0 rounded-2xl border border-slate-200 bg-white p-6 shadow-sm"> | |
| <h3 class="text-lg font-semibold text-slate-900">Starter</h3> | |
| <p class="mt-1 text-sm text-slate-600">For individuals and small projects.</p> | |
| <div class="mt-6"> | |
| <span class="text-4xl font-extrabold text-slate-900" data-price data-monthly="0" data-yearly="0">$0</span> | |
| <span class="ml-1 text-sm text-slate-500">/mo</span> | |
| </div> | |
| <a href="#cta" class="mt-6 block w-full rounded-lg border border-slate-300 bg-white px-4 py-2 text-center font-semibold text-slate-700 hover:bg-slate-50">Get started</a> | |
| <ul class="mt-6 space-y-3 text-sm text-slate-600"> | |
| <li class="flex items-start gap-2"><i data-feather="check" class="mt-0.5 h-4 w-4 text-emerald-600"></i> 3 projects</li> | |
| <li class="flex items-start gap-2"><i data-feather="check" class="mt-0.5 h-4 w-4 text-emerald-600"></i> Basic automations</li> | |
| <li class="flex items-start gap-2"><i data-feather="check" class="mt-0.5 h-4 w-4 text-emerald-600"></i> Community support</li> | |
| </ul> | |
| </div> | |
| <!-- Pro --> | |
| <div class="relative w-80 flex-shrink-0 rounded-2xl border-2 border-brand-600 bg-white p-6 shadow-soft"> | |
| <div class="absolute -top-3 right-4 rounded-full bg-gradient-to-r from-brand-600 to-indigo-600 px-3 py-1 text-xs font-bold text-white shadow">Most popular</div> | |
| <h3 class="text-lg font-semibold text-slate-900">Pro</h3> | |
| <p class="mt-1 text-sm text-slate-600">For growing teams that need more power.</p> | |
| <div class="mt-6"> | |
| <span class="text-4xl font-extrabold text-slate-900" data-price data-monthly="29" data-yearly="23">$29</span> | |
| <span class="ml-1 text-sm text-slate-500">/user/mo</span> | |
| </div> | |
| <a href="#cta" class="mt-6 block w-full rounded-lg bg-gradient-to-r from-brand-600 to-indigo-600 px-4 py-2 text-center font-semibold text-white shadow hover:from-brand-700 hover:to-indigo-700">Start free trial</a> | |
| <ul class="mt-6 space-y-3 text-sm text-slate-600"> | |
| <li class="flex items-start gap-2"><i data-feather="check" class="mt-0.5 h-4 w-4 text-emerald-600"></i> Unlimited projects</li> | |
| <li class="flex items-start gap-2"><i data-feather="check" class="mt-0.5 h-4 w-4 text-emerald-600"></i> Advanced automations</li> | |
| <li class="flex items-start gap-2"><i data-feather="check" class="mt-0.5 h-4 w-4 text-emerald-600"></i> Role-based access</li> | |
| <li class="flex items-start gap-2"><i data-feather="check" class="mt-0.5 h-4 w-4 text-emerald-600"></i> Email & chat support</li> | |
| </ul> | |
| </div> | |
| <!-- Enterprise --> | |
| <div class="w-80 flex-shrink-0 rounded-2xl border border-slate-200 bg-white p-6 shadow-sm"> | |
| <h3 class="text-lg font-semibold text-slate-900">Enterprise</h3> | |
| <p class="mt-1 text-sm text-slate-600">Security and scale for large orgs.</p> | |
| <div class="mt-6"> | |
| <span class="text-4xl font-extrabold text-slate-900" data-price data-monthly="79" data-yearly="63">$79</span> | |
| <span class="ml-1 text-sm text-slate-500">/user/mo</span> | |
| </div> | |
| <a href="#cta" class="mt-6 block w-full rounded-lg border border-slate-300 bg-white px-4 py-2 text-center font-semibold text-slate-700 hover:bg-slate-50">Contact sales</a> | |
| <ul class="mt-6 space-y-3 text-sm text-slate-600"> | |
| <li class="flex items-start gap-2"><i data-feather="check" class="mt-0.5 h-4 w-4 text-emerald-600"></i> SSO/SAML, SCIM</li> | |
| <li class="flex items-start gap-2"><i data-feather="check" class="mt-0.5 h-4 w-4 text-emerald-600"></i> Dedicated support</li> | |
| <li class="flex items-start gap-2"><i data-feather="check" class="mt-0.5 h-4 w-4 text-emerald-600"></i> Custom SLAs</li> | |
| <li class="flex items-start gap-2"><i data-feather="check" class="mt-0.5 h-4 w-4 text-emerald-600"></i> Audit logs & exports</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section id="testimonials" class="relative border-t border-slate-200 py-16 sm:py-24"> | |
| <div class="container"> | |
| <div class="mx-auto max-w-2xl text-center"> | |
| <h2 class="text-3xl font-extrabold tracking-tight text-slate-900 sm:text-4xl">Loved by modern teams</h2> | |
| <p class="mt-4 text-slate-600">Here’s what customers say after switching to FlowForge.</p> | |
| </div> | |
| <div class="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Card --> | |
| <article class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm"> | |
| <div class="flex items-center gap-3"> | |
| <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=256&auto=format&fit=crop" alt="Photo of Sarah Lee" class="h-10 w-10 rounded-full object-cover" /> | |
| <div> | |
| <h4 class="text-sm font-semibold text-slate-900">Sarah Lee</h4> | |
| <p class="text-xs text-slate-500">Ops Lead, Acme Inc.</p> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex text-amber-400"> | |
| <i data-feather="star" class="h-4 w-4 fill-current"></i> | |
| <i data-feather="star" class="h-4 w-4 fill-current"></i> | |
| <i data-feather="star" class="h-4 w-4 fill-current"></i> | |
| <i data-feather="star" class="h-4 w-4 fill-current"></i> | |
| <i data-feather="star" class="h-4 w-4 fill-current"></i> | |
| </div> | |
| <p class="mt-4 text-sm leading-relaxed text-slate-700">FlowForge cut our cycle time in half. The automation builder is ridiculously intuitive.</p> | |
| </article> | |
| <article class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm"> | |
| <div class="flex items-center gap-3"> | |
| <img src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?q=80&w=256&auto=format&fit=crop" alt="Photo of Devin Carter" class="h-10 w-10 rounded-full object-cover" /> | |
| <div> | |
| <h4 class="text-sm font-semibold text-slate-900">Devin Carter</h4> | |
| <p class="text-xs text-slate-500">CTO, Globex</p> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex text-amber-400"> | |
| <i data-feather="star" class="h-4 w-4 fill-current"></i> | |
| <i data-feather="star" class="h-4 w-4 fill-current"></i> | |
| <i data-feather="star" class="h-4 w-4 fill-current"></i> | |
| <i data-feather="star" class="h-4 w-4 fill-current"></i> | |
| <i data-feather="star" class="h-4 w-4 fill-current"></i> | |
| </div> | |
| <p class="mt-4 text-sm leading-relaxed text-slate-700">API-first and reliable. Integration took hours, not weeks. Support is world-class.</p> | |
| </article> | |
| <article class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm"> | |
| <div class="flex items-center gap-3"> | |
| <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=256&auto=format&fit=crop" alt="Photo of Maya Patel" class="h-10 w-10 rounded-full object-cover" /> | |
| <div> | |
| <h4 class="text-sm font-semibold text-slate-900">Maya Patel</h4> | |
| <p class="text-xs text-slate-500">PM, Initech</p> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex text-amber-400"> | |
| <i data-feather="star" class="h-4 w-4 fill-current"></i> | |
| <i data-feather="star" class="h-4 w-4 fill-current"></i> | |
| <i data-feather="star" class="h-4 w-4 fill-current"></i> | |
| <i data-feather="star" class="h-4 w-4 fill-current"></i> | |
| <i data-feather="star" class="h-4 w-4 fill-current"></i> | |
| </div> | |
| <p class="mt-4 text-sm leading-relaxed text-slate-700">Dashboards give us instant clarity. We spot issues before our customers do.</p> | |
| </article> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ --> | |
| <section id="faq" class="relative border-t border-slate-200 bg-slate-50 py-16 sm:py-24"> | |
| <div class="container"> | |
| <div class="mx-auto max-w-2xl text-center"> | |
| <h2 class="text-3xl font-extrabold tracking-tight text-slate-900 sm:text-4xl">Frequently asked questions</h2> | |
| <p class="mt-4 text-slate-600">Can’t find what you’re looking for? Reach out to support@example.com.</p> | |
| </div> | |
| <div class="mx-auto mt-10 max-w-3xl divide-y divide-slate-200 rounded-2xl border border-slate-200 bg-white"> | |
| <!-- Item --> | |
| <details class="group p-6 open:bg-slate-50"> | |
| <summary class="flex cursor-pointer list-none items-center justify-between gap-4"> | |
| <span class="text-sm font-semibold text-slate-900">Do I need a credit card to start?</span> | |
| <i data-feather="plus" class="h-5 w-5 text-slate-500 transition-transform group-open:rotate-45"></i> | |
| </summary> | |
| <p class="mt-3 text-sm text-slate-600">No. You can create an account and try FlowForge free for 14 days without a credit card.</p> | |
| </details> | |
| <details class="group p-6 open:bg-slate-50"> | |
| <summary class="flex cursor-pointer list-none items-center justify-between gap-4"> | |
| <span class="text-sm font-semibold text-slate-900">How does billing work?</span> | |
| <i data-feather="plus" class="h-5 w-5 text-slate-500 transition-transform group-open:rotate-45"></i> | |
| </summary> | |
| <p class="mt-3 text-sm text-slate-600">We bill monthly or annually. Choose per-user pricing with a minimum of 3 seats on Pro and Enterprise.</p> | |
| </details> | |
| <details class="group p-6 open:bg-slate-50"> | |
| <summary class="flex cursor-pointer list-none items-center justify-between gap-4"> | |
| <span class="text-sm font-semibold text-slate-900">Can I change or cancel my plan?</span> | |
| <i data-feather="plus" class="h-5 w-5 text-slate-500 transition-transform group-open:rotate-45"></i> | |
| </summary> | |
| <p class="mt-3 text-sm text-slate-600">Yes. You can upgrade, downgrade, or cancel at any time from your billing settings.</p> | |
| </details> | |
| <details class="group p-6 open:bg-slate-50"> | |
| <summary class="flex cursor-pointer list-none items-center justify-between gap-4"> | |
| <span class="text-sm font-semibold text-slate-900">Do you offer discounts for nonprofits?</span> | |
| <i data-feather="plus" class="h-5 w-5 text-slate-500 transition-transform group-open:rotate-45"></i> | |
| </summary> | |
| <p class="mt-3 text-sm text-slate-600">We offer a 30% discount for verified nonprofits and educational institutions. Contact sales for details.</p> | |
| </details> | |
| <details class="group p-6 open:bg-slate-50"> | |
| <summary class="flex cursor-pointer list-none items-center justify-between gap-4"> | |
| <span class="text-sm font-semibold text-slate-900">Is my data secure?</span> | |
| <i data-feather="plus" class="h-5 w-5 text-slate-500 transition-transform group-open:rotate-45"></i> | |
| </summary> | |
| <p class="mt-3 text-sm text-slate-600">Absolutely. We use encryption at rest and in transit, regular backups, and strict access controls.</p> | |
| </details> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Footer --> | |
| <section id="cta" class="relative overflow-hidden py-16 sm:py-24"> | |
| <div class="container"> | |
| <div class="relative overflow-hidden rounded-3xl bg-gradient-to-r from-brand-600 to-indigo-600 p-8 sm:p-12"> | |
| <div class="absolute -right-16 -top-16 h-64 w-64 rounded-full bg-white/10 blur-3xl"></div> | |
| <div class="absolute -left-16 -bottom-16 h-64 w-64 rounded-full bg-white/10 blur-3xl"></div> | |
| <div class="relative"> | |
| <h3 class="text-2xl font-extrabold tracking-tight text-white sm:text-3xl">Ready to move faster?</h3> | |
| <p class="mt-2 max-w-2xl text-brand-100">Start your free trial today. No credit card required.</p> | |
| <div class="mt-6 flex flex-col items-start gap-3 sm:flex-row"> | |
| <a href="#pricing" class="inline-flex items-center gap-2 rounded-lg bg-white px-5 py-3 text-sm font-semibold text-brand-700 hover:bg-brand-50"> | |
| Get started free | |
| <i data-feather="arrow-right" class="h-4 w-4"></i> | |
| </a> | |
| <a href="#" class="inline-flex items-center gap-2 rounded-lg border border-white/40 px-5 py-3 text-sm font-semibold text-white hover:bg-white/10"> | |
| <i data-feather="calendar" class="h-4 w-4"></i> | |
| Book a demo | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="border-t border-slate-200 bg-white"> | |
| <div class="container py-12"> | |
| <div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-4"> | |
| <div> | |
| <a href="#" class="flex items-center gap-2"> | |
| <div class="h-9 w-9 grid place-items-center rounded-lg bg-gradient-to-br from-brand-500 to-indigo-600 text-white shadow-soft"> | |
| <i data-feather="activity" class="h-5 w-5"></i> | |
| </div> | |
| <span class="text-lg font-extrabold tracking-tight text-slate-900">FlowForge</span> | |
| </a> | |
| <p class="mt-3 text-sm text-slate-600">The modern operations platform for high‑performing teams.</p> | |
| <div class="mt-4 flex items-center gap-3"> | |
| <a href="#" class="inline-flex h-9 w-9 items-center justify-center rounded-full border border-slate-200 text-slate-600 hover:bg-slate-50" aria-label="Twitter"> | |
| <i data-feather="twitter" class="h-4 w-4"></i> | |
| </a> | |
| <a href="#" class="inline-flex h-9 w-9 items-center justify-center rounded-full border border-slate-200 text-slate-600 hover:bg-slate-50" aria-label="LinkedIn"> | |
| <i data-feather="linkedin" class="h-4 w-4"></i> | |
| </a> | |
| <a href="#" class="inline-flex h-9 w-9 items-center justify-center rounded-full border border-slate-200 text-slate-600 hover:bg-slate-50" aria-label="GitHub"> | |
| <i data-feather="github" class="h-4 w-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-sm font-semibold text-slate-900">Product</h4> | |
| <ul class="mt-3 space-y-2 text-sm text-slate-600"> | |
| <li><a href="#features" class="hover:text-slate-900">Features</a></li> | |
| <li><a href="#pricing" class="hover:text-slate-900">Pricing</a></li> | |
| <li><a href="#" class="hover:text-slate-900">Changelog</a></li> | |
| <li><a href="#" class="hover:text-slate-900">Docs</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-sm font-semibold text-slate-900">Company</h4> | |
| <ul class="mt-3 space-y-2 text-sm text-slate-600"> | |
| <li><a href="#" class="hover:text-slate-900">About</a></li> | |
| <li><a href="#" class="hover:text-slate-900">Careers</a></li> | |
| <li><a href="#" class="hover:text-slate-900">Contact</a></li> | |
| <li><a href="#" class="hover:text-slate-900">Press</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-sm font-semibold text-slate-900">Resources</h4> | |
| <ul class="mt-3 space-y-2 text-sm text-slate-600"> | |
| <li><a href="#faq" class="hover:text-slate-900">FAQ</a></li> | |
| <li><a href="#" class="hover:text-slate-900">Guides</a></li> | |
| <li><a href="#" class="hover:text-slate-900">Templates</a></li> | |
| <li><a href="#" class="hover:text-slate-900">API Reference</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-10 flex flex-col items-center justify-between gap-4 border-t border-slate-200 pt-6 sm:flex-row"> | |
| <p class="text-xs text-slate-500">© <span id="year"></span> FlowForge Inc. All rights reserved.</p> | |
| <div class="flex items-center gap-4 text-xs text-slate-500"> | |
| <a href="#" class="hover:text-slate-900">Terms</a> | |
| <a href="#" class="hover:text-slate-900">Privacy</a> | |
| <a href="#" class="hover:text-slate-900">Security</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Demo Modal --> | |
| <div id="demoModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-slate-900/70 p-4"> | |
| <div class="relative w-full max-w-3xl overflow-hidden rounded-2xl bg-white shadow-2xl"> | |
| <button id="closeDemo" class="absolute right-3 top-3 inline-flex h-9 w-9 items-center justify-center rounded-full bg-white/90 text-slate-700 shadow hover:bg-white" aria-label="Close demo"> | |
| <i data-feather="x" class="h-5 w-5"></i> | |
| </button> | |
| <div class="aspect-video w-full bg-black"> | |
| <iframe id="demoFrame" class="h-full w-full" src="" title="Product demo" allow="autoplay; encrypted-media; picture-in-picture" allowfullscreen></iframe> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Scripts --> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |