How To Create A Landing Page That Converts Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ZeeFlow | Write Better Content, Faster</title>
<style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: 'Segoe UI', sans-serif; color: #1e293b; background: white; }
  a { text-decoration: none; color: inherit; }

/* NAV */
  nav { display: flex; justify-content: space-between; align-items: center; padding: 18px 40px; border-bottom: 1px solid #e2e8f0; position: sticky; top: 0; background: white; z-index: 10; }
  .nav-logo { font-weight: 800; font-size: 1.3em; color: #7c3aed; }
  .nav-cta { background: #7c3aed; color: white; padding: 10px 22px; border-radius: 8px; font-weight: 600; transition: background 0.2s; }
  .nav-cta:hover { background: #6d28d9; }

/* HERO */
  .hero { text-align: center; padding: 80px 20px 60px; background: linear-gradient(180deg, #faf5ff 0%, #fff 100%); }
  .social-proof-bar { display: inline-flex; align-items: center; gap: 8px; background: white; border: 1px solid #e9d5ff; border-radius: 100px; padding: 6px 16px; font-size: 0.85em; color: #7c3aed; font-weight: 600; margin-bottom: 28px; }
  .hero h1 { font-size: clamp(2.2em, 5vw, 3.8em); font-weight: 900; line-height: 1.15; max-width: 780px; margin: 0 auto 20px; }
  .hero h1 em { color: #7c3aed; font-style: normal; }
  .hero p { color: #64748b; font-size: 1.15em; max-width: 540px; margin: 0 auto 36px; line-height: 1.8; }
  .cta-group { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
  .btn-primary { padding: 16px 36px; background: #7c3aed; color: white; border-radius: 10px; font-weight: 700; font-size: 1.05em; transition: background 0.2s, transform 0.2s; }
  .btn-primary:hover { background: #6d28d9; transform: translateY(-2px); }
  .btn-secondary { padding: 16px 36px; background: white; color: #1e293b; border-radius: 10px; font-weight: 700; font-size: 1.05em; border: 2px solid #e2e8f0; transition: border-color 0.2s, transform 0.2s; }
  .btn-secondary:hover { border-color: #7c3aed; transform: translateY(-2px); }
  .hero-note { padding-top: 18px; font-size: 0.85em; color: #94a3b8; }

/* LOGOS */
  .logos-section { text-align: center; padding: 40px 20px; border-top: 1px solid #f1f5f9; border-bottom: 1px solid #f1f5f9; }
  .logos-section p { color: #94a3b8; font-size: 0.85em; margin-bottom: 20px; }
  .logo-row { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; align-items: center; }
  .logo-item { font-weight: 800; font-size: 1.2em; color: #cbd5e1; letter-spacing: -0.5px; }

/* FEATURES */
  .features { max-width: 1100px; margin: 80px auto; padding: 0 40px; }
  .features h2 { text-align: center; font-size: 2.2em; font-weight: 800; margin-bottom: 12px; }
  .features .subtitle { text-align: center; color: #64748b; margin-bottom: 56px; }
  .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; }
  .feature-box { border: 1px solid #e2e8f0; border-radius: 14px; padding: 28px; transition: border-color 0.2s, box-shadow 0.2s; }
  .feature-box:hover { border-color: #c4b5fd; box-shadow: 0 4px 20px rgba(124,58,237,0.08); }
  .feature-icon { font-size: 2.4em; margin-bottom: 16px; }
  .feature-box h3 { margin-bottom: 10px; font-size: 1.1em; }
  .feature-box p { color: #64748b; font-size: 0.95em; line-height: 1.7; }

/* TESTIMONIALS */
  .testimonials { background: #faf5ff; padding: 80px 40px; text-align: center; }
  .testimonials h2 { font-size: 2em; font-weight: 800; margin-bottom: 40px; }
  .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; max-width: 900px; margin: 0 auto; }
  .testimonial-card { background: white; border-radius: 12px; padding: 24px; text-align: left; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
  .stars { color: #f59e0b; margin-bottom: 12px; }
  .testimonial-card p { color: #475569; font-size: 0.95em; line-height: 1.7; margin-bottom: 16px; }
  .reviewer { display: flex; align-items: center; gap: 10px; }
  .reviewer-avatar { width: 38px; height: 38px; border-radius: 50%; background: #ede9fe; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #7c3aed; font-size: 0.85em; }
  .reviewer-name { font-weight: 700; font-size: 0.9em; }
  .reviewer-title { font-size: 0.8em; color: #94a3b8; }

/* FINAL CTA */
  .final-cta { text-align: center; padding: 80px 20px; }
  .final-cta h2 { font-size: 2.4em; font-weight: 800; margin-bottom: 14px; }
  .final-cta p { color: #64748b; margin-bottom: 32px; font-size: 1.05em; }
</style>
</head>
<body>

<nav>
  <div class="nav-logo">&#9997;&#65039; ZeeFlow</div>
  <div>
    <a href="#" class="nav-cta">Start Free Trial</a>
  </div>
</nav>

<section class="hero">
  <div class="social-proof-bar">&#10024; Trusted by 12,000+ content creators</div>
  <h1>Write Better Content, <em>10x Faster</em></h1>
  <p>ZeeFlow is the AI-powered writing workspace that helps bloggers, marketers, and teams produce high-quality content at scale â€” without the burnout.</p>
  <div class="cta-group">
    <a href="#" class="btn-primary">Start Free for 14 Days &#8594;</a>
    <a href="#" class="btn-secondary">See How It Works</a>
  </div>
  <p class="hero-note">&#10003; No credit card required &nbsp;&bull;&nbsp; &#10003; Cancel anytime</p>
</section>

<div class="logos-section">
  <p>Trusted by teams at</p>
  <div class="logo-row">
    <div class="logo-item">TechCrunch</div>
    <div class="logo-item">HubSpot</div>
    <div class="logo-item">Shopify</div>
    <div class="logo-item">Buffer</div>
    <div class="logo-item">Notion</div>
  </div>
</div>

<section class="features">
  <h2>Everything You Need to Write Smarter</h2>
  <p class="subtitle">From first draft to final publish, ZeeFlow has your entire workflow covered.</p>
  <div class="features-grid">
    <div class="feature-box">
      <div class="feature-icon">&#129302;</div>
      <h3>AI-Powered Suggestions</h3>
      <p>Get real-time writing suggestions, sentence rewrites, and tone adjustments as you type.</p>
    </div>
    <div class="feature-box">
      <div class="feature-icon">&#128200;</div>
      <h3>SEO Score Live</h3>
      <p>A built-in SEO analyzer gives your article a live score and shows exactly how to improve your ranking.</p>
    </div>
    <div class="feature-box">
      <div class="feature-icon">&#128101;</div>
      <h3>Team Collaboration</h3>
      <p>Invite teammates, leave comments, assign roles, and manage the entire editorial calendar together.</p>
    </div>
  </div>
</section>

<section class="testimonials">
  <h2>Loved by 12,000+ Writers</h2>
  <div class="testimonials-grid">
    <div class="testimonial-card">
      <div class="stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
      <p>"ZeeFlow cut our content production time in half. We're now publishing 3x more articles per week with the same team size."</p>
      <div class="reviewer">
        <div class="reviewer-avatar">JW</div>
        <div>
          <div class="reviewer-name">Jessica Wang</div>
          <div class="reviewer-title">Head of Content, GrowthLab</div>
        </div>
      </div>
    </div>
    <div class="testimonial-card">
      <div class="stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
      <p>"The live SEO score alone is worth the subscription. My articles consistently rank on the first page now."</p>
      <div class="reviewer">
        <div class="reviewer-avatar">MP</div>
        <div>
          <div class="reviewer-name">Mike Patel</div>
          <div class="reviewer-title">Freelance Content Strategist</div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="final-cta">
  <h2>Ready to Write Faster?</h2>
  <p>Start your free 14-day trial today. No credit card required.</p>
  <a href="#" class="btn-primary">Get Started Free &#8594;</a>
</section>

</body>
</html>