Project: Build a SaaS Landing Page with Tailwind CSS
Project Requirements
Build a complete SaaS product landing page that includes a navbar, hero section, feature showcase, pricing plans, testimonials, and footer, with dark mode support and mobile-to-desktop responsiveness.
Technical Requirements
- Tailwind CSS v4 CDN
- Responsive design (mobile-first)
- Dark mode (
dark:prefix) - Flexbox + Grid hybrid layout
- Interactive states and transitions
Step-by-Step Implementation
Example: Step 1 - Responsive Navbar
The navbar includes a Logo, menu links, and a CTA button. On mobile, it collapses into a hamburger menu.
HTML
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CloudFlow - Smart Workflow Platform</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class'
}
</script>
</head>
<body class="bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100 transition-colors">
<!-- Navbar -->
<nav class="fixed top-0 w-full bg-white/80 dark:bg-gray-950/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-800 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<!-- Logo -->
<div class="flex items-center gap-2">
<div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
<span class="text-white font-bold text-sm">CF</span>
</div>
<span class="text-xl font-bold">CloudFlow</span>
</div>
<!-- Desktop menu -->
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Features</a>
<a href="#pricing" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Pricing</a>
<a href="#testimonials" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Testimonials</a>
</div>
<!-- CTA buttons -->
<div class="hidden md:flex items-center gap-4">
<button id="themeToggle" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
<span class="dark:hidden">🌙</span>
<span class="hidden dark:inline">☀️</span>
</button>
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Sign In</a>
<a href="#" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">Free Trial</a>
</div>
<!-- Mobile menu button -->
<button id="menuToggle" class="md:hidden p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
</div>
</div>
<!-- Mobile menu -->
<div id="mobileMenu" class="hidden md:hidden border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950">
<div class="px-4 py-4 space-y-3">
<a href="#features" class="block py-2 text-gray-600 dark:text-gray-400 hover:text-blue-600">Features</a>
<a href="#pricing" class="block py-2 text-gray-600 dark:text-gray-400 hover:text-blue-600">Pricing</a>
<a href="#testimonials" class="block py-2 text-gray-600 dark:text-gray-400 hover:text-blue-600">Testimonials</a>
<div class="pt-3 border-t border-gray-200 dark:border-gray-800">
<a href="#" class="block w-full text-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Free Trial</a>
</div>
</div>
</div>
</nav>
<script>
const themeToggle = document.getElementById('themeToggle');
themeToggle?.addEventListener('click', () => {
document.documentElement.classList.toggle('dark');
});
const menuToggle = document.getElementById('menuToggle');
const mobileMenu = document.getElementById('mobileMenu');
menuToggle?.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
</script>
</body>
</html>
Example: Step 2 - Hero Section
A large headline with a subtitle, dual CTA buttons, and feature icon list.
HTML
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CloudFlow - Smart Workflow Platform</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = { darkMode: 'class' }
</script>
</head>
<body class="bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100 transition-colors">
<!-- Hero section -->
<section class="pt-32 pb-20 px-4">
<div class="max-w-7xl mx-auto text-center">
<!-- Badge -->
<div class="inline-flex items-center gap-2 px-4 py-1.5 bg-blue-50 dark:bg-blue-950 text-blue-600 dark:text-blue-400 rounded-full text-sm mb-8">
<span class="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></span>
New version v3.0 is live
</div>
<!-- Headline -->
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight mb-6">
<span class="text-blue-600 dark:text-blue-400">Automate</span> your workflows
<br class="hidden sm:block">
Unleash team productivity
</h1>
<!-- Subtitle -->
<p class="text-lg sm:text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto mb-10">
CloudFlow helps you connect 200+ apps, visually orchestrate workflows, and automate business processes without writing a single line of code.
</p>
<!-- CTA buttons -->
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
<a href="#" class="w-full sm:w-auto px-8 py-3.5 bg-blue-600 text-white text-lg rounded-xl hover:bg-blue-700 hover:shadow-lg hover:shadow-blue-500/25 transition-all">
Get Started Free
</a>
<a href="#" class="w-full sm:w-auto px-8 py-3.5 border border-gray-300 dark:border-gray-700 text-lg rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800 transition-all flex items-center justify-center gap-2">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"/>
</svg>
Watch Demo
</a>
</div>
<!-- Feature icons -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-3xl mx-auto">
<div class="flex flex-col items-center gap-2">
<div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-xl flex items-center justify-center">
<svg class="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
</div>
<span class="text-sm text-gray-600 dark:text-gray-400">Lightning Fast</span>
</div>
<div class="flex flex-col items-center gap-2">
<div class="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-xl flex items-center justify-center">
<svg class="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
<span class="text-sm text-gray-600 dark:text-gray-400">Secure & Reliable</span>
</div>
<div class="flex flex-col items-center gap-2">
<div class="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-xl flex items-center justify-center">
<svg class="w-6 h-6 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
<span class="text-sm text-gray-600 dark:text-gray-400">200+ Integrations</span>
</div>
<div class="flex flex-col items-center gap-2">
<div class="w-12 h-12 bg-orange-100 dark:bg-orange-900 rounded-xl flex items-center justify-center">
<svg class="w-6 h-6 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
</svg>
</div>
<span class="text-sm text-gray-600 dark:text-gray-400">Data Insights</span>
</div>
</div>
</div>
</section>
</body>
</html>
Example: Step 3 - Feature Cards
Use a Grid layout to display 4 feature cards with icons and descriptions.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Feature Cards</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = { darkMode: 'class' }
</script>
</head>
<body class="bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100">
<section id="features" class="py-20 px-4">
<div class="max-w-7xl mx-auto">
<!-- Section heading -->
<div class="text-center mb-16">
<h2 class="text-3xl sm:text-4xl font-bold mb-4">Why Choose CloudFlow</h2>
<p class="text-gray-600 dark:text-gray-400 max-w-xl mx-auto">Powerful features to make your workflows more efficient</p>
</div>
<!-- Feature card grid -->
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Card 1 -->
<div class="group p-6 bg-gray-50 dark:bg-gray-900 rounded-2xl hover:bg-white dark:hover:bg-gray-800 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
<div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-xl flex items-center justify-center mb-4 group-hover:bg-blue-600 transition-colors">
<svg class="w-6 h-6 text-blue-600 dark:text-blue-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/>
</svg>
</div>
<h3 class="text-lg font-semibold mb-2">Visual Builder</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Drag-and-drop interface to build complex workflows without writing code</p>
</div>
<!-- Card 2 -->
<div class="group p-6 bg-gray-50 dark:bg-gray-900 rounded-2xl hover:bg-white dark:hover:bg-gray-800 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
<div class="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-xl flex items-center justify-center mb-4 group-hover:bg-green-600 transition-colors">
<svg class="w-6 h-6 text-green-600 dark:text-green-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
</svg>
</div>
<h3 class="text-lg font-semibold mb-2">Team Collaboration</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Real-time co-editing, permission management, and shared workflow ownership</p>
</div>
<!-- Card 3 -->
<div class="group p-6 bg-gray-50 dark:bg-gray-900 rounded-2xl hover:bg-white dark:hover:bg-gray-800 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
<div class="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-xl flex items-center justify-center mb-4 group-hover:bg-purple-600 transition-colors">
<svg class="w-6 h-6 text-purple-600 dark:text-purple-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
</svg>
</div>
<h3 class="text-lg font-semibold mb-2">Smart Analytics</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Built-in analytics dashboard to monitor workflow performance in real time</p>
</div>
<!-- Card 4 -->
<div class="group p-6 bg-gray-50 dark:bg-gray-900 rounded-2xl hover:bg-white dark:hover:bg-gray-800 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
<div class="w-12 h-12 bg-orange-100 dark:bg-orange-900 rounded-xl flex items-center justify-center mb-4 group-hover:bg-orange-600 transition-colors">
<svg class="w-6 h-6 text-orange-600 dark:text-orange-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
</svg>
</div>
<h3 class="text-lg font-semibold mb-2">Enterprise Security</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">SOC 2 certified, end-to-end encryption, meeting enterprise-grade compliance requirements</p>
</div>
</div>
</div>
</section>
</body>
</html>
Example: Step 4 - Pricing Table
3 pricing plan cards with the middle plan highlighted as recommended.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pricing Table</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = { darkMode: 'class' }
</script>
</head>
<body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
<section id="pricing" class="py-20 px-4">
<div class="max-w-7xl mx-auto">
<!-- Section heading -->
<div class="text-center mb-16">
<h2 class="text-3xl sm:text-4xl font-bold mb-4">Simple, Transparent Pricing</h2>
<p class="text-gray-600 dark:text-gray-400 max-w-xl mx-auto">Choose the plan that fits your team. Upgrade or downgrade anytime.</p>
</div>
<!-- Pricing cards -->
<div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
<!-- Free plan -->
<div class="bg-white dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-semibold mb-2">Free</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-6">For individuals getting started</p>
<div class="mb-6">
<span class="text-4xl font-bold">$0</span>
<span class="text-gray-500">/mo</span>
</div>
<ul class="space-y-3 mb-8">
<li class="flex items-center gap-3 text-sm">
<svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
5 workflows
</li>
<li class="flex items-center gap-3 text-sm">
<svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
1,000 runs/mo
</li>
<li class="flex items-center gap-3 text-sm">
<svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
Community support
</li>
</ul>
<a href="#" class="block w-full py-3 text-center border border-gray-300 dark:border-gray-600 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
Get Started
</a>
</div>
<!-- Pro plan (recommended) -->
<div class="relative bg-white dark:bg-gray-800 rounded-2xl p-8 border-2 border-blue-600 shadow-xl shadow-blue-600/10 scale-105">
<div class="absolute -top-4 left-1/2 -translate-x-1/2 px-4 py-1 bg-blue-600 text-white text-sm rounded-full">
Most Popular
</div>
<h3 class="text-lg font-semibold mb-2">Pro</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-6">For growing teams</p>
<div class="mb-6">
<span class="text-4xl font-bold">$19</span>
<span class="text-gray-500">/mo</span>
</div>
<ul class="space-y-3 mb-8">
<li class="flex items-center gap-3 text-sm">
<svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
Unlimited workflows
</li>
<li class="flex items-center gap-3 text-sm">
<svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
50,000 runs/mo
</li>
<li class="flex items-center gap-3 text-sm">
<svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
Priority email support
</li>
<li class="flex items-center gap-3 text-sm">
<svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
Advanced analytics
</li>
</ul>
<a href="#" class="block w-full py-3 text-center bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition-colors">
Upgrade Now
</a>
</div>
<!-- Enterprise plan -->
<div class="bg-white dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-semibold mb-2">Enterprise</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-6">For large organizations</p>
<div class="mb-6">
<span class="text-4xl font-bold">$49</span>
<span class="text-gray-500">/mo</span>
</div>
<ul class="space-y-3 mb-8">
<li class="flex items-center gap-3 text-sm">
<svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
Everything in Pro
</li>
<li class="flex items-center gap-3 text-sm">
<svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
Unlimited runs
</li>
<li class="flex items-center gap-3 text-sm">
<svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
Dedicated account manager
</li>
<li class="flex items-center gap-3 text-sm">
<svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
SLA guarantee
</li>
</ul>
<a href="#" class="block w-full py-3 text-center border border-gray-300 dark:border-gray-600 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
Contact Sales
</a>
</div>
</div>
</div>
</section>
</body>
</html>
Example: Step 5 - Testimonials and Footer
Show social proof (user testimonials) and a complete footer with links.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testimonials and Footer</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = { darkMode: 'class' }
</script>
</head>
<body class="bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100">
<!-- Testimonials -->
<section id="testimonials" class="py-20 px-4 bg-gray-50 dark:bg-gray-900">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl sm:text-4xl font-bold mb-4">Trusted by Teams Everywhere</h2>
<p class="text-gray-600 dark:text-gray-400">Over 10,000 companies choose CloudFlow</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<!-- Testimonial 1 -->
<div class="bg-white dark:bg-gray-800 p-6 rounded-2xl">
<div class="flex items-center gap-1 mb-4">
<span class="text-yellow-400">★★★★★</span>
</div>
<p class="text-gray-600 dark:text-gray-400 mb-6">"CloudFlow saved us 20 hours of repetitive work every week. The team can finally focus on what really matters."</p>
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center font-semibold text-blue-600">S</div>
<div>
<p class="font-medium text-sm">Sarah Chen</p>
<p class="text-gray-500 text-xs">CTO, TechCorp</p>
</div>
</div>
</div>
<!-- Testimonial 2 -->
<div class="bg-white dark:bg-gray-800 p-6 rounded-2xl">
<div class="flex items-center gap-1 mb-4">
<span class="text-yellow-400">★★★★★</span>
</div>
<p class="text-gray-600 dark:text-gray-400 mb-6">"The visual builder is so intuitive that even non-technical team members can jump right in. It's a game changer."</p>
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center font-semibold text-green-600">M</div>
<div>
<p class="font-medium text-sm">Michael Rivera</p>
<p class="text-gray-500 text-xs">VP of Operations, ShopDirect</p>
</div>
</div>
</div>
<!-- Testimonial 3 -->
<div class="bg-white dark:bg-gray-800 p-6 rounded-2xl">
<div class="flex items-center gap-1 mb-4">
<span class="text-yellow-400">★★★★★</span>
</div>
<p class="text-gray-600 dark:text-gray-400 mb-6">"The enterprise-grade compliance features gave us the confidence to migrate our core processes to the cloud. Highly recommended."</p>
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center font-semibold text-purple-600">J</div>
<div>
<p class="font-medium text-sm">James Walker</p>
<p class="text-gray-500 text-xs">IT Director, FinEdge Capital</p>
</div>
</div>
</div>
</div>
<!-- Brand logos -->
<div class="mt-16 text-center">
<p class="text-gray-500 text-sm mb-6">Trusted by industry leaders</p>
<div class="flex flex-wrap items-center justify-center gap-8 opacity-50">
<span class="text-2xl font-bold text-gray-400">TechCorp</span>
<span class="text-2xl font-bold text-gray-400">DataFlow</span>
<span class="text-2xl font-bold text-gray-400">CloudBase</span>
<span class="text-2xl font-bold text-gray-400">NetPro</span>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 dark:bg-gray-950 text-gray-400 py-16 px-4">
<div class="max-w-7xl mx-auto">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-12">
<!-- Product -->
<div>
<h4 class="text-white font-semibold mb-4">Product</h4>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-white transition-colors">Features</a></li>
<li><a href="#" class="hover:text-white transition-colors">Pricing</a></li>
<li><a href="#" class="hover:text-white transition-colors">Integrations</a></li>
<li><a href="#" class="hover:text-white transition-colors">Changelog</a></li>
</ul>
</div>
<!-- Resources -->
<div>
<h4 class="text-white font-semibold mb-4">Resources</h4>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-white transition-colors">Documentation</a></li>
<li><a href="#" class="hover:text-white transition-colors">API</a></li>
<li><a href="#" class="hover:text-white transition-colors">Tutorials</a></li>
<li><a href="#" class="hover:text-white transition-colors">Blog</a></li>
</ul>
</div>
<!-- Company -->
<div>
<h4 class="text-white font-semibold mb-4">Company</h4>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-white transition-colors">About Us</a></li>
<li><a href="#" class="hover:text-white transition-colors">Careers</a></li>
<li><a href="#" class="hover:text-white transition-colors">Contact</a></li>
</ul>
</div>
<!-- Legal -->
<div>
<h4 class="text-white font-semibold mb-4">Legal</h4>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-white transition-colors">Privacy Policy</a></li>
<li><a href="#" class="hover:text-white transition-colors">Terms of Service</a></li>
<li><a href="#" class="hover:text-white transition-colors">Security & Compliance</a></li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row items-center justify-between gap-4">
<div class="flex items-center gap-2">
<div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
<span class="text-white font-bold text-sm">CF</span>
</div>
<span class="text-white font-bold">CloudFlow</span>
</div>
<p class="text-sm">© 2025 CloudFlow. All rights reserved.</p>
</div>
</div>
</footer>
</body>
</html>
Example: Complete Landing Page
Combine all the sections above into a single landing page file:
HTML
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CloudFlow - Smart Workflow Automation Platform</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = { darkMode: 'class' }
</script>
</head>
<body class="bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100 transition-colors">
<!-- Navbar -->
<nav class="fixed top-0 w-full bg-white/80 dark:bg-gray-950/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-800 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center gap-2">
<div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
<span class="text-white font-bold text-sm">CF</span>
</div>
<span class="text-xl font-bold">CloudFlow</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Features</a>
<a href="#pricing" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Pricing</a>
<a href="#testimonials" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Testimonials</a>
</div>
<div class="hidden md:flex items-center gap-4">
<button id="themeToggle" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
<span class="dark:hidden">🌙</span>
<span class="hidden dark:inline">☀️</span>
</button>
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 transition-colors">Sign In</a>
<a href="#" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">Free Trial</a>
</div>
<button id="menuToggle" class="md:hidden p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
</div>
</div>
<div id="mobileMenu" class="hidden md:hidden border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950">
<div class="px-4 py-4 space-y-3">
<a href="#features" class="block py-2 text-gray-600 dark:text-gray-400">Features</a>
<a href="#pricing" class="block py-2 text-gray-600 dark:text-gray-400">Pricing</a>
<a href="#testimonials" class="block py-2 text-gray-600 dark:text-gray-400">Testimonials</a>
<div class="pt-3 border-t border-gray-200 dark:border-gray-800">
<a href="#" class="block w-full text-center px-4 py-2 bg-blue-600 text-white rounded-lg">Free Trial</a>
</div>
</div>
</div>
</nav>
<!-- Hero -->
<section class="pt-32 pb-20 px-4">
<div class="max-w-7xl mx-auto text-center">
<div class="inline-flex items-center gap-2 px-4 py-1.5 bg-blue-50 dark:bg-blue-950 text-blue-600 dark:text-blue-400 rounded-full text-sm mb-8">
<span class="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></span>
New version v3.0 is live
</div>
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight mb-6">
<span class="text-blue-600 dark:text-blue-400">Automate</span> your workflows
<br class="hidden sm:block">Unleash team productivity
</h1>
<p class="text-lg sm:text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto mb-10">
CloudFlow helps you connect 200+ apps, visually orchestrate workflows, and automate business processes without writing a single line of code.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
<a href="#" class="w-full sm:w-auto px-8 py-3.5 bg-blue-600 text-white text-lg rounded-xl hover:bg-blue-700 hover:shadow-lg hover:shadow-blue-500/25 transition-all">Get Started Free</a>
<a href="#" class="w-full sm:w-auto px-8 py-3.5 border border-gray-300 dark:border-gray-700 text-lg rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800 transition-all flex items-center justify-center gap-2">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"/></svg>
Watch Demo
</a>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-3xl mx-auto">
<div class="flex flex-col items-center gap-2">
<div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-xl flex items-center justify-center"><svg class="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg></div>
<span class="text-sm text-gray-600 dark:text-gray-400">Lightning Fast</span>
</div>
<div class="flex flex-col items-center gap-2">
<div class="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-xl flex items-center justify-center"><svg class="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
<span class="text-sm text-gray-600 dark:text-gray-400">Secure & Reliable</span>
</div>
<div class="flex flex-col items-center gap-2">
<div class="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-xl flex items-center justify-center"><svg class="w-6 h-6 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
<span class="text-sm text-gray-600 dark:text-gray-400">200+ Integrations</span>
</div>
<div class="flex flex-col items-center gap-2">
<div class="w-12 h-12 bg-orange-100 dark:bg-orange-900 rounded-xl flex items-center justify-center"><svg class="w-6 h-6 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
<span class="text-sm text-gray-600 dark:text-gray-400">Data Insights</span>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-20 px-4">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl sm:text-4xl font-bold mb-4">Why Choose CloudFlow</h2>
<p class="text-gray-600 dark:text-gray-400 max-w-xl mx-auto">Powerful features to make your workflows more efficient</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="group p-6 bg-gray-50 dark:bg-gray-900 rounded-2xl hover:bg-white dark:hover:bg-gray-800 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
<div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-xl flex items-center justify-center mb-4 group-hover:bg-blue-600 transition-colors"><svg class="w-6 h-6 text-blue-600 dark:text-blue-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/></svg></div>
<h3 class="text-lg font-semibold mb-2">Visual Builder</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Drag-and-drop interface to build complex workflows without writing code</p>
</div>
<div class="group p-6 bg-gray-50 dark:bg-gray-900 rounded-2xl hover:bg-white dark:hover:bg-gray-800 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
<div class="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-xl flex items-center justify-center mb-4 group-hover:bg-green-600 transition-colors"><svg class="w-6 h-6 text-green-600 dark:text-green-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
<h3 class="text-lg font-semibold mb-2">Team Collaboration</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Real-time co-editing, permission management, and shared workflow ownership</p>
</div>
<div class="group p-6 bg-gray-50 dark:bg-gray-900 rounded-2xl hover:bg-white dark:hover:bg-gray-800 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
<div class="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-xl flex items-center justify-center mb-4 group-hover:bg-purple-600 transition-colors"><svg class="w-6 h-6 text-purple-600 dark:text-purple-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
<h3 class="text-lg font-semibold mb-2">Smart Analytics</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Built-in analytics dashboard to monitor workflow performance in real time</p>
</div>
<div class="group p-6 bg-gray-50 dark:bg-gray-900 rounded-2xl hover:bg-white dark:hover:bg-gray-800 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
<div class="w-12 h-12 bg-orange-100 dark:bg-orange-900 rounded-xl flex items-center justify-center mb-4 group-hover:bg-orange-600 transition-colors"><svg class="w-6 h-6 text-orange-600 dark:text-orange-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg></div>
<h3 class="text-lg font-semibold mb-2">Enterprise Security</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">SOC 2 certified, end-to-end encryption, meeting enterprise-grade compliance requirements</p>
</div>
</div>
</div>
</section>
<!-- Pricing -->
<section id="pricing" class="py-20 px-4 bg-gray-50 dark:bg-gray-900">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl sm:text-4xl font-bold mb-4">Simple, Transparent Pricing</h2>
<p class="text-gray-600 dark:text-gray-400 max-w-xl mx-auto">Choose the plan that fits your team. Upgrade or downgrade anytime.</p>
</div>
<div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
<div class="bg-white dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-semibold mb-2">Free</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-6">For individuals getting started</p>
<div class="mb-6"><span class="text-4xl font-bold">$0</span><span class="text-gray-500">/mo</span></div>
<ul class="space-y-3 mb-8">
<li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>5 workflows</li>
<li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>1,000 runs/mo</li>
<li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>Community support</li>
</ul>
<a href="#" class="block w-full py-3 text-center border border-gray-300 dark:border-gray-600 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">Get Started</a>
</div>
<div class="relative bg-white dark:bg-gray-800 rounded-2xl p-8 border-2 border-blue-600 shadow-xl shadow-blue-600/10 md:scale-105">
<div class="absolute -top-4 left-1/2 -translate-x-1/2 px-4 py-1 bg-blue-600 text-white text-sm rounded-full">Most Popular</div>
<h3 class="text-lg font-semibold mb-2">Pro</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-6">For growing teams</p>
<div class="mb-6"><span class="text-4xl font-bold">$19</span><span class="text-gray-500">/mo</span></div>
<ul class="space-y-3 mb-8">
<li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>Unlimited workflows</li>
<li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>50,000 runs/mo</li>
<li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>Priority email support</li>
<li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>Advanced analytics</li>
</ul>
<a href="#" class="block w-full py-3 text-center bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition-colors">Upgrade Now</a>
</div>
<div class="bg-white dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-semibold mb-2">Enterprise</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-6">For large organizations</p>
<div class="mb-6"><span class="text-4xl font-bold">$49</span><span class="text-gray-500">/mo</span></div>
<ul class="space-y-3 mb-8">
<li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>Everything in Pro</li>
<li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>Unlimited runs</li>
<li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>Dedicated account manager</li>
<li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>SLA guarantee</li>
</ul>
<a href="#" class="block w-full py-3 text-center border border-gray-300 dark:border-gray-600 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">Contact Sales</a>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section id="testimonials" class="py-20 px-4">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl sm:text-4xl font-bold mb-4">Trusted by Teams Everywhere</h2>
<p class="text-gray-600 dark:text-gray-400">Over 10,000 companies choose CloudFlow</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-gray-50 dark:bg-gray-900 p-6 rounded-2xl">
<div class="flex items-center gap-1 mb-4"><span class="text-yellow-400">★★★★★</span></div>
<p class="text-gray-600 dark:text-gray-400 mb-6">"CloudFlow saved us 20 hours of repetitive work every week. The team can finally focus on what really matters."</p>
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center font-semibold text-blue-600">S</div>
<div><p class="font-medium text-sm">Sarah Chen</p><p class="text-gray-500 text-xs">CTO, TechCorp</p></div>
</div>
</div>
<div class="bg-gray-50 dark:bg-gray-900 p-6 rounded-2xl">
<div class="flex items-center gap-1 mb-4"><span class="text-yellow-400">★★★★★</span></div>
<p class="text-gray-600 dark:text-gray-400 mb-6">"The visual builder is so intuitive that even non-technical team members can jump right in. It's a game changer."</p>
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center font-semibold text-green-600">M</div>
<div><p class="font-medium text-sm">Michael Rivera</p><p class="text-gray-500 text-xs">VP of Operations, ShopDirect</p></div>
</div>
</div>
<div class="bg-gray-50 dark:bg-gray-900 p-6 rounded-2xl">
<div class="flex items-center gap-1 mb-4"><span class="text-yellow-400">★★★★★</span></div>
<p class="text-gray-600 dark:text-gray-400 mb-6">"The enterprise-grade compliance features gave us the confidence to migrate our core processes to the cloud. Highly recommended."</p>
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center font-semibold text-purple-600">J</div>
<div><p class="font-medium text-sm">James Walker</p><p class="text-gray-500 text-xs">IT Director, FinEdge Capital</p></div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 dark:bg-gray-950 text-gray-400 py-16 px-4">
<div class="max-w-7xl mx-auto">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-12">
<div>
<h4 class="text-white font-semibold mb-4">Product</h4>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-white transition-colors">Features</a></li>
<li><a href="#" class="hover:text-white transition-colors">Pricing</a></li>
<li><a href="#" class="hover:text-white transition-colors">Integrations</a></li>
<li><a href="#" class="hover:text-white transition-colors">Changelog</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-semibold mb-4">Resources</h4>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-white transition-colors">Documentation</a></li>
<li><a href="#" class="hover:text-white transition-colors">API</a></li>
<li><a href="#" class="hover:text-white transition-colors">Tutorials</a></li>
<li><a href="#" class="hover:text-white transition-colors">Blog</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-semibold mb-4">Company</h4>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-white transition-colors">About Us</a></li>
<li><a href="#" class="hover:text-white transition-colors">Careers</a></li>
<li><a href="#" class="hover:text-white transition-colors">Contact</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-semibold mb-4">Legal</h4>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-white transition-colors">Privacy Policy</a></li>
<li><a href="#" class="hover:text-white transition-colors">Terms of Service</a></li>
<li><a href="#" class="hover:text-white transition-colors">Security & Compliance</a></li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row items-center justify-between gap-4">
<div class="flex items-center gap-2">
<div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center"><span class="text-white font-bold text-sm">CF</span></div>
<span class="text-white font-bold">CloudFlow</span>
</div>
<p class="text-sm">© 2025 CloudFlow. All rights reserved.</p>
</div>
</div>
</footer>
<script>
document.getElementById('themeToggle')?.addEventListener('click', () => {
document.documentElement.classList.toggle('dark');
});
document.getElementById('menuToggle')?.addEventListener('click', () => {
document.getElementById('mobileMenu').classList.toggle('hidden');
});
</script>
</body>
</html>
Acceptance Criteria
- [ ] Navbar shows hamburger menu on mobile, full links on desktop
- [ ] Hero section headline is centered, CTA buttons display full-width on small screens
- [ ] Feature cards display in 1 column on mobile, 2 on tablet, 4 on desktop
- [ ] Middle pricing card is highlighted with shadow effect
- [ ] Testimonial cards stack vertically on mobile, 3 columns on desktop
- [ ] All sections display correct color changes when dark mode is toggled
- [ ] All interactive elements have hover/active state feedback
Extensions
- Add smooth scroll navigation with active section highlighting
- Integrate Alpine.js for animated mobile menu transitions
- Add scroll-into-viewport animations (AOS library or
animate.css) - Implement monthly/yearly pricing toggle
- Add more social proof (scrolling customer logos, statistics counters)