Prompt: make the best coffee shop website you can in html css js
Generated at step: 200
Timestamp: 2025-08-28T09:36:12.782497
============================================================

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Bean Haven | Premium Coffee & Brews</title>

  <!-- Favicon -->
  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>%26%2392%3B</text></svg>" />

  <!-- Google Fonts -->
  <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=Poppins:wght@400;500;600;700&family=Playfair+Display:wght@700;900&display=swap" rel="stylesheet">

  <!-- Font Awesome Icons -->
  <script src="https://kit.fontawesome.com/a0d6c9e18b.js" crossorigin="anonymous"></script>

  <!-- Custom Styles -->
  <style>
    /* Reset and Base */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      --primary: #F4A83C;       /* Golden amber */
      --primary-dark: #D99B2E;  /* Darker golden brown */
      --accent: #6D4C41;        /* Rich espresso */
      --bg-light: #F9FAFB;     /* Light cream */
      --bg-dark: #121212;      /* Deep charcoal */
      --text: #121212;          /* Charcoal black */
      --text-light: #F9FAFB;   /* Cream for light text */
      --card-bg: rgba(255, 255, 255, 0.8);
      --shadow-sm: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
      --shadow-md: 0 8px 25px rgba(0,0,0,0.12), 0 4px 10px rgba(0,0,0,0.08);
      --border-radius: 16px;
      --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.29, 1.47);
    }

    body {
      font-family: 'Poppins', sans-serif;
      background-color: var(--bg-light);
      color: var(--text);
      line-height: 1.6;
    }

    h1,h2,h3,h4,h5,h6 { font-family: 'Playfair Display', serif; letter-spacing: -0.02em; }
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button:focus-visible,
    input:focus-visible,
    select:focus-visible {
      outline: 3px solid var(--primary);
      outline-offset: 2px;
    }

    /* Navigation */
    header {
      position: fixed;
      width: 100%;
      z-index: 999;
      backdrop-filter: blur(8px);
      background: linear-gradient(180deg, rgba(244, 168, 60, 0.8), rgba(244, 168, 60, 0.5));
      border-bottom: 1px solid rgba(244, 168, 60, 0.25);
    }

    nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 0;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .logo span {
      font-weight: 900;
      font-size: 1.8rem;
    }

    .logo i {
      font-size: 2rem;
      color: var(--primary-dark);
    }

    .nav-links {
      display: flex;
      gap: 28px;
    }

    .nav-links a {
      font-weight: 600;
      transition: var(--transition);
    }

    .nav-links a:hover {
      color: var(--primary-dark);
      transform: translateY(-1px);
    }

    .btn-primary {
      background: linear-gradient(to right, var(--primary), var(--primary-dark));
      color: white;
      border: none;
      padding: 10px 16px;
      border-radius: 10px;
      font-weight: 600;
      cursor: pointer;
      transition: var(--transition);
    }

    .btn-outline {
      background: transparent;
      border: 1px solid var(--primary);
      color: var(--primary);
      padding: 10px 16px;
      border-radius: 10px;
      cursor: pointer;
      transition: var(--transition);
    }

    .btn-outline:hover {
      background: rgba(244, 168, 60, 0.1);
    }

    /* Hero Section */
    hero {
      height: 90vh;
      background-image: url('https://images.unsplash.com/photo-1501556600872-2f2112863815');
      background-size: cover;
      background-position: center bottom;
      background-attachment: fixed;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hero-overlay {
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 30% 40%, rgba(244,168,60,0.3) 0%, rgba(255,255,255,0) 70%);
    }

    .hero-content {
      max-width: 800px;
      text-align: left;
    }

    .hero-content h1 {
      font-size: clamp(2.8rem, 7vw, 5.2rem);
      font-weight: 900;
      line-height: 1.1;
      color: var(--text-light);
      margin-bottom: 12px;
    }

    .hero-content p {
      font-size: 1.1rem;
      color: var(--text-light);
      opacity: 0.9;
      margin-bottom: 24px;
    }

    .cta-buttons {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 16px;
    }

    .btn-large {
      padding: 16px 22px;
      font-size: 1.1rem;
    }

    /* Features Grid */
    features {
      padding: 100px 0;
    }

    .section-title {
      text-align: center;
      margin-bottom: 36px;
    }

    .section-title h2 {
      font-size: clamp(2.2rem, 8vw, 4.4rem);
      font-weight: 900;
      color: var(--text);
    }

    .section-title p {
      color: var(--text-light);
      max-width: 680px;
      margin: 0 auto;
    }

    .features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 28px;
    }

    .feature-card {
      background: var(--card-bg);
      border-radius: var(--border-radius);
      border: 1px solid rgba(244,168,60,0.15);
      box-shadow: var(--shadow-sm);
      overflow: hidden;
      transition: var(--transition);
    }

    .feature-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-md);
    }

    .feature-icon {
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(180deg, var(--primary), var(--primary-dark));
      color: white;
      border-top-right-radius: var(--border-radius);
      border-top-left-radius: var(--border-radius);
    }

    .feature-body {
      padding: 20px;
    }

    .feature-body h3 {
      margin-bottom: 12px;
      font-size: 1.1rem;
      font-weight: 700;
    }

    .feature-body p {
      color: var(--text-light);
      opacity: 0.9;
    }

    /* Brews Section */
    brews {
      padding: 100px 0;
      background: linear-gradient(180deg, #F9FAFB 0%, #FFFFFF 100%);
    }

    .brews-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 28px;
    }

    .brew-item {
      background: var(--card-bg);
      border-radius: var(--border-radius);
      border: 1px solid rgba(244,168,60,0.15);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
      transition: var(--transition);
    }

    .brew-header {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      border-bottom: 1px solid rgba(244,168,60,0.1);
    }

    .brew-img {
      width: 60px;
      height: 60px;
      object-fit: cover;
      border-radius: 12px;
    }

    .brew-info {
      flex: 1;
    }

    .brew-name {
      font-weight: 700;
      font-size: 1.1rem;
    }

    .brew-desc {
      color: var(--text-light);
      opacity: 0.9;
      margin-top: 4px;
    }

    .brew-price {
      display: inline-block;
      background: linear-gradient(180deg, var(--primary), var(--primary-dark));
      color: white;
      padding: 6px 10px;
      border-radius: 8px;
      font-weight: 700;
      font-size: 0.95rem;
      margin-top: 8px;
    }

    .brew-actions {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
      gap: 12px;
      padding: 16px;
      border-top: 1px solid rgba(244,168,60,0.1);
    }

    .btn-small {
      padding: 8px 12px;
      font-size: 0.9rem;
    }

    /* About Section */
    about {
      padding: 100px 0;
      background: linear-gradient(180deg, #121212 0%, #1a1a1a 100%);
      color: var(--text-light);
    }

    .about-grid {
      display: grid;
      grid-template-columns: (minmax(320px, 1fr)) 1fr;
      gap: 32px;
      align-items: center;
    }

    .about-text {
      font-size: 1.1rem;
    }

    .about-text h2 {
      margin-bottom: 16px;
      font-weight: 900;
    }

    .about-text p {
      margin-bottom: 12px;
    }

    .about-stats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 18px;
    }

    .stat-item {
      text-align: center;
    }

    .stat-number {
      font-size: 2.2rem;
      font-weight: 900;
      color: var(--primary);
      margin-bottom: 8px;
    }

    .stat-label {
      font-size: 0.9rem;
      color: var(--text-light);
    }

    .about-image {
      border-radius: var(--border-radius);
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.08);
    }

    .about-image img {
      width: 100%;
      height: auto;
      display: block;
    }

    /* Testimonials */
    testimonials {
      padding: 100px 0;
      background: linear-gradient(180deg, #F9FAFB 0%, #FFFFFF 100%);
    }

    .testimonials-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 24px;
    }

    .testimonial-card {
      background: var(--card-bg);
      border-radius: var(--border-radius);
      border: 1px solid rgba(244,168,60,0.15);
      box-shadow: var(--shadow-sm);
      padding: 20px;
      transition: var(--transition);
    }

    .testimonial-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-md);
    }

    .rating {
      color: #FFD700;
      font-size: 1.3rem;
      font-weight: bold;
      margin-bottom: 12px;
    }

    .quote {
      font-style: italic;
      color: var(--text-light);
      margin-bottom: 14px;
    }

    .author {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 700;
    }

    .author img {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      object-fit: cover;
    }

    /* Contact */
    contact {
      padding: 100px 0;
      background: linear-gradient(180deg, #121212 0%, #1a1a1a 100%);
      color: var(--text-light);
    }

    .contact-grid {
      display: grid;
      grid-template-columns: (minmax(320px, 1fr)) 1fr;
      gap: 32px;
      align-items: start;
    }

    .contact-info h2 {
      margin-bottom: 16px;
      font-weight: 900;
    }

    .contact-info ul {
      list-style: none;
      margin-bottom: 16px;
    }

    .contact-info li {
      margin-bottom: 12px;
      display: flex;
      align-items: flex-start;
      gap: 12px;
      color: var(--text-light);
    }

    .contact-info li i {
      color: var(--primary);
      font-size: 1.2rem;
    }

    .contact-form {
      background: var(--card-bg);
      border-radius: var(--border-radius);
      border: 1px solid rgba(244,168,60,0.15);
      box-shadow: var(--shadow-sm);
      padding: 20px;
    }

    .form-group {
      margin-bottom: 16px;
    }

    .form-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 16px;
    }

    .form-control {
      width: 100%;
      padding: 12px 14px;
      border: 1px solid rgba(244,168,60,0.2);
      background: white;
      border-radius: 10px;
      font-size: 0.95rem;
      transition: var(--transition);
    }

    .form-control:focus {
      outline: 3px solid var(--primary);
      outline-offset: 2px;
    }

    textarea.form-control {
      min-height: 120px;
      resize: vertical;
    }

    .form-btn {
      background: linear-gradient(180deg, var(--primary), var(--primary-dark));
      color: white;
      border: none;
      padding: 12px 16px;
      border-radius: 10px;
      cursor: pointer;
      font-weight: 600;
      transition: var(--transition);
    }

    .form-btn:hover {
      transform: translateY(-1px);
    }

    /* Footer */
    footer {
      background: #121212;
      color: var(--text-light);
      padding: 40px 0 20px;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 24px;
    }

    .footer-col h3 {
      margin-bottom: 16px;
      font-weight: 700;
    }

    .footer-col ul {
      list-style: none;
      margin-bottom: 16px;
    }

    .footer-col li {
      margin-bottom: 12px;
    }

    .footer-col a {
      color: var(--text-light);
      transition: var(--transition);
    }

    .footer-col a:hover {
      color: var(--primary);
    }

    .social-icons {
      display: flex;
      gap: 12px;
    }

    .social-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 12px;
      background: rgba(244,168,60,0.1);
      color: var(--primary);
      transition: var(--transition);
    }

    .social-link:hover {
      background: rgba(244,168,60,0.2);
      transform: translateY(-1px);
    }

    .copyright {
      text-align: center;
      margin-top: 20px;
      padding-top: 16px;
      border-top: 1px solid rgba(255,255,255,0.06);
      color: var(--text-light);
      font-size: 0.9rem;
    }

    /* Mobile menu */
    .mobile-menu-toggle {
      display: none;
      position: relative;
      padding: 10px;
      cursor: pointer;
      background: transparent;
      border: none;
    }

    .hamburger {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--text);
    }

    .bar {
      width: 22px;
      height: 3px;
      background: currentColor;
      border-radius: 2px;
      transition: var(--transition);
    }

    /* Animations */
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .animate-fade-up {
      animation: fadeInUp 0.8s ease forwards;
    }

    /* Scroll progress bar */
    .scroll-progress {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 3px;
      background: linear-gradient(to right, var(--primary), var(--primary-dark));
      pointer-events: none;
      z-index: 99;
    }

    .scroll-progress-inner {
      height: 100%;
      width: 0%;
      background: linear-gradient(to right, var(--primary), var(--primary-dark));
      transition: width 0.3s ease;
    }

    /* Responsive adjustments */
    @media (max-width: 992px) {
      .section-title h2 {
        font-size: clamp(2rem, 7vw, 4.4rem);
      }

      .about-grid {
        grid-template-columns: 1fr;
      }

      .contact-grid {
        grid-template-columns: 1fr;
      }

      .nav-links {
        gap: 18px;
      }

      .cta-buttons {
        grid-template-columns: 1fr;
      }

      .form-row {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 640px) {
      .hero-content h1 {
        font-size: 2.5rem;
      }

      .hero-content p {
        font-size: 0.95rem;
      }

      .mobile-menu-toggle {
        display: block;
      }

      .nav-links {
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        background: white;
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(244,168,60,0.2);
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        transform: translateY(-10px);
        opacity: 0;
        visibility: hidden;
        transition: var(--transition);
      }

      .nav-links.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
      }

      .nav-links a {
        padding: 14px 16px;
      }

      .cta-buttons {
        grid-template-columns: 1fr;
      }

      .form-row {
        grid-template-columns: 1fr;
      }

      .about-stats {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      }
    }

    /* Hamburger animation */
    .hamburger.open .bar:nth-child(1) {
      transform: rotate(-45deg) translate(-5px, 6px);
    }

    .hamburger.open .bar:nth-child(2) {
      opacity: 0;
    }

    .hamburger.open .bar:nth-child(3) {
      transform: rotate(45deg) translate(-5px, -6px);
    }
  </style>
