Spaces:

enzostvs
/

saas-landing-page

Running

App Files Files Community

enzostvs HF Staff commited on 14 days ago

Commit

90ff745

verified ·

1 Parent(s): d2fa6c3

Create a modern SaaS landing page with a hero section featuring a product demo, benefits section with icons, pricing plans comparison table, customer testimonials with photos, FAQ accordion, and a prominent call-to-action footer.

Browse files

Files changed (4) hide show

README.md +8 -5
index.html +545 -19
script.js +104 -0
style.css +48 -19

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Saas Landing Page
-emoji: 📉
-colorFrom: purple
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: saas-landing-page
+colorFrom: pink
+colorTo: yellow
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,545 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>FlowForge — Ship faster with the modern operations platform</title>
+  <meta name="description" content="FlowForge is the modern SaaS platform that helps teams automate workflows, collaborate in real time, and deliver results faster." />
+  <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://images.unsplash.com/photo-1551281044-8d8d2c1d6d1a?q=80&w=1200&auto=format&fit=crop" 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">
+          <!-- 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 [email protected].</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>

script.js ADDED Viewed

	@@ -0,0 +1,104 @@

+// Mobile menu toggle
+const mobileMenuBtn = document.getElementById('mobileMenuBtn');
+const mobileMenu = document.getElementById('mobileMenu');
+if (mobileMenuBtn && mobileMenu) {
+  mobileMenuBtn.addEventListener('click', () => {
+    mobileMenu.classList.toggle('hidden');
+    // Swap icon between menu and x
+    const icon = mobileMenuBtn.querySelector('[data-feather]');
+    if (icon) {
+      icon.setAttribute('data-feather', mobileMenu.classList.contains('hidden') ? 'menu' : 'x');
+      if (window.feather && typeof feather.replace === 'function') feather.replace();
+    }
+  });
+}
+// Billing toggle: monthly/yearly
+const billMonthly = document.getElementById('billMonthly');
+const billYearly = document.getElementById('billYearly');
+const priceEls = document.querySelectorAll('[data-price]');
+let yearly = true;
+function updateBillingUI() {
+  const monthlyBtn = billMonthly;
+  const yearlyBtn = billYearly;
+  if (!monthlyBtn || !yearlyBtn) return;
+  if (yearly) {
+    yearlyBtn.classList.remove('text-slate-700', 'bg-white');
+    yearlyBtn.classList.add('text-white', 'bg-brand-600');
+    monthlyBtn.classList.remove('text-white', 'bg-brand-600');
+    monthlyBtn.classList.add('text-slate-700', 'bg-white');
+  } else {
+    monthlyBtn.classList.remove('text-slate-700', 'bg-white');
+    monthlyBtn.classList.add('text-white', 'bg-brand-600');
+    yearlyBtn.classList.remove('text-white', 'bg-brand-600');
+    yearlyBtn.classList.add('text-slate-700', 'bg-white');
+  }
+}
+function updatePrices() {
+  priceEls.forEach((el) => {
+    const monthly = el.getAttribute('data-monthly');
+    const yearlyPrice = el.getAttribute('data-yearly');
+    const value = yearly ? yearlyPrice : monthly;
+    el.textContent = value === '0' ? '$0' : `$${value}`;
+  });
+}
+if (billMonthly && billYearly) {
+  billMonthly.addEventListener('click', () => {
+    yearly = false;
+    updateBillingUI();
+    updatePrices();
+  });
+  billYearly.addEventListener('click', () => {
+    yearly = true;
+    updateBillingUI();
+    updatePrices();
+  });
+  updateBillingUI();
+  updatePrices();
+}
+// Demo modal
+const demoModal = document.getElementById('demoModal');
+const demoFrame = document.getElementById('demoFrame');
+const openDemo = document.getElementById('openDemo');
+const demoPlayOverlay = document.getElementById('demoPlayOverlay');
+const closeDemo = document.getElementById('closeDemo');
+function openDemoModal() {
+  if (!demoModal || !demoFrame) return;
+  // Public demo video; use muted + playsinline to allow autoplay
+  demoFrame.src = 'https://www.youtube.com/embed/9bZkp7q19f0?autoplay=1&modestbranding=1&rel=0';
+  demoModal.classList.remove('hidden');
+  document.body.style.overflow = 'hidden';
+}
+function closeDemoModal() {
+  if (!demoModal || !demoFrame) return;
+  demoFrame.src = '';
+  demoModal.classList.add('hidden');
+  document.body.style.overflow = '';
+}
+if (openDemo) openDemo.addEventListener('click', openDemoModal);
+if (demoPlayOverlay) demoPlayOverlay.addEventListener('click', openDemoModal);
+if (closeDemo) closeDemo.addEventListener('click', closeDemoModal);
+if (demoModal) {
+  demoModal.addEventListener('click', (e) => {
+    if (e.target === demoModal) closeDemoModal();
+  });
+}
+// Close on Escape
+window.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape' && demoModal && !demoModal.classList.contains('hidden')) {
+    closeDemoModal();
+  }
+});
+// Footer year
+const yearEl = document.getElementById('year');
+if (yearEl) yearEl.textContent = new Date().getFullYear();

style.css CHANGED Viewed

@@ -1,28 +1,57 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* Minimal scrollbar for pricing carousel on WebKit */
+.scrollbar-thin::-webkit-scrollbar {
+  height: 8px;
+}
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  background-color: rgba(148,163,184,.6);
+  border-radius: 9999px;
+}
+.scrollbar-thin::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+/* Improve focus visibility */
+:focus-visible {
+  outline: 2px solid rgba(99, 102, 241, .6);
+  outline-offset: 2px;
 }
+/* Respect reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
 }
+/* Selection */
+::selection {
+  background: rgba(99,102,241,.18);
 }
+/* Grid pattern helper used on hero background */
+.bg-grid {
+  background-image: radial-gradient(circle at 1px 1px, rgba(2, 6, 23, 0.12) 1px, transparent 0);
+  background-size: 24px 24px;
 }
+/* Safe area for mobile */
+@supports (padding: max(0px)) {
+  .container {
+    padding-left: max(1rem, env(safe-area-inset-left));
+    padding-right: max(1rem, env(safe-area-inset-right));
+  }
 }
+/* Subtle animated gradient blob for hero visuals (non essential) */
+@keyframes floaty {
+  0%, 100% { transform: translateY(0); opacity: .5; }
+  50% { transform: translateY(-12px); opacity: .8; }
+}
+/* Custom Utilities */
+.text-balance {
+  text-wrap: balance;
+}