saas landing-page marketing startup product modern
SaaS Landing Modern
Clean, modern SaaS product landing page with gradient accents, feature grid, pricing tiers, and FAQ section.
modern Responsive Vanilla JS
Live Preview
Sections
navbarherologo-cloudfeatureshow-it-workspricingtestimonialsfaqctafooter
Patterns used
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flowboard — Project Management That Flows</title>
<meta name="description" content="Streamline your team's workflow with Flowboard. Visual project boards, real-time collaboration, and smart automation — all in one place." />
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://webspire.de/webspire-tokens.css">
<link rel="stylesheet" href="https://webspire.de/webspire-components.css">
<style>
html { scroll-behavior: smooth; }
details[open] summary svg { transform: rotate(180deg); }
/* ── Brand tokens ────────────────────────────────────────── */
:root {
--ws-color-surface: #ffffff;
--ws-color-surface-alt: #f8fafc;
--ws-color-surface-muted: #f1f5f9;
--ws-color-text: #0f172a;
--ws-color-text-soft: #1e293b;
--ws-color-text-muted: #64748b;
--ws-color-text-faint: #94a3b8;
--ws-color-border: #e2e8f0;
--ws-color-primary: #4f46e5;
--ws-color-primary-hover: #4338ca;
--ws-color-primary-soft: rgba(79,70,229,0.08);
--ws-color-primary-text: #ffffff;
}
/* ── Snippet: interactions/hover-lift ────────────────────── */
.hover-lift {
--lift-distance: -4px;
--lift-shadow: 0 8px 24px oklch(0 0 0 / 0.2);
--lift-duration: 0.25s;
transition:
transform var(--lift-duration) cubic-bezier(0.16, 1, 0.3, 1),
box-shadow var(--lift-duration) cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-lift:hover {
transform: translateY(var(--lift-distance));
box-shadow: var(--lift-shadow);
}
@media (prefers-reduced-motion: reduce) {
.hover-lift { transition: none; }
}
</style>
</head>
<body class="bg-white text-slate-800 antialiased">
<!-- Navbar -->
<nav class="ws-navbar sticky top-0 z-50 bg-white/80 backdrop-blur-lg border-b border-slate-100" aria-label="Main navigation">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-16">
<a href="#" class="flex items-center gap-2 text-xl font-bold text-indigo-600" aria-label="Flowboard home">
<svg class="w-8 h-8" viewBox="0 0 32 32" fill="none" aria-hidden="true"><rect width="32" height="32" rx="8" fill="#4F46E5"/><path d="M10 11h12M10 16h8M10 21h10" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>
Flowboard
</a>
<div class="hidden md:flex items-center gap-8 text-sm font-medium text-slate-600">
<a href="#features" class="hover:text-indigo-600 transition-colors">Features</a>
<a href="#how-it-works" class="hover:text-indigo-600 transition-colors">How It Works</a>
<a href="#pricing" class="hover:text-indigo-600 transition-colors">Pricing</a>
<a href="#faq" class="hover:text-indigo-600 transition-colors">FAQ</a>
</div>
<div class="hidden md:flex items-center gap-3">
<a href="#" class="text-sm font-medium text-slate-600 hover:text-indigo-600 transition-colors">Sign in</a>
<a href="#" class="text-sm font-semibold px-4 py-2 rounded-lg bg-indigo-600 text-white hover:bg-indigo-700 transition-colors shadow-sm">Start Free</a>
</div>
<button id="mobile-menu-btn" class="md:hidden p-2 rounded-lg hover:bg-slate-100" aria-label="Toggle menu" aria-expanded="false">
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" d="M4 6h16M4 12h16M4 18h16"/></svg>
</button>
</div>
<div id="mobile-menu" class="hidden md:hidden border-t border-slate-100 bg-white px-4 pb-4 pt-2 space-y-2">
<a href="#features" class="block py-2 text-sm font-medium text-slate-600 hover:text-indigo-600">Features</a>
<a href="#how-it-works" class="block py-2 text-sm font-medium text-slate-600 hover:text-indigo-600">How It Works</a>
<a href="#pricing" class="block py-2 text-sm font-medium text-slate-600 hover:text-indigo-600">Pricing</a>
<a href="#faq" class="block py-2 text-sm font-medium text-slate-600 hover:text-indigo-600">FAQ</a>
<div class="pt-2 flex flex-col gap-2">
<a href="#" class="text-sm font-medium text-slate-600 text-center py-2">Sign in</a>
<a href="#" class="text-sm font-semibold px-4 py-2 rounded-lg bg-indigo-600 text-white text-center">Start Free</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="ws-hero relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-indigo-50 via-white to-blue-50 -z-10" aria-hidden="true"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-20 pb-24 sm:pt-28 sm:pb-32 text-center">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-100 text-indigo-700 text-xs font-semibold mb-6 ring-1 ring-indigo-200">
<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
Trusted by 2,400+ teams worldwide
</div>
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight text-slate-900 max-w-4xl mx-auto leading-tight">
Project management<br class="hidden sm:block" /> that actually <span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-blue-500">flows</span>
</h1>
<p class="mt-6 text-lg sm:text-xl text-slate-500 max-w-2xl mx-auto leading-relaxed">
Visual boards, real-time collaboration, and smart automation. Flowboard helps your team ship faster without the chaos.
</p>
<div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="#" class="w-full sm:w-auto px-8 py-3.5 rounded-xl bg-indigo-600 text-white font-semibold text-base hover:bg-indigo-700 transition-colors shadow-lg shadow-indigo-200">Start Free Trial</a>
<a href="#how-it-works" class="w-full sm:w-auto px-8 py-3.5 rounded-xl bg-white text-slate-700 font-semibold text-base ring-1 ring-slate-200 hover:ring-slate-300 transition-colors">See How It Works</a>
</div>
<p class="mt-4 text-sm text-slate-400">No credit card required. Free for teams up to 5.</p>
</div>
</section>
<!-- Logo Cloud -->
<section class="ws-logo-cloud border-y border-slate-100 bg-slate-50/50 py-10" aria-label="Trusted by leading companies">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<p class="text-center text-xs font-semibold uppercase tracking-widest text-slate-400 mb-8">Trusted by forward-thinking teams</p>
<div class="flex flex-wrap items-center justify-center gap-x-12 gap-y-6 opacity-50">
<span class="text-xl font-bold text-slate-400 tracking-tight">Acme Corp</span>
<span class="text-xl font-bold text-slate-400 tracking-tight">NovaTech</span>
<span class="text-xl font-bold text-slate-400 tracking-tight">Meridian</span>
<span class="text-xl font-bold text-slate-400 tracking-tight">Quantum AI</span>
<span class="text-xl font-bold text-slate-400 tracking-tight">Basecamp</span>
<span class="text-xl font-bold text-slate-400 tracking-tight">Skyline</span>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="ws-features py-20 sm:py-28">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-2xl mx-auto mb-16">
<p class="text-sm font-semibold text-indigo-600 uppercase tracking-wide mb-3">Features</p>
<h2 class="text-3xl sm:text-4xl font-bold text-slate-900">Everything your team needs to ship</h2>
<p class="mt-4 text-lg text-slate-500">Powerful enough for enterprise workflows, simple enough to start in minutes.</p>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="hover-lift bg-white rounded-2xl p-8 ring-1 ring-slate-100 hover:ring-indigo-200 transition-all">
<div class="w-12 h-12 rounded-xl bg-indigo-100 text-indigo-600 flex items-center justify-center mb-5">
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z"/></svg>
</div>
<h3 class="text-lg font-semibold text-slate-900 mb-2">Visual Boards</h3>
<p class="text-slate-500 leading-relaxed">Kanban, timeline, and calendar views that adapt to how your team thinks. Drag, drop, and reorganize in real time.</p>
</div>
<div class="hover-lift bg-white rounded-2xl p-8 ring-1 ring-slate-100 hover:ring-indigo-200 transition-all">
<div class="w-12 h-12 rounded-xl bg-blue-100 text-blue-600 flex items-center justify-center mb-5">
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg>
</div>
<h3 class="text-lg font-semibold text-slate-900 mb-2">Real-Time Collaboration</h3>
<p class="text-slate-500 leading-relaxed">See who's working on what, leave contextual comments, and get notified the moment things change. No more status meetings.</p>
</div>
<div class="hover-lift bg-white rounded-2xl p-8 ring-1 ring-slate-100 hover:ring-indigo-200 transition-all">
<div class="w-12 h-12 rounded-xl bg-violet-100 text-violet-600 flex items-center justify-center mb-5">
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"/></svg>
</div>
<h3 class="text-lg font-semibold text-slate-900 mb-2">Smart Automation</h3>
<p class="text-slate-500 leading-relaxed">Set rules once and let Flowboard handle the rest. Auto-assign tasks, move cards, send reminders, and trigger webhooks.</p>
</div>
<div class="hover-lift bg-white rounded-2xl p-8 ring-1 ring-slate-100 hover:ring-indigo-200 transition-all">
<div class="w-12 h-12 rounded-xl bg-emerald-100 text-emerald-600 flex items-center justify-center mb-5">
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"/></svg>
</div>
<h3 class="text-lg font-semibold text-slate-900 mb-2">Built-In Analytics</h3>
<p class="text-slate-500 leading-relaxed">Track velocity, cycle time, and bottlenecks with dashboards that update in real time. Export reports in one click.</p>
</div>
<div class="hover-lift bg-white rounded-2xl p-8 ring-1 ring-slate-100 hover:ring-indigo-200 transition-all">
<div class="w-12 h-12 rounded-xl bg-amber-100 text-amber-600 flex items-center justify-center mb-5">
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 002.25-2.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v2.25A2.25 2.25 0 006 10.5zm0 9.75h2.25A2.25 2.25 0 0010.5 18v-2.25a2.25 2.25 0 00-2.25-2.25H6a2.25 2.25 0 00-2.25 2.25V18A2.25 2.25 0 006 20.25zm9.75-9.75H18a2.25 2.25 0 002.25-2.25V6A2.25 2.25 0 0018 3.75h-2.25A2.25 2.25 0 0013.5 6v2.25a2.25 2.25 0 002.25 2.25z"/></svg>
</div>
<h3 class="text-lg font-semibold text-slate-900 mb-2">200+ Integrations</h3>
<p class="text-slate-500 leading-relaxed">Connect Slack, GitHub, Figma, Google Drive, and more. Keep your existing tools and let Flowboard be the connective tissue.</p>
</div>
<div class="hover-lift bg-white rounded-2xl p-8 ring-1 ring-slate-100 hover:ring-indigo-200 transition-all">
<div class="w-12 h-12 rounded-xl bg-rose-100 text-rose-600 flex items-center justify-center mb-5">
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
</div>
<h3 class="text-lg font-semibold text-slate-900 mb-2">Enterprise Security</h3>
<p class="text-slate-500 leading-relaxed">SOC 2 Type II certified, SSO with SAML, granular permissions, audit logs, and data residency options. Your data stays yours.</p>
</div>
</div>
</div>
</section>
<!-- How It Works -->
<section id="how-it-works" class="ws-steps py-20 sm:py-28 bg-gradient-to-b from-slate-50 to-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-2xl mx-auto mb-16">
<p class="text-sm font-semibold text-indigo-600 uppercase tracking-wide mb-3">How It Works</p>
<h2 class="text-3xl sm:text-4xl font-bold text-slate-900">Up and running in three steps</h2>
<p class="mt-4 text-lg text-slate-500">No migration headaches. Import your existing projects or start fresh in minutes.</p>
</div>
<div class="grid md:grid-cols-3 gap-12">
<div class="text-center">
<div class="w-16 h-16 rounded-2xl bg-indigo-600 text-white text-2xl font-bold flex items-center justify-center mx-auto mb-6 shadow-lg shadow-indigo-200">1</div>
<h3 class="text-xl font-semibold text-slate-900 mb-3">Create Your Workspace</h3>
<p class="text-slate-500 leading-relaxed">Sign up with your email, name your workspace, and invite your team. Takes less than 60 seconds.</p>
</div>
<div class="text-center">
<div class="w-16 h-16 rounded-2xl bg-indigo-600 text-white text-2xl font-bold flex items-center justify-center mx-auto mb-6 shadow-lg shadow-indigo-200">2</div>
<h3 class="text-xl font-semibold text-slate-900 mb-3">Set Up Your Boards</h3>
<p class="text-slate-500 leading-relaxed">Choose a template or build from scratch. Import from Trello, Asana, or Jira with one click.</p>
</div>
<div class="text-center">
<div class="w-16 h-16 rounded-2xl bg-indigo-600 text-white text-2xl font-bold flex items-center justify-center mx-auto mb-6 shadow-lg shadow-indigo-200">3</div>
<h3 class="text-xl font-semibold text-slate-900 mb-3">Start Shipping</h3>
<p class="text-slate-500 leading-relaxed">Assign tasks, set deadlines, automate workflows, and watch your team's velocity climb.</p>
</div>
</div>
</div>
</section>
<!-- Pricing -->
<section id="pricing" class="ws-pricing py-20 sm:py-28">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-2xl mx-auto mb-16">
<p class="text-sm font-semibold text-indigo-600 uppercase tracking-wide mb-3">Pricing</p>
<h2 class="text-3xl sm:text-4xl font-bold text-slate-900">Simple, transparent pricing</h2>
<p class="mt-4 text-lg text-slate-500">Start free, upgrade when you're ready. No hidden fees, no surprises.</p>
</div>
<div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
<!-- Free -->
<div class="rounded-2xl p-8 ring-1 ring-slate-200 bg-white flex flex-col">
<h3 class="text-lg font-semibold text-slate-900">Starter</h3>
<p class="text-sm text-slate-500 mt-1">For small teams getting started</p>
<div class="mt-6 mb-8">
<span class="text-4xl font-extrabold text-slate-900">$0</span>
<span class="text-slate-500 text-sm">/month</span>
</div>
<ul class="space-y-3 text-sm text-slate-600 mb-8 flex-1">
<li class="flex items-start gap-3"><svg class="w-5 h-5 text-indigo-500 shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"/></svg>Up to 5 team members</li>
<li class="flex items-start gap-3"><svg class="w-5 h-5 text-indigo-500 shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"/></svg>3 project boards</li>
<li class="flex items-start gap-3"><svg class="w-5 h-5 text-indigo-500 shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"/></svg>Basic integrations</li>
<li class="flex items-start gap-3"><svg class="w-5 h-5 text-indigo-500 shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"/></svg>Community support</li>
</ul>
<a href="#" class="block text-center py-3 rounded-xl text-sm font-semibold ring-1 ring-slate-200 text-slate-700 hover:ring-indigo-300 hover:text-indigo-600 transition-all">Get Started</a>
</div>
<!-- Pro (highlighted) -->
<div class="rounded-2xl p-8 bg-indigo-600 text-white flex flex-col relative shadow-xl shadow-indigo-200 ring-2 ring-indigo-600">
<div class="absolute -top-3.5 left-1/2 -translate-x-1/2 px-3 py-1 rounded-full bg-indigo-500 text-xs font-semibold text-white shadow-sm">Most Popular</div>
<h3 class="text-lg font-semibold">Pro</h3>
<p class="text-sm text-indigo-200 mt-1">For growing teams that need more</p>
<div class="mt-6 mb-8">
<span class="text-4xl font-extrabold">$12</span>
<span class="text-indigo-200 text-sm">/user/month</span>
</div>
<ul class="space-y-3 text-sm text-indigo-100 mb-8 flex-1">
<li class="flex items-start gap-3"><svg class="w-5 h-5 text-indigo-300 shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"/></svg>Unlimited members</li>
<li class="flex items-start gap-3"><svg class="w-5 h-5 text-indigo-300 shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"/></svg>Unlimited boards</li>
<li class="flex items-start gap-3"><svg class="w-5 h-5 text-indigo-300 shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"/></svg>Advanced automation</li>
<li class="flex items-start gap-3"><svg class="w-5 h-5 text-indigo-300 shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"/></svg>Priority support</li>
<li class="flex items-start gap-3"><svg class="w-5 h-5 text-indigo-300 shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"/></svg>Analytics dashboard</li>
</ul>
<a href="#" class="block text-center py-3 rounded-xl text-sm font-semibold bg-white text-indigo-600 hover:bg-indigo-50 transition-colors">Start Free Trial</a>
</div>
<!-- Enterprise -->
<div class="rounded-2xl p-8 ring-1 ring-slate-200 bg-white flex flex-col">
<h3 class="text-lg font-semibold text-slate-900">Enterprise</h3>
<p class="text-sm text-slate-500 mt-1">For organizations at scale</p>
<div class="mt-6 mb-8">
<span class="text-4xl font-extrabold text-slate-900">Custom</span>
</div>
<ul class="space-y-3 text-sm text-slate-600 mb-8 flex-1">
<li class="flex items-start gap-3"><svg class="w-5 h-5 text-indigo-500 shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"/></svg>Everything in Pro</li>
<li class="flex items-start gap-3"><svg class="w-5 h-5 text-indigo-500 shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"/></svg>SSO / SAML</li>
<li class="flex items-start gap-3"><svg class="w-5 h-5 text-indigo-500 shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"/></svg>Audit logs</li>
<li class="flex items-start gap-3"><svg class="w-5 h-5 text-indigo-500 shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"/></svg>Custom SLA</li>
<li class="flex items-start gap-3"><svg class="w-5 h-5 text-indigo-500 shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"/></svg>Dedicated account manager</li>
</ul>
<a href="#" class="block text-center py-3 rounded-xl text-sm font-semibold ring-1 ring-slate-200 text-slate-700 hover:ring-indigo-300 hover:text-indigo-600 transition-all">Contact Sales</a>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="ws-testimonials py-20 sm:py-28 bg-gradient-to-b from-slate-50 to-white" aria-label="Customer testimonials">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-2xl mx-auto mb-16">
<p class="text-sm font-semibold text-indigo-600 uppercase tracking-wide mb-3">Testimonials</p>
<h2 class="text-3xl sm:text-4xl font-bold text-slate-900">Loved by teams everywhere</h2>
</div>
<div class="grid md:grid-cols-3 gap-8">
<blockquote class="bg-white rounded-2xl p-8 ring-1 ring-slate-100 shadow-sm">
<div class="flex items-center gap-1 text-amber-400 mb-4" aria-label="5 out of 5 stars">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
</div>
<p class="text-slate-600 leading-relaxed mb-6">"We switched from Jira and our sprint velocity went up 40%. The visual boards make standups a breeze — everyone sees the big picture instantly."</p>
<footer class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center text-sm font-bold" aria-hidden="true">SR</div>
<div>
<p class="text-sm font-semibold text-slate-900">Sarah Rodriguez</p>
<p class="text-xs text-slate-500">VP of Engineering, NovaTech</p>
</div>
</footer>
</blockquote>
<blockquote class="bg-white rounded-2xl p-8 ring-1 ring-slate-100 shadow-sm">
<div class="flex items-center gap-1 text-amber-400 mb-4" aria-label="5 out of 5 stars">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
</div>
<p class="text-slate-600 leading-relaxed mb-6">"The automation rules alone save us 10 hours a week. We set up workflows once and forgot about them — tasks just move themselves now."</p>
<footer class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-sm font-bold" aria-hidden="true">MK</div>
<div>
<p class="text-sm font-semibold text-slate-900">Marcus Kim</p>
<p class="text-xs text-slate-500">Product Lead, Meridian</p>
</div>
</footer>
</blockquote>
<blockquote class="bg-white rounded-2xl p-8 ring-1 ring-slate-100 shadow-sm">
<div class="flex items-center gap-1 text-amber-400 mb-4" aria-label="5 out of 5 stars">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
</div>
<p class="text-slate-600 leading-relaxed mb-6">"Flowboard replaced three tools for us: project tracker, team wiki, and standup bot. Our onboarding time for new hires dropped by half."</p>
<footer class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-violet-100 text-violet-600 flex items-center justify-center text-sm font-bold" aria-hidden="true">AL</div>
<div>
<p class="text-sm font-semibold text-slate-900">Anna Lindberg</p>
<p class="text-xs text-slate-500">CTO, Skyline Studios</p>
</div>
</footer>
</blockquote>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="ws-faq py-20 sm:py-28">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<p class="text-sm font-semibold text-indigo-600 uppercase tracking-wide mb-3">FAQ</p>
<h2 class="text-3xl sm:text-4xl font-bold text-slate-900">Frequently asked questions</h2>
</div>
<div class="space-y-4">
<details class="group rounded-2xl ring-1 ring-slate-200 overflow-hidden" open>
<summary class="flex items-center justify-between cursor-pointer px-6 py-5 text-left font-semibold text-slate-900 hover:bg-slate-50 transition-colors">
Is there really a free plan?
<svg class="w-5 h-5 text-slate-400 transition-transform duration-200 shrink-0 ml-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" d="M19 9l-7 7-7-7"/></svg>
</summary>
<div class="px-6 pb-5 text-slate-500 leading-relaxed">Yes. Our Starter plan is free forever for teams of up to 5 people with 3 project boards. No credit card required, no trial period — it just works.</div>
</details>
<details class="group rounded-2xl ring-1 ring-slate-200 overflow-hidden">
<summary class="flex items-center justify-between cursor-pointer px-6 py-5 text-left font-semibold text-slate-900 hover:bg-slate-50 transition-colors">
Can I import from Jira, Trello, or Asana?
<svg class="w-5 h-5 text-slate-400 transition-transform duration-200 shrink-0 ml-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" d="M19 9l-7 7-7-7"/></svg>
</summary>
<div class="px-6 pb-5 text-slate-500 leading-relaxed">Absolutely. We have one-click importers for Jira, Trello, Asana, Monday.com, and Linear. Your projects, tasks, and attachments transfer seamlessly.</div>
</details>
<details class="group rounded-2xl ring-1 ring-slate-200 overflow-hidden">
<summary class="flex items-center justify-between cursor-pointer px-6 py-5 text-left font-semibold text-slate-900 hover:bg-slate-50 transition-colors">
How does billing work for the Pro plan?
<svg class="w-5 h-5 text-slate-400 transition-transform duration-200 shrink-0 ml-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" d="M19 9l-7 7-7-7"/></svg>
</summary>
<div class="px-6 pb-5 text-slate-500 leading-relaxed">Pro is billed per active user per month. You only pay for team members who log in during the billing period. Annual billing saves you 20%.</div>
</details>
<details class="group rounded-2xl ring-1 ring-slate-200 overflow-hidden">
<summary class="flex items-center justify-between cursor-pointer px-6 py-5 text-left font-semibold text-slate-900 hover:bg-slate-50 transition-colors">
Is my data secure?
<svg class="w-5 h-5 text-slate-400 transition-transform duration-200 shrink-0 ml-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" d="M19 9l-7 7-7-7"/></svg>
</summary>
<div class="px-6 pb-5 text-slate-500 leading-relaxed">We take security seriously. Flowboard is SOC 2 Type II certified, encrypts data at rest and in transit, and offers SSO with SAML for Enterprise customers. We also support data residency in the EU and US.</div>
</details>
<details class="group rounded-2xl ring-1 ring-slate-200 overflow-hidden">
<summary class="flex items-center justify-between cursor-pointer px-6 py-5 text-left font-semibold text-slate-900 hover:bg-slate-50 transition-colors">
Can I cancel anytime?
<svg class="w-5 h-5 text-slate-400 transition-transform duration-200 shrink-0 ml-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" d="M19 9l-7 7-7-7"/></svg>
</summary>
<div class="px-6 pb-5 text-slate-500 leading-relaxed">Yes. There are no long-term contracts. You can cancel your Pro plan anytime and you'll retain access until the end of your billing period. We'll even help you export your data.</div>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="ws-cta py-20 sm:py-28">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="rounded-3xl bg-gradient-to-br from-indigo-600 to-blue-600 px-8 py-16 sm:px-16 sm:py-20 text-center relative overflow-hidden">
<div class="absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,rgba(255,255,255,0.15),transparent_50%)]" aria-hidden="true"></div>
<div class="relative">
<h2 class="text-3xl sm:text-4xl font-bold text-white mb-4">Ready to make your projects flow?</h2>
<p class="text-lg text-indigo-100 max-w-2xl mx-auto mb-8">Join 2,400+ teams who shipped faster with Flowboard. Start your free trial today — no credit card required.</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="#" class="w-full sm:w-auto px-8 py-3.5 rounded-xl bg-white text-indigo-600 font-semibold text-base hover:bg-indigo-50 transition-colors shadow-lg">Start Free Trial</a>
<a href="#" class="w-full sm:w-auto px-8 py-3.5 rounded-xl text-white font-semibold text-base ring-1 ring-white/30 hover:bg-white/10 transition-colors">Schedule a Demo</a>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="ws-footer border-t border-slate-100 bg-slate-50 py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
<div>
<a href="#" class="flex items-center gap-2 text-lg font-bold text-slate-900 mb-4" aria-label="Flowboard home">
<svg class="w-7 h-7" viewBox="0 0 32 32" fill="none" aria-hidden="true"><rect width="32" height="32" rx="8" fill="#4F46E5"/><path d="M10 11h12M10 16h8M10 21h10" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>
Flowboard
</a>
<p class="text-sm text-slate-500 leading-relaxed">Project management that flows. Built for modern teams who value clarity over complexity.</p>
</div>
<nav aria-label="Product links">
<h4 class="text-sm font-semibold text-slate-900 mb-4">Product</h4>
<ul class="space-y-2.5 text-sm text-slate-500">
<li><a href="#features" class="hover:text-indigo-600 transition-colors">Features</a></li>
<li><a href="#pricing" class="hover:text-indigo-600 transition-colors">Pricing</a></li>
<li><a href="#" class="hover:text-indigo-600 transition-colors">Integrations</a></li>
<li><a href="#" class="hover:text-indigo-600 transition-colors">Changelog</a></li>
</ul>
</nav>
<nav aria-label="Company links">
<h4 class="text-sm font-semibold text-slate-900 mb-4">Company</h4>
<ul class="space-y-2.5 text-sm text-slate-500">
<li><a href="#" class="hover:text-indigo-600 transition-colors">About</a></li>
<li><a href="#" class="hover:text-indigo-600 transition-colors">Blog</a></li>
<li><a href="#" class="hover:text-indigo-600 transition-colors">Careers</a></li>
<li><a href="#" class="hover:text-indigo-600 transition-colors">Contact</a></li>
</ul>
</nav>
<nav aria-label="Legal links">
<h4 class="text-sm font-semibold text-slate-900 mb-4">Legal</h4>
<ul class="space-y-2.5 text-sm text-slate-500">
<li><a href="#" class="hover:text-indigo-600 transition-colors">Privacy Policy</a></li>
<li><a href="#" class="hover:text-indigo-600 transition-colors">Terms of Service</a></li>
<li><a href="#" class="hover:text-indigo-600 transition-colors">Security</a></li>
<li><a href="#" class="hover:text-indigo-600 transition-colors">GDPR</a></li>
</ul>
</nav>
</div>
<div class="border-t border-slate-200 pt-8 flex flex-col sm:flex-row items-center justify-between gap-4">
<p class="text-sm text-slate-400">© 2026 Flowboard, Inc. All rights reserved.</p>
<div class="flex items-center gap-4">
<a href="#" class="text-slate-400 hover:text-indigo-600 transition-colors" aria-label="Flowboard on Twitter">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
</a>
<a href="#" class="text-slate-400 hover:text-indigo-600 transition-colors" aria-label="Flowboard on GitHub">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"/></svg>
</a>
<a href="#" class="text-slate-400 hover:text-indigo-600 transition-colors" aria-label="Flowboard on LinkedIn">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
</a>
</div>
</div>
</div>
</footer>
<script>
const btn = document.getElementById('mobile-menu-btn');
const menu = document.getElementById('mobile-menu');
btn.addEventListener('click', () => {
const open = !menu.classList.contains('hidden');
menu.classList.toggle('hidden');
btn.setAttribute('aria-expanded', String(!open));
});
menu.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
menu.classList.add('hidden');
btn.setAttribute('aria-expanded', 'false');
});
});
</script>
</body>
</html>Complete SaaS landing page with modern design language. Features clean typography, generous whitespace, and a professional blue/indigo accent palette.