ai saas landing-page dark-theme pricing marketing bold
AI Tool Landing
Bold AI SaaS landing page with dark gradient theme, feature grid, pricing, and testimonials.
bold Responsive
Live Preview
Sections
navbarherofeaturespricingtestimonialsctafooter
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>Synth AI — Your Intelligent Writing Partner</title>
<meta name="description" content="AI-powered writing assistant that helps you create better content faster." />
<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">
<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" />
<style>
body { font-family: 'Inter', sans-serif; }
/* Brand tokens */
:root {
--ws-color-accent: oklch(0.58 0.22 295);
--ws-color-accent-light: oklch(0.68 0.18 295);
--ws-color-accent-dim: oklch(0.58 0.22 295 / 0.1);
--ws-color-accent-border: oklch(0.58 0.22 295 / 0.2);
}
/* text/gradient — animated variant for hero */
.text-gradient-animated {
--text-gradient-from: oklch(0.7 0.16 295);
--text-gradient-mid: oklch(0.68 0.15 230);
--text-gradient-to: oklch(0.72 0.16 160);
--text-gradient-speed: 5s;
background: linear-gradient(
135deg,
var(--text-gradient-from) 0%,
var(--text-gradient-mid) 50%,
var(--text-gradient-to) 100%
);
background-size: 200% 200%;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
animation: text-gradient-shift var(--text-gradient-speed) ease infinite;
}
@keyframes text-gradient-shift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
.text-gradient-animated { animation: none; background-size: 100% 100%; }
}
/* interactions/hover-lift */
.hover-lift {
--lift-distance: -4px;
--lift-shadow: 0 8px 24px oklch(0 0 0 / 0.3);
--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-gray-950 text-gray-100 antialiased">
<!-- Navbar -->
<nav class="ws-navbar sticky top-0 z-50 bg-gray-950/80 backdrop-blur-xl border-b border-gray-800/50" 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-lg font-bold text-white" aria-label="Synth AI home">
<svg class="w-7 h-7" viewBox="0 0 28 28" fill="none" aria-hidden="true" style="color: var(--ws-color-accent-light);"><rect width="28" height="28" rx="8" fill="currentColor" opacity="0.2"/><path d="M9 14l4 4 6-8" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
Synth AI
</a>
<div class="hidden md:flex items-center gap-8 text-sm font-medium text-gray-400">
<a href="#features" class="hover:text-white transition-colors">Features</a>
<a href="#pricing" class="hover:text-white transition-colors">Pricing</a>
<a href="#testimonials" class="hover:text-white transition-colors">Testimonials</a>
</div>
<div class="hidden md:flex items-center gap-3">
<a href="#" class="text-sm font-medium text-gray-400 hover:text-white transition-colors">Sign in</a>
<a href="#" class="hover-lift text-sm font-semibold px-5 py-2 rounded-lg text-white transition-colors" style="background: var(--ws-color-accent);">Get Started Free</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="ws-hero relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-b from-violet-600/10 via-transparent to-transparent"></div>
<div class="relative max-w-4xl mx-auto px-4 pt-24 pb-20 text-center">
<span class="inline-flex items-center gap-2 px-3 py-1 text-xs font-medium rounded-full border mb-6" style="background: var(--ws-color-accent-dim); color: oklch(0.75 0.14 295); border-color: var(--ws-color-accent-border);">
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 12 12"><circle cx="6" cy="6" r="6"/></svg>
Now with GPT-4o support
</span>
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight">
Write <span class="text-gradient-animated">10x faster</span> with<br/>AI that understands you
</h1>
<p class="mt-6 text-lg text-gray-400 max-w-2xl mx-auto">Synth AI is your intelligent writing partner. Draft blog posts, emails, ad copy, and technical docs in seconds — with your voice, your style.</p>
<!-- Fake Chat Input -->
<div class="mt-10 max-w-xl mx-auto">
<div class="flex items-center gap-3 bg-gray-800/80 rounded-2xl px-5 py-4 border border-gray-700/50">
<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" style="color: var(--ws-color-accent-light);"><path stroke-linecap="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
<span class="text-sm text-gray-500">Write a product launch email for our new AI feature...</span>
<button class="ml-auto px-4 py-2 text-sm font-semibold text-white rounded-xl shrink-0 transition-colors" style="background: var(--ws-color-accent);">Generate</button>
</div>
</div>
<div class="mt-8 flex items-center justify-center gap-6 text-sm text-gray-500">
<span class="flex items-center gap-1.5"><svg class="w-4 h-4 text-emerald-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg> Free 14-day trial</span>
<span class="flex items-center gap-1.5"><svg class="w-4 h-4 text-emerald-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg> No credit card</span>
<span class="flex items-center gap-1.5"><svg class="w-4 h-4 text-emerald-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg> Cancel anytime</span>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="ws-features py-24 border-t border-gray-800/50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-white">Everything you need to write better</h2>
<p class="mt-4 text-gray-400 max-w-xl mx-auto">Powerful AI features designed for professional writers, marketers, and teams.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="hover-lift bg-gray-900/50 rounded-2xl border border-gray-800 p-8">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: var(--ws-color-accent-dim);">
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" style="color: var(--ws-color-accent-light);"><path stroke-linecap="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
</div>
<h3 class="text-lg font-semibold text-white">Instant Drafts</h3>
<p class="mt-2 text-sm text-gray-400 leading-relaxed">Generate complete first drafts from a single prompt. Blog posts, emails, landing pages — in seconds.</p>
</div>
<div class="hover-lift bg-gray-900/50 rounded-2xl border border-gray-800 p-8">
<div class="w-10 h-10 rounded-lg bg-blue-500/10 flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-blue-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"/></svg>
</div>
<h3 class="text-lg font-semibold text-white">Tone Matching</h3>
<p class="mt-2 text-sm text-gray-400 leading-relaxed">Upload examples of your writing and Synth learns your unique voice, style, and vocabulary.</p>
</div>
<div class="hover-lift bg-gray-900/50 rounded-2xl border border-gray-800 p-8">
<div class="w-10 h-10 rounded-lg bg-emerald-500/10 flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-emerald-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
</div>
<h3 class="text-lg font-semibold text-white">Fact Checking</h3>
<p class="mt-2 text-sm text-gray-400 leading-relaxed">Built-in verification flags claims that need sources, reducing hallucinations and misinformation.</p>
</div>
<div class="hover-lift bg-gray-900/50 rounded-2xl border border-gray-800 p-8">
<div class="w-10 h-10 rounded-lg bg-amber-500/10 flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-amber-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
</div>
<h3 class="text-lg font-semibold text-white">Rewrite Engine</h3>
<p class="mt-2 text-sm text-gray-400 leading-relaxed">Select any text and get instant alternatives — shorter, longer, more formal, more casual, or simplified.</p>
</div>
<div class="hover-lift bg-gray-900/50 rounded-2xl border border-gray-800 p-8">
<div class="w-10 h-10 rounded-lg bg-rose-500/10 flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-rose-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/></svg>
</div>
<h3 class="text-lg font-semibold text-white">30+ Languages</h3>
<p class="mt-2 text-sm text-gray-400 leading-relaxed">Write and translate content across 30+ languages with native-quality output and cultural context.</p>
</div>
<div class="hover-lift bg-gray-900/50 rounded-2xl border border-gray-800 p-8">
<div class="w-10 h-10 rounded-lg bg-cyan-500/10 flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-cyan-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
</div>
<h3 class="text-lg font-semibold text-white">Team Workspaces</h3>
<p class="mt-2 text-sm text-gray-400 leading-relaxed">Shared templates, brand guidelines, and collaborative editing for marketing and content teams.</p>
</div>
</div>
</div>
</section>
<!-- Pricing -->
<section id="pricing" class="ws-pricing py-24 border-t border-gray-800/50">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-white">Simple, transparent pricing</h2>
<p class="mt-4 text-gray-400">Start free. Upgrade when you need more power.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="hover-lift bg-gray-900/50 rounded-2xl border border-gray-800 p-8">
<h3 class="text-lg font-semibold text-white">Starter</h3>
<p class="mt-1 text-sm text-gray-400">For individuals getting started</p>
<p class="mt-6"><span class="text-4xl font-bold text-white">$0</span><span class="text-gray-500">/month</span></p>
<ul class="mt-8 space-y-3 text-sm text-gray-400">
<li class="flex items-center gap-2"><svg class="w-4 h-4 text-emerald-400 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg> 10,000 words/month</li>
<li class="flex items-center gap-2"><svg class="w-4 h-4 text-emerald-400 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg> 5 tone profiles</li>
<li class="flex items-center gap-2"><svg class="w-4 h-4 text-emerald-400 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg> Basic templates</li>
</ul>
<a href="#" class="mt-8 block text-center px-5 py-3 text-sm font-semibold rounded-lg border border-gray-700 text-white hover:bg-gray-800 transition-colors">Get Started</a>
</div>
<div class="hover-lift bg-gray-900/50 rounded-2xl border-2 p-8 relative" style="border-color: var(--ws-color-accent);">
<span class="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-0.5 text-xs font-semibold text-white rounded-full" style="background: var(--ws-color-accent);">Most Popular</span>
<h3 class="text-lg font-semibold text-white">Pro</h3>
<p class="mt-1 text-sm text-gray-400">For professionals and creators</p>
<p class="mt-6"><span class="text-4xl font-bold text-white">$29</span><span class="text-gray-500">/month</span></p>
<ul class="mt-8 space-y-3 text-sm text-gray-400">
<li class="flex items-center gap-2"><svg class="w-4 h-4 text-emerald-400 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg> Unlimited words</li>
<li class="flex items-center gap-2"><svg class="w-4 h-4 text-emerald-400 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg> GPT-4o model access</li>
<li class="flex items-center gap-2"><svg class="w-4 h-4 text-emerald-400 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg> Unlimited tone profiles</li>
<li class="flex items-center gap-2"><svg class="w-4 h-4 text-emerald-400 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg> Fact checking</li>
<li class="flex items-center gap-2"><svg class="w-4 h-4 text-emerald-400 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg> Priority support</li>
</ul>
<a href="#" class="mt-8 block text-center px-5 py-3 text-sm font-semibold rounded-lg text-white transition-colors" style="background: var(--ws-color-accent);">Start Free Trial</a>
</div>
<div class="hover-lift bg-gray-900/50 rounded-2xl border border-gray-800 p-8">
<h3 class="text-lg font-semibold text-white">Team</h3>
<p class="mt-1 text-sm text-gray-400">For teams and organizations</p>
<p class="mt-6"><span class="text-4xl font-bold text-white">$79</span><span class="text-gray-500">/month</span></p>
<ul class="mt-8 space-y-3 text-sm text-gray-400">
<li class="flex items-center gap-2"><svg class="w-4 h-4 text-emerald-400 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg> Everything in Pro</li>
<li class="flex items-center gap-2"><svg class="w-4 h-4 text-emerald-400 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg> 5 team members</li>
<li class="flex items-center gap-2"><svg class="w-4 h-4 text-emerald-400 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg> Shared workspaces</li>
<li class="flex items-center gap-2"><svg class="w-4 h-4 text-emerald-400 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg> Brand guidelines</li>
<li class="flex items-center gap-2"><svg class="w-4 h-4 text-emerald-400 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg> API access</li>
</ul>
<a href="#" class="mt-8 block text-center px-5 py-3 text-sm font-semibold rounded-lg border border-gray-700 text-white hover:bg-gray-800 transition-colors">Contact Sales</a>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section id="testimonials" class="ws-testimonials py-24 border-t border-gray-800/50">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-white">Loved by 50,000+ writers</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="hover-lift bg-gray-900/50 rounded-2xl border border-gray-800 p-6">
<div class="flex items-center gap-1 mb-4">
<svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><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-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><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-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><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-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><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-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><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-sm text-gray-300 leading-relaxed">"Synth replaced three tools in my workflow. The tone matching alone saved me hours of editing every week."</p>
<div class="mt-4 flex items-center gap-3">
<div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold" style="background: var(--ws-color-accent-dim); color: var(--ws-color-accent-light);">SR</div>
<div>
<p class="text-sm font-medium text-white">Sarah Reed</p>
<p class="text-xs text-gray-500">Content Lead, Stripe</p>
</div>
</div>
</div>
<div class="hover-lift bg-gray-900/50 rounded-2xl border border-gray-800 p-6">
<div class="flex items-center gap-1 mb-4">
<svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><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-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><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-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><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-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><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-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><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-sm text-gray-300 leading-relaxed">"We publish 40 blog posts a month. Synth AI cut our drafting time by 70% without sacrificing quality."</p>
<div class="mt-4 flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center text-xs font-bold text-blue-400">MK</div>
<div>
<p class="text-sm font-medium text-white">Marcus Klein</p>
<p class="text-xs text-gray-500">VP Marketing, HubSpot</p>
</div>
</div>
</div>
<div class="hover-lift bg-gray-900/50 rounded-2xl border border-gray-800 p-6">
<div class="flex items-center gap-1 mb-4">
<svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><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-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><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-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><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-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><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-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><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-sm text-gray-300 leading-relaxed">"The fact-checking feature alone justifies the price. I can trust the output without hours of manual verification."</p>
<div class="mt-4 flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-emerald-500/20 flex items-center justify-center text-xs font-bold text-emerald-400">LP</div>
<div>
<p class="text-sm font-medium text-white">Laura Park</p>
<p class="text-xs text-gray-500">Freelance Journalist</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="ws-cta py-24 border-t border-gray-800/50">
<div class="max-w-3xl mx-auto px-4 text-center">
<h2 class="text-3xl font-bold text-white">Start writing smarter today</h2>
<p class="mt-4 text-gray-400">Join 50,000+ writers who use Synth AI to produce better content, faster.</p>
<a href="#" class="hover-lift mt-8 inline-block px-8 py-3.5 text-sm font-semibold rounded-lg text-white transition-colors" style="background: var(--ws-color-accent); box-shadow: 0 8px 24px oklch(0.58 0.22 295 / 0.25);">Get Started Free</a>
</div>
</section>
<!-- Footer -->
<footer class="ws-footer border-t border-gray-800/50 bg-gray-950">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
<div class="flex items-center gap-2">
<svg class="w-6 h-6" viewBox="0 0 28 28" fill="none" aria-hidden="true" style="color: var(--ws-color-accent-light);"><rect width="28" height="28" rx="8" fill="currentColor" opacity="0.2"/><path d="M9 14l4 4 6-8" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
<span class="text-sm font-bold text-white">Synth AI</span>
</div>
<div class="flex flex-wrap gap-6 text-sm text-gray-500">
<a href="#" class="hover:text-white transition-colors">Privacy</a>
<a href="#" class="hover:text-white transition-colors">Terms</a>
<a href="#" class="hover:text-white transition-colors">Blog</a>
<a href="#" class="hover:text-white transition-colors">Twitter</a>
<a href="#" class="hover:text-white transition-colors">Contact</a>
</div>
</div>
<p class="mt-8 text-xs text-gray-600">© 2026 Synth AI Inc. All rights reserved.</p>
</div>
</footer>
</body>
</html>
Bold AI SaaS landing page with dark gradient theme. Features a hero with fake chat input, six-feature grid, three-tier pricing, testimonials, and conversion CTA. Violet accent on gray-950 background.