FlowPilot: Workflow Automation
Landing Page Template

🎯 Overview

FlowPilot: Workflow Automation is a premium, handcrafted landing page template built with modern design principles and conversion optimization in mind. It's specifically engineered for Chrome Extensions and Micro-SaaS products that need to convert visitors into users fast.

Why this template?

Most landing page templates look generic — glassmorphism, neon gradients, and cyberpunk vibes. This one is different. It's clean, trustworthy, and designed to feel like a real product page from a serious tech company.

• High-converting layout proven for Chrome Extensions
• Modern, clean light theme (no glass, no gradients)
• Fully responsive across all devices
• Smooth scroll animations (AOS)
• Easy theming via CSS variables
• Production-ready, semantic HTML5
• Accessible & SEO-friendly
• Zero build step required

📦 What's Included

Files

Sections (11 total)

1. Sticky Navbar — Logo, navigation links, CTA button
2. Hero Section — Headline, subtext, CTA, animated browser mockup
3. Social Proof Stats Bar — 4 key metrics
4. Features Grid — 6 feature cards with icons
5. Before & After Comparison — Side-by-side visual comparison
6. How It Works — 3-step process
7. Testimonials — Chrome Web Store-style reviews
8. Pricing — Freemium model (Free + Pro)
9. FAQ Accordion — 5 questions with smooth expand
10. Final CTA — Large call-to-action
11. Footer — 4-column layout with social icons

🛠 Tech Stack

All external libraries are loaded via CDN — no build step, no npm install. Just open and go.

📁 File Structure

The template is intentionally minimal. Three files, zero dependencies to install.

flowpilot-landing-page/
├── index.html      # Complete HTML structure with all 11 sections
├── style.css       # Custom styles with CSS variables for theming
└── script.js       # Vanilla JS for FAQ, AOS init, smooth scroll

# Total size: ~45KB uncompressed
# No node_modules, no package.json, no build tools

🚀 Quick Start Guide

Get your landing page live in under 5 minutes.

🎨 Customization Guide

1. Change Colors (CSS Variables)

All colors are defined in :root at the top of style.css. Change them in one place and the whole template updates.

/* Find this at the top of style.css */
:root {
    --bg-primary: #FAFAFA;       /* Main background */
    --bg-secondary: #F3F4F6;     /* Alternating sections */
    --text-primary: #111827;     /* Main text */
    --accent: #4F46E5;           /* Primary accent (buttons) */
    --accent-hover: #4338CA;     /* Accent hover state */
    --accent-soft: #EEF2FF;      /* Soft accent bg */
    --border: #E5E7EB;           /* Border color */
}

2. Change the Extension Name

Use your editor's Find & Replace (Ctrl/Cmd + H) to replace FlowPilot with your product name across all 3 files.

3. Update the Chrome Web Store Link

Search for the comment UPDATE CHROME WEB STORE LINK in index.html. You'll find 4 CTA buttons — replace all href="#" with your actual Chrome Web Store URL.

<!-- UPDATE CHROME WEB STORE LINK -->
<a href="https://chromewebstore.google.com/detail/YOUR_EXTENSION_ID"
   class="btn btn-primary-cta">
    Add to Chrome — It's Free
</a>

4. Change the Font

The template uses Plus Jakarta Sans. To switch fonts:

1. Update the Google Fonts link in <head>
2. Update the font-family in the body rule in style.css

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
      rel="stylesheet">

📖 Sections Breakdown

🔝 Navbar

Sticky, solid background, subtle bottom border. Contains logo, nav links, and CTA button.

• Logo: Edit the .brand-icon icon and .brand-name text
• Links: Modify the <ul class="navbar-nav"> items
• CTA: Update text and Chrome Web Store link

🎬 Hero Section

The money section. Contains headline, subtext, CTA, trust indicators, and a custom CSS/HTML browser mockup (no images needed).

<h1 class="hero-title">
    Supercharge Your <span class="accent-text">Workflow</span> in Seconds.
</h1>

The browser mockup is built entirely with HTML/CSS. To customize:

• Change the extension logo icon in .ext-logo
• Update the popup UI content (stats, buttons, activity list)
• Modify the URL bar text in .browser-url

📊 Stats Bar

4 key metrics displayed horizontally. Edit the numbers, icons, and labels directly in the HTML.

⚡ Features Grid

6 feature cards in a 3-column grid. Each has an icon, title, and 1-sentence description.

🔄 Before & After Comparison

Side-by-side visual comparison showing the transformation your extension provides.

• Left card (Before): Grayed out, lists 3 pain points
• Right card (After): Highlighted with accent border, lists 3 benefits

🪜 How It Works

3-step horizontal layout. Default steps: Install → Pin → Click & Go.

⭐ Testimonials

Designed to look like Chrome Web Store reviews. Each card has:

• Avatar (colored circle with initials)
• Name and 5-star rating
• Review text
• "Was this helpful?" voting buttons

💰 Pricing

Two pricing cards: Free Forever and Pro. The Pro card has an accent border and "Most Popular" badge.

❓ FAQ Accordion

5 questions with smooth expand/collapse. Add or remove .faq-item blocks as needed.

🎯 Final CTA

Large call-to-action section with soft background, bold headline, and primary button.

🦶 Footer

4-column layout with brand info, product links, company links, legal links, and social icons. Copyright year auto-updates via JavaScript.

✅ Best Practices

Content

• Headline: Focus on the main benefit, not features
• Subtext: Explain how you deliver that benefit
• CTAs: Use action-oriented language ("Add to Chrome", "Get Started")
• Social proof: Include real numbers (users, ratings, tasks)
• Testimonials: Use real reviews with names when possible

Design

• Stick to 2-3 colors max (primary, accent, neutral)
• Use font weights for hierarchy (400, 600, 700, 800)
• Maintain consistent spacing
• Use FontAwesome solid style for consistency

Performance

• The template uses zero images — all UI is CSS/HTML
• AOS animations are optimized (animate once, disabled on mobile)
• All libraries load from fast CDNs

SEO

• Update the <title> tag with your extension name + main keyword
• Write a compelling 150-160 character meta description
• All sections use proper heading hierarchy (h1 → h2 → h3)
• Add alt text if you add images later

Accessibility

• All text meets WCAG AA contrast standards
• Buttons and links have visible focus indicators
• FAQ accordion is fully keyboard accessible
• Social icons have proper aria-label attributes

🌐 Deployment

Option 1: Static Hosting (Recommended)

Upload the 3 files to any static hosting service:

• Netlify — Drag & drop deployment
• Vercel — Git-based deployment
• GitHub Pages — Free hosting for public repos
• Cloudflare Pages — Fast global CDN

Option 2: Traditional Hosting

Upload via FTP/SFTP to your web host's public directory (e.g., public_html).

Option 3: Custom Domain

Point your domain to your hosting provider. Popular setups:

• get.yourextension.com
• app.yourextension.com
• yourextension.com (root domain)

❓ Frequently Asked Questions

📄 License

You may:

• Use it for your own Chrome Extension or Micro-SaaS
• Modify it to fit your brand
• Deploy it to your domain
• Use it for client projects (with proper licensing)

You may not:

• ❌ Resell or redistribute the template
• ❌ Claim authorship of the original design
• ❌ Use it for more than one project without additional licenses