Skip to content

Hero Section Example

A complete landing page hero section with gradient background, headline, and CTA.

Live Preview

Payment automation platform

Automate your payments.
Focus on your business.

Simple, fast, and reliable payment automation for businesses of all sizes.

Complete HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MetrePay — Automate your payments</title>
  <link href="https://fonts.googleapis.com/css2?family=Cabin:wght@400;600;700&display=swap" rel="stylesheet">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'Cabin', sans-serif;
      background: #F1F1F1;
    }

    /* Hero */
    .hero {
      background: linear-gradient(73deg, #6E96FF 20%, #5C0390 100%);
      padding: 80px 32px;
      text-align: center;
      color: white;
    }

    .hero__badge {
      display: inline-block;
      background: rgba(255,255,255,0.15);
      border-radius: 9999px;
      padding: 6px 16px;
      font-size: 13px;
      font-weight: 600;
      color: rgba(255,255,255,0.9);
      margin-bottom: 20px;
      letter-spacing: 0.04em;
    }

    .hero__title {
      font-size: 48px;
      font-weight: 700;
      color: white;
      line-height: 1.15;
      margin-bottom: 16px;
      max-width: 640px;
      margin-left: auto;
      margin-right: auto;
    }

    .hero__subtitle {
      font-size: 18px;
      color: rgba(255,255,255,0.85);
      line-height: 1.6;
      margin-bottom: 40px;
      max-width: 480px;
      margin-left: auto;
      margin-right: auto;
    }

    .hero__actions {
      display: flex;
      gap: 12px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .btn-hero-primary {
      background: white;
      color: #6E96FF;
      border: none;
      border-radius: 8px;
      padding: 0 32px;
      height: 52px;
      font-family: 'Cabin', sans-serif;
      font-size: 17px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .btn-hero-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 16px -4px rgba(0,0,0,0.2);
    }

    .btn-hero-outline {
      background: rgba(255,255,255,0.15);
      color: white;
      border: 2px solid rgba(255,255,255,0.4);
      border-radius: 8px;
      padding: 0 32px;
      height: 52px;
      font-family: 'Cabin', sans-serif;
      font-size: 17px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .btn-hero-outline:hover {
      background: rgba(255,255,255,0.25);
      border-color: rgba(255,255,255,0.6);
    }

    /* Trust bar */
    .trust-bar {
      background: rgba(255,255,255,0.1);
      border-top: 1px solid rgba(255,255,255,0.15);
      padding: 20px 32px;
      display: flex;
      justify-content: center;
      gap: 40px;
      flex-wrap: wrap;
    }

    .trust-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      color: rgba(255,255,255,0.8);
    }

    /* Responsive */
    @media (max-width: 768px) {
      .hero { padding: 48px 20px; }
      .hero__title { font-size: 32px; }
      .hero__subtitle { font-size: 16px; }
      .btn-hero-primary,
      .btn-hero-outline { width: 100%; justify-content: center; }
      .hero__actions { flex-direction: column; align-items: center; }
      .trust-bar { gap: 20px; }
    }
  </style>
</head>
<body>

  <section class="hero">
    <span class="hero__badge">Payment automation platform</span>

    <h1 class="hero__title">
      Automate your payments.<br>Focus on your business.
    </h1>

    <p class="hero__subtitle">
      Simple, fast, and reliable payment automation for businesses of all sizes.
    </p>

    <div class="hero__actions">
      <button class="btn-hero-primary">Get started free</button>
      <button class="btn-hero-outline">See how it works</button>
    </div>

    <!-- Trust bar -->
    <div class="trust-bar" style="margin-top:48px; margin-left:-32px; margin-right:-32px; margin-bottom:-80px;">
      <div class="trust-item">✓ No setup fees</div>
      <div class="trust-item">✓ Cancel anytime</div>
      <div class="trust-item">✓ 256-bit encryption</div>
      <div class="trust-item">✓ PCI compliant</div>
    </div>
  </section>

</body>
</html>

Variants

Compact Hero (for internal pages)

<div style="background:linear-gradient(73deg,#6E96FF 20%,#5C0390 100%); padding:40px 32px; color:white; font-family:'Cabin',sans-serif;">
  <h1 style="font-size:32px; font-weight:700; color:white; margin:0 0 8px 0;">Payments</h1>
  <p style="font-size:15px; color:rgba(255,255,255,0.8); margin:0;">Manage all your payment transactions</p>
</div>

<div style="background:linear-gradient(73deg,#6E96FF 20%,#5C0390 100%); padding:32px; color:white; font-family:'Cabin',sans-serif;">
  <div style="max-width:1280px; margin:0 auto; display:flex; align-items:center; justify-content:space-between;">
    <img src="/assets/logo-metrepay-blanco.svg" alt="MetrePay" style="height:32px;">
    <button style="background:rgba(255,255,255,0.15); color:white; border:1px solid rgba(255,255,255,0.3); border-radius:8px; padding:0 16px; height:36px; font-family:'Cabin',sans-serif; font-size:14px; font-weight:600; cursor:pointer;">
      Sign in
    </button>
  </div>
</div>