</head>
<body>
  <!-- Scroll Progress Bar -->
  <div class="scroll-progress">
    <div class="scroll-progress-inner" id="progressBar"></div>
  </div>

  <!-- Header -->
  <header id="header">
    <nav class="container">
      <div class="nav-container">
        <div class="logo">
          <i class="fas fa-coffee"></i>
          <span>Beean</span>Haven
        </div>

        <button class="mobile-menu-toggle" id="mobileMenuToggle">
          <span class="hamburger">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
          </span>
        </button>

        <ul class="nav-links" id="navLinks">
          <li><a href="#hero">Home</a></li>
          <li><a href="#features">Features</a></li>
          <li><a href="#brews">Brews</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#testimonials">Testimonials</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>

        <a href="#contact" class="btn-primary">Order Now</a>
      </div>
    </nav>
  </header>

  <!-- Hero Section -->
  <section id="hero" class="hero">
    <div class="hero-overlay"></div>
    <div class="hero-content">
      <h1>Welcome to Bean Haven</h1>
      <p>Handcrafted single-origin coffees, expertly roasted with care. Experience the perfect cup from our small-batch roastery.</p>
      <div class="cta-buttons">
        <a href="#brews" class="btn-large btn-outline">Explore Coffees</a>
        <a href="#contact" class="btn-large btn-primary">Order Online</a>
      </div>
    </div>
  </section>

  <!-- Features Section -->
  <section id="features" class="features">
    <div class="container">
      <div class="section-title animate-fade-up">
        <h2>Why Choose Bean Haven?</h2>
        <p>Crafted with care, sourced responsibly, served with passion.</p>
      </div>
      <div class="features-grid">
        <article class="feature-card animate-fade-up">
          <div class="feature-icon"><i class="far fa-sun"></i></div>
          <div class="feature-body">
            <h3>Sustainable Sourcing</h3>
            <p>We partner with ethical farms that prioritize environmental stewardship and fair wages.</p>
          </div>
        </article>
        <article class="feature-card animate-fade-up">
          <div class="feature-icon"><i class="fas fa-fire"></i></div>
          <div class="feature-body">
            <h3>Premium Roasting</h3>
            <p>Small-batch roasting using traditional methods to preserve complex flavors and aromas.</p>
          </div>
        </article>
        <article class="feature-card animate-fade-up">
          <div class="feature-icon"><i class="fas fa-handshake"></i></div>
          <div class="feature-body">
            <h3>Community Focus</h3>
            <p>A portion of every sale supports local artists and sustainability initiatives.</p>
          </div>
        </article>
        <article class="feature-card animate-fade-up">
          <div class="feature-icon"><i class="fas fa-leaf"></i></div>
          <div class="feature-body">
            <h3>Eco Packaging</h3>
            <p>All packaging is compostable or recyclable—no plastic ever.</p>
          </div>
        </article>
      </div>
    </div>
  </section>

  <!-- Brews Section -->
  <section id="brews" class="brews">
    <div class="container">
      <div class="section-title animate-fade-up">
        <h2>Our Signature Coffees</h2>
        <p>Curated blends from around the world, hand-selected for exceptional flavor profiles.</p>
      </div>
      <div class="brews-grid">
        <article class="brew-item animate-fade-up">
          <div class="brew-header">
            <img src="https://images.unsplash.com/photo-1601735732370-2b0519087448?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=600&auto=format&fit=crop" alt="Ethiopian Yirgacheffe" class="brew-img" loading="lazy" />
            <div class="brew-info">
              <div class="brew-name">Ethiopian Yirgacheffe</div>
              <div class="brew-desc">Bright floral notes with citrus and jasmine.</div>
              <div class="brew-price">$14.95</div>
            </div>
          </div>
          <div class="brew-actions">
            <a href="#" class="btn-small">Add to Cart</a>
            <a href="#" class="btn-small">Learn More</a>
          </div>
        </article>
        <article class="brew-item animate-fade-up">
          <div class="brew-header">
            <img src="https://images.unsplash.com/photo-1632494281365-c57753558b8f?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=600&auto=format&fit=crop" alt="Guatemalan Antigua" class="brew-img" loading="lazy" />
            <div class="brew-info">
              <div class="brew-name">Guatemalan Antigua</div>
              <div class="brew-desc">Balanced chocolate and citrus with a smooth finish.</div>
              <div class="brew-price">$16.95</div>
            </div>
          </div>
          <div class="brew-actions">
            <a href="#" class="btn-small">Add to Cart</a>
            <a href="#" class="btn-small">Learn More</a>
          </div>
        </article>
        <article class="brew-item animate-fade-up">
          <div class="brew-header">
            <img src="https://images.unsplash.com/photo-1613473645661-d660c60f2e41?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=600&auto=format&fit=crop" alt="Colombian Huila" class="brew-img" loading="lazy" />
            <div class="brew-info">
              <div class="brew-name">Colombian Huila</div>
              <div class="brew-desc">Full-bodied with notes of caramel and dark chocolate.</div>
              <div class="brew-price">$18.95</div>
            </div>
          </div>
          <div class="brew-actions">
            <a href="#" class="btn-small">Add to Cart</a>
            <a href="#" class="btn-small">Learn More</a>
          </div>
        </article>
        <article class="brew-item animate-fade-up">
          <div class="brew-header">
            <img src="https://images.unsplash.com/photo-1516299477851-3935c861764a?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=600&auto=format&fit=crop" alt="Peruvian Cajamarca" class="brew-img" loading="lazy" />
            <div class="brew-info">
              <div class="brew-name">Peruvian Cajamarca</div>
              <div class="brew-desc">Earthy, with hints of orange peel and spice.</div>
              <div class="brew-price">$16.95</div>
            </div>
          </div>
          <div class="brew-actions">
            <a href="#" class="btn-small">Add to Cart</a>
            <a href="#" class="btn-small">Learn More</a>
          </div>
        </article>
      </div>
    </div>
  </section>

  <!-- About Section -->
  <section id="about" class="about">
    <div class="container">
      <div class="about-grid">
        <div class="about-text">
          <h2>The Art of Quality</h2>
          <p>Founded in 2018 by Sarah Thompson, Bean Haven began as a passion project to bring exceptional, ethically sourced coffee directly to homes and cafes across the region.</p>
          <p>Each roast is developed through meticulous tasting sessions with our master roaster, focusing on clarity of origin, balance, and depth. We believe great coffee should be accessible, sustainable, and enjoyable.</p>
          
          <div class="about-stats">
            <div class="stat-item">
              <div class="stat-number">5+</div>
              <div class="stat-label">Years of Craftsmanship</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">30+</div>
              <div class="stat-label">Coffee Varietals</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">98%</div>
              <div class="stat-label">Sustainability Score</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">12K+</div>
              <div class="stat-label">Orders Delivered</div>
            </div>
          </div>
        </div>
        <div class="about-image">
          <img src="https://images.unsplash.com/photo-1617530861542-a07323746413?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=600&auto=format&fit=crop" alt="Roastery Workshop" loading="lazy" />
        </div>
      </div>
    </div>
  </section>

  <!-- Testimonials -->
  <section id="testimonials" class="testimonials">
    <div class="container">
      <div class="section-title animate-fade-up">
        <h2>What Our Customers Say</h2>
        <p>Real experiences from real customers who love their daily brew.</p>
      </div>
      <div class="testimonials-grid">
        <article class="testimonial-card animate-fade-up">
          <div class="rating"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i></div>
          <div class="quote">“The Ethiopian Yirgacheffe is absolutely stunning — it tastes like springtime on a rainy day. I’ve tried dozens of brands, and this is hands down my favorite.”</div>
          <div class="author">
            <img src="https://randomuser.me/api/portraits/women/45.jpg" alt="Anna M." loading="lazy" />
            <div>
              <strong>Ana M.</strong>, Home Brewer
            </div>
          </div>
        </article>
        <article class="testimonial-card animate-fade-up">
          <div class="rating"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
          <div class="quote">“I discovered Bean Haven during a weekend visit to Portland. The Guatemalan Antigua has become my go-to morning ritual. Their commitment to sustainability resonates deeply with me.”</div>
          <div class="author">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="James R." loading="lazy" />
            <div>
              <strong>James R.</strong>, Cafe Owner
            </div>
          </div>
        </article>
        <article class="testimonial-card animate-fade-up">
          <div class="rating"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
          <div class="quote">“The Colombian Huila is rich, balanced, and complex — exactly what we wanted for our café’s seasonal rotation. Outstanding quality and packaging!”</div>
          <div class="author">
            <img src="https://randomuser.me/api/portraits/women/23.jpg" alt="Lena K." loading="lazy" />
            <div>
              <strong>Lena K.</strong>, Boutique Café
            </div>
          </div>
        </article>
      </div>
    </div>
  </section>

  <!-- Contact Section -->
  <section id="contact" class="contact">
    <div class="container">
      <div class="section-title animate-fade-up">
        <h2>Get In Touch</h2>
        <p>Have questions about our products or want to learn more about our values? Reach out!</p>
      </div>
      <div class="contact-grid">
        <div class="contact-info animate-fade-up">
          <h2>Contact Info</h2>
          <ul>
            <li><i class="fas fa-map-marker-alt"></i> 123 Roast Lane, Portland, OR 97209</li>
            <li><i class="fas fa-phone"></i> +1 (555) 222-ROAST</li>
            <li><i class="fas fa-envelope"></i> hello@beanhaven.com</li>
            <li><i class="fas fa-clock"></i> Mon–Sat: 7AM–7PM</li>
          </ul>
          <div class="social-icons">
            <a href="#" class="social-link"><i class="fab fa-facebook-f"></i></a>
            <a href="#" class="social-link"><i class="fab fa-instagram"></i></a>
            <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
            <a href="#" class="social-link"><i class="fab fa-tiktok"></i></a>
          </div>
        </div>
        <form action="#" method="POST" class="contact-form animate-fade-up">
          <div class="form-row">
            <input type="text" placeholder="Your Name" required class="form-control" />
            <input type="email" placeholder="Your Email" required class="form-control" />
          </div>
          <input type="tel" placeholder="Phone (optional)" class="form-control" />
          <textarea rows="4" placeholder="How can we help?" required class="form-control"></textarea>
          <button type="submit" class="form-btn">Send Message</button>
        </form>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer>
    <div class="container">
      <div class="footer-grid">
        <div class="footer-col">
          <div class="logo">
            <i class="fas fa-coffee"></i>
            <span>Beean</span>Haven
          </div>
          <p>Handcrafted single-origin coffees, expertly roasted with care.</p>
          <div class="social-icons">
            <a href="#" class="social-link"><i class="fab fa-facebook-f"></i></a>
            <a href="#" class="social-link"><i class="fab fa-instagram"></i></a>
            <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
            <a href="#" class="social-link"><i class="fab fa-tiktok"></i></a>
          </div>
        </div>
        <div class="footer-col">
          <h3>Quick Links</h3>
          <ul>
            <li><a href="#hero">Home</a></li>
            <li><a href="#features">Features</a></li>
            <li><a href="#brews">Products</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#testimonials">Reviews</a></li>
          </ul>
        </div>
        <div class="footer-col">
          <h3>Support</h3>
          <ul>
            <li><a href="#">Shipping Policy</a></li>
            <li><a href="#">Returns</a></li>
            <li><a href="#">FAQ</a></li>
            <li><a href="#">Privacy</a></li>
            <li><a href="#">Terms</a></li>
          </ul>
        </div>
        <div class="footer-col">
          <h3>Newsletter</h3>
          <p>Stay updated on new releases, brewing tips, and exclusive offers.</p>
          <form action="#">
            <input type="email" placeholder="Email Address" class="form-control" style="margin-bottom: 8px;" />
            <button type="submit" class="btn-outline">Subscribe</button>
          </form>
        </div>
      </div>
      <div class="copyright">
        &copy; 2024 Bean Haven. All rights reserved.
      </div>
    </div>
  </footer>

  <!-- Back to Top Button -->
  <button id="backToTop" aria-label="Back to top" style="display:none;">
    <i class="fas fa-chevron-up"></i>
  </button>

  <!-- Scripts -->
  <script>
    // Smooth scroll
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function(e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
          window.scrollTo({
            top: target.offsetTop - 60,
            behavior: 'smooth'
          });
        }
      });
    });

    // Mobile navigation toggle
    const mobileMenuToggle = document.getElementById('mobileMenuToggle');
    const navLinks = document.getElementById('navLinks');

    mobileMenuToggle.addEventListener('click', () => {
      navLinks.classList.toggle('active');
    });

    // Close mobile menu when clicking links
    document.querySelectorAll('.nav-links a').forEach(link => {
      link.addEventListener('click', () => {
        navLinks.classList.remove('active');
      });
    });

    // Scroll progress bar
    const progressBar = document.getElementById('progressBar');
    window.addEventListener('scroll', () => {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      const docHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight) - Math.max(document.body.clientHeight, document.documentElement.clientHeight);
      const scrolledPercent = Math.min(Math.round((scrollTop / docHeight) * 100), 100);
      progressBar.style.width = `${scrolledPercent}%`;
    });

    // Back to top button
    const backToTop = document.getElementById('backToTop');
    window.addEventListener('scroll', () => {
      if (window.scrollY > 300) {
        backToTop.style.display = 'flex';
      } else {
        backToTop.style.display = 'none';
      }
    });

    backToTop.addEventListener('click', () => {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    });

    // Sticky header
    const header = document.getElementById('header');
    window.addEventListener('scroll', () => {
      if (window.scrollY > 100) {
        header.style.boxShadow = '0 10px 30px rgba(0,0,0,0.15)';
      } else {
        header.style.boxShadow = '0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06)';
      }
    });

    // Animation on scroll
    const observerOptions = {
      rootMargin: '0px',
      threshold: 0.1
    };

    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('animate-fade-up');
          observer.unobserve(entry.target);
        }
      });
    }, observerOptions);

    document.querySelectorAll('.animate-fade-up').forEach(el => observer.observe(el));

    // Form submission demo
    const form = document.querySelector('.contact-form');
    form.addEventListener('submit', function(e) {
      e.preventDefault();
      alert('Thank you! Your message has been sent. We’ll respond within 24 hours.');
      form.reset();
    });
  </script>
</body>
</html>