Wake Up to Perfection

<!-- Header Navigation -->
<header class="fixed w-full top-0 z-50 bg-white/90 backdrop-blur-md shadow-sm">
  <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between items-center h-16">
      <div class="flex items-center space-x-2">
        <i data-lucide="coffee" class="w-8 h-8 text-amber-700"></i>
        <span class="text-2xl font-bold text-stone-800">Bean Dream</span>
      </div>
      
      <div class="hidden md:flex items-center space-x-8">
        <a href="#about" class="text-stone-600 hover:text-amber-700 transition-colors">About</a>
        <a href="#menu" class="text-stone-600 hover:text-amber-700 transition-colors">Menu</a>
        <a href="#features" class="text-stone-600 hover:text-amber-700 transition-colors">Why Us</a>
        <a href="#testimonials" class="text-stone-600 hover:text-amber-700 transition-colors">Reviews</a>
        <a href="#contact" class="px-5 py-2 bg-amber-700 text-white rounded-full hover:bg-amber-800 transition-colors">Visit Us</a>
      </div>
      
      <button class="md:hidden">
        <i data-lucide="menu" class="w-6 h-6 text-stone-800"></i>
      </button>
    </div>
  </nav>
</header>

<!-- Hero Section -->
<section class="relative min-h-screen flex items-center justify-center pt-16 bg-gradient-to-br from-amber-50 via-orange-50 to-yellow-50 overflow-hidden">
  <div class="absolute inset-0 opacity-10">
    <div class="absolute top-20 left-10 w-64 h-64 bg-amber-400 rounded-full blur-3xl"></div>
    <div class="absolute bottom-20 right-10 w-80 h-80 bg-orange-400 rounded-full blur-3xl"></div>
  </div>
  
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 relative z-10">
    <div class="grid lg:grid-cols-2 gap-12 items-center">
      <div class="text-center lg:text-left">
        <span class="inline-block px-4 py-2 bg-amber-100 text-amber-800 rounded-full text-sm font-medium mb-6">
          ☕ Artisan Coffee Since 2015
        </span>
        <h1 class="text-5xl md:text-6xl lg:text-7xl font-bold text-stone-800 leading-tight mb-6">
          Wake Up to
          <span class="text-amber-700">Perfection</span>
        </h1>
        <p class="text-xl text-stone-600 mb-8 max-w-lg mx-auto lg:mx-0">
          Experience the finest handcrafted beverages, ethically sourced beans, and a cozy atmosphere that feels like home.
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
          <a href="#menu" class="px-8 py-4 bg-amber-700 text-white font-semibold rounded-full hover:bg-amber-800 transition-all transform hover:scale-105 flex items-center justify-center gap-2">
            View Our Menu
            <i data-lucide="arrow-right" class="w-5 h-5"></i>
          </a>
          <a href="#about" class="px-8 py-4 border-2 border-stone-300 text-stone-700 font-semibold rounded-full hover:border-amber-700 hover:text-amber-700 transition-all">
            Our Story
          </a>
        </div>
        
        <div class="flex items-center gap-8 mt-12 justify-center lg:justify-start">
          <div class="text-center">
            <div class="text-3xl font-bold text-amber-700">50K+</div>
            <div class="text-stone-500 text-sm">Happy Customers</div>
          </div>
          <div class="text-center">
            <div class="text-3xl font-bold text-amber-700">25+</div>
            <div class="text-stone-500 text-sm">Unique Blends</div>
          </div>
          <div class="text-center">
            <div class="text-3xl font-bold text-amber-700">4.9 ★</div>
            <div class="text-stone-500 text-sm">Average Rating</div>
          </div>
        </div>
      </div>
      
      <div class="relative">
        <div class="relative z-10">
          <div class="bg-white rounded-3xl shadow-2xl p-8 transform rotate-3 hover:rotate-0 transition-transform duration-500">
            <div class="flex items-center gap-4 mb-6">
              <div class="w-16 h-16 bg-gradient-to-br from-amber-400 to-orange-500 rounded-2xl flex items-center justify-center">
                <i data-lucide="coffee" class="w-8 h-8 text-white"></i>
              </div>
              <div>
                <h3 class="font-bold text-stone-800 text-lg">Signature Latte</h3>
                <p class="text-stone-500">Our bestseller</p>
              </div>
            </div>
            <div class="flex items-center gap-1 mb-4">
              <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-current"></i>
              <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-current"></i>
              <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-current"></i>
              <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-current"></i>
              <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-current"></i>
            </div>
            <div class="text-amber-700 font-bold text-2xl">$5.99</div>
          </div>
          
          <div class="absolute -bottom-4 -left-4 bg-amber-100 rounded-2xl p-4 shadow-lg transform -rotate-6 hover:rotate-0 transition-transform">
            <div class="flex items-center gap-3">
              <i data-lucide="heart" class="w-6 h-6 text-red-500"></i>
              <span class="text-stone-700 font-medium">Made with love</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
    <i data-lucide="chevron-down" class="w-8 h-8 text-amber-700"></i>
  </div>
</section>

<!-- About Section -->
<section id="about" class="py-24 bg-white">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid lg:grid-cols-2 gap-16 items-center">
      <div class="relative">
        <div class="bg-gradient-to-br from-amber-200 to-orange-200 rounded-3xl aspect-square flex items-center justify-center">
          <div class="text-center">
            <i data-lucide="coffee" class="w-32 h-32 text-amber-700 mx-auto mb-4"></i>
            <p class="text-amber-800 font-semibold text-lg">Handcrafted with Passion</p>
          </div>
        </div>
        <div class="absolute -bottom-6 -right-6 bg-amber-700 text-white rounded-2xl p-6 shadow-xl">
          <div class="text-4xl font-bold">8+</div>
          <div class="text-amber-200">Years Experience</div>
        </div>
      </div>
      
      <div>
        <span class="text-amber-600 font-semibold uppercase tracking-wider">Our Story</span>
        <h2 class="text-4xl md:text-5xl font-bold text-stone-800 mt-2 mb-6">
          From Bean to Cup,
          <span class="text-amber-700">Every Step Matters</span>
        </h2>
        <p class="text-stone-600 text-lg mb-6">
          Bean Dream started as a small passion project in 2015, founded by coffee enthusiast Maria Chen. What began in a tiny corner café has grown into a beloved community gathering place.
        </p>
        <p class="text-stone-600 text-lg mb-8">
          We source our beans directly from sustainable farms in Colombia, Ethiopia, and Guatemala. Every cup is crafted with precision, care, and a deep respect for the art of coffee making.
        </p>
        
        <div class="grid sm:grid-cols-2 gap-6">
          <div class="flex items-start gap-4">
            <div class="w-12 h-12 bg-amber-100 rounded-xl flex items-center justify-center flex-shrink-0">
              <i data-lucide="leaf" class="w-6 h-6 text-amber-700"></i>
            </div>
            <div>
              <h4 class="font-semibold text-stone-800">100% Organic</h4>
              <p class="text-stone-500 text-sm">Certified organic beans</p>
            </div>
          </div>
          <div class="flex items-start gap-4">
            <div class="w-12 h-12 bg-amber-100 rounded-xl flex items-center justify-center flex-shrink-0">
              <i data-lucide="globe" class="w-6 h-6 text-amber-700"></i>
            </div>
            <div>
              <h4 class="font-semibold text-stone-800">Fair Trade</h4>
              <p class="text-stone-500 text-sm">Ethically sourced</p>
            </div>
          </div>
          <div class="flex items-start gap-4">
            <div class="w-12 h-12 bg-amber-100 rounded-xl flex items-center justify-center flex-shrink-0">
              <i data-lucide="heart" class="w-6 h-6 text-amber-700"></i>
            </div>
            <div>
              <h4 class="font-semibold text-stone-800">Made with Love</h4>
              <p class="text-stone-500 text-sm">Handcrafted beverages</p>
            </div>
          </div>
          <div class="flex items-start gap-4">
            <div class="w-12 h-12 bg-amber-100 rounded-xl flex items-center justify-center flex-shrink-0">
              <i data-lucide="users" class="w-6 h-6 text-amber-700"></i>
            </div>
            <div>
              <h4 class="font-semibold text-stone-800">Community First</h4>
              <p class="text-stone-500 text-sm">Local partnerships</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Menu Section -->
<section id="menu" class="py-24 bg-gradient-to-b from-stone-50 to-white">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-16">
      <span class="text-amber-600 font-semibold uppercase tracking-wider">Our Menu</span>
      <h2 class="text-4xl md:text-5xl font-bold text-stone-800 mt-2 mb-4">
        Signature Drinks
      </h2>
      <p class="text-stone-600 text-lg max-w-2xl mx-auto">
        Discover our carefully curated selection of handcrafted beverages, each made with the finest ingredients.
      </p>
    </div>
    
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Menu Item 1 -->
      <div class="bg-white rounded-3xl p-6 shadow-lg hover:shadow-xl transition-shadow border border-stone-100">
        <div class="bg-gradient-to-br from-amber-100 to-orange-100 rounded-2xl p-8 mb-6 flex items-center justify-center">
          <i data-lucide="coffee" class="w-16 h-16 text-amber-700"></i>
        </div>
        <h3 class="text-xl font-bold text-stone-800 mb-2">Classic Espresso</h3>
        <p class="text-stone-500 mb-4">Rich, bold, and perfectly extracted single or double shot</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-amber-700">$3.50</span>
          <button class="w-10 h-10 bg-amber-700 text-white rounded-full flex items-center justify-center hover:bg-amber-800 transition-colors">
            <i data-lucide="plus" class="w-5 h-5"></i>
          </button>
        </div>
      </div>
      
      <!-- Menu Item 2 -->
      <div class="bg-white rounded-3xl p-6 shadow-lg hover:shadow-xl transition-shadow border border-stone-100">
        <div class="bg-gradient-to-br from-amber-100 to-orange-100 rounded-2xl p-8 mb-6 flex items-center justify-center">
          <i data-lucide="cup-soda" class="w-16 h-16 text-amber-700"></i>
        </div>
        <h3 class="text-xl font-bold text-stone-800 mb-2">Caramel Macchiato</h3>
        <p class="text-stone-500 mb-4">Espresso with vanilla, steamed milk, and caramel drizzle</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-amber-700">$5.99</span>
          <button class="w-10 h-10 bg-amber-700 text-white rounded-full flex items-center justify-center hover:bg-amber-800 transition-colors">
            <i data-lucide="plus" class="w-5 h-5"></i>
          </button>
        </div>
      </div>
      
      <!-- Menu Item 3 -->
      <div class="bg-white rounded-3xl p-6 shadow-lg hover:shadow-xl transition-shadow border border-stone-100">
        <div class="bg-gradient-to-br from-amber-100 to-orange-100 rounded-2xl p-8 mb-6 flex items-center justify-center">
          <i data-lucide="snowflake" class="w-16 h-16 text-amber-700"></i>
        </div>
        <h3 class="text-xl font-bold text-stone-800 mb-2">Iced Vanilla Latte</h3>
        <p class="text-stone-500 mb-4">Refreshing chilled latte with premium vanilla syrup</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-amber-700">$5.49</span>
          <button class="w-10 h-10 bg-amber-700 text-white rounded-full flex items-center justify-center hover:bg-amber-800 transition-colors">
            <i data-lucide="plus" class="w-5 h-5"></i>
          </button>
        </div>
      </div>
      
      <!-- Menu Item 4 -->
      <div class="bg-white rounded-3xl p-6 shadow-lg hover:shadow-xl transition-shadow border border-stone-100">
        <div class="bg-gradient-to-br from-amber-100 to-orange-100 rounded-2xl p-8 mb-6 flex items-center justify-center">
          <i data-lucide="milk" class="w-16 h-16 text-amber-700"></i>
        </div>
        <h3 class="text-xl font-bold text-stone-800 mb-2">Matcha Latte</h3>
        <p class="text-stone-500 mb-4">Premium Japanese matcha with creamy oat milk</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-amber-700">$6.49</span>
          <button class="w-10 h-10 bg-amber-700 text-white rounded-full flex items-center justify-center hover:bg-amber-800 transition-colors">
            <i data-lucide="plus" class="w-5 h-5"></i>
          </button>
        </div>
      </div>
      
      <!-- Menu Item 5 -->
      <div class="bg-white rounded-3xl p-6 shadow-lg hover:shadow-xl transition-shadow border border-stone-100">
        <div class="bg-gradient-to-br from-amber-100 to-orange-100 rounded-2xl p-8 mb-6 flex items-center justify-center">
          <i data-lucide="cookie" class="w-16 h-16 text-amber-700"></i>
        </div>
        <h3 class="text-xl font-bold text-stone-800 mb-2">Mocha Bliss</h3>
        <p class="text-stone-500 mb-4">Chocolate lovers dream - espresso with Belgian chocolate</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-amber-700">$6.29</span>
          <button class="w-10 h-10 bg-amber-700 text-white rounded-full flex items-center justify-center hover:bg-amber-800 transition-colors">
            <i data-lucide="plus" class="w-5 h-5"></i>
          </button>
        </div>
      </div>
      
      <!-- Menu Item 6 -->
      <div class="bg-white rounded-3xl p-6 shadow-lg hover:shadow-xl transition-shadow border border-stone-100">
        <div class="bg-gradient-to-br from-amber-100 to-orange-100 rounded-2xl p-8 mb-6 flex items-center justify-center">
          <i data-lucide="flower" class="w-16 h-16 text-amber-700"></i>
        </div>
        <h3 class="text-xl font-bold text-stone-800 mb-2">Lavender Dream</h3>
        <p class="text-stone-500 mb-4">Floral espresso with house-made lavender syrup</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-amber-700">$6.99</span>
          <button class="w-10 h-10 bg-amber-700 text-white rounded-full flex items-center justify-center hover:bg-amber-800 transition-colors">
            <i data-lucide="plus" class="w-5 h-5"></i>
          </button>
        </div>
      </div>
    </div>
    
    <div class="text-center mt-12">
      <a href="#" class="inline-flex items-center gap-2 px-8 py-4 border-2 border-amber-700 text-amber-700 font-semibold rounded-full hover:bg-amber-700 hover:text-white transition-all">
        View Full Menu
        <i data-lucide="arrow-right" class="w-5 h-5"></i>
      </a>
    </div>
  </div>
</section>

<!-- Features Section -->
<section id="features" class="py-24 bg-amber-700">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-16">
      <span class="text-amber-200 font-semibold uppercase tracking-wider">Why Choose Us</span>
      <h2 class="text-4xl md:text-5xl font-bold text-white mt-2">
        The Bean Dream Difference
      </h2>
    </div>
    
    <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
      <div class="text-center">
        <div class="w-20 h-20 bg-white/10 rounded-full flex items-center justify-center mx-auto mb-6">
          <i data-lucide="award" class="w-10 h-10 text-white"></i>
        </div>
        <h3 class="text-xl font-bold text-white mb-3">Award Winning</h3>
        <p class="text-amber-100">Best Coffee Shop 2023 - City Food Awards</p>
      </div>
      
      <div class="text-center">
        <div class="w-20 h-20 bg-white/10 rounded-full flex items-center justify-center mx-auto mb-6">
          <i data-lucide="clock" class="w-10 h-10 text-white"></i>
        </div>
        <h3 class="text-xl font-bold text-white mb-3">Fast Service</h3>
        <p class="text-amber-100">Average wait time under 5 minutes</p>
      </div>
      
      <div class="text-center">
        <div class="w-20 h-20 bg-white/10 rounded-full flex items-center justify-center mx-auto mb-6">
          <i data-lucide="wifi" class="w-10 h-10 text-white"></i>
        </div>
        <h3 class="text-xl font-bold text-white mb-3">Free WiFi</h3>
        <p class="text-amber-100">High-speed internet for remote work</p>
      </div>
      
      <div class="text-center">
        <div class="w-20 h-20 bg-white/10 rounded-full flex items-center justify-center mx-auto mb-6">
          <i data-lucide="gift" class="w-10 h-10 text-white"></i>
        </div>
        <h3 class="text-xl font-bold text-white mb-3">Loyalty Rewards</h3>
        <p class="text-amber-100">Earn points with every purchase</p>
      </div>
    </div>
  </div>
</section>

<!-- Testimonials Section -->
<section id="testimonials" class="py-24 bg-white">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-16">
      <span class="text-amber-600 font-semibold uppercase tracking-wider">Testimonials</span>
      <h2 class="text-4xl md:text-5xl font-bold text-stone-800 mt-2">
        What Our Customers Say
      </h2>
    </div>
    
    <div class="grid md:grid-cols-3 gap-8">
      <div class="bg-stone-50 rounded-3xl p-8 border border-stone-100">
        <div class="flex items-center gap-1 mb-4">
          <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-current"></i>
          <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-current"></i>
          <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-current"></i>
          <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-current"></i>
          <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-current"></i>
        </div>
        <p class="text-stone-600 mb-6">
          "Bean Dream has become my daily ritual. The espresso is consistently perfect, and the staff remembers my order. Best coffee in the city, hands down!"
        </p>
        <div class="flex items-center gap-4">
          <div class="w-12 h-12 bg-amber-200 rounded-full flex items-center justify-center">
            <span class="text-amber-800 font-bold">SJ</span>
          </div>
          <div>
            <h4 class="font-semibold text-stone-800">Sarah Johnson</h4>
            <p class="text-stone-500 text-sm">Freelance Designer</p>
          </div>
        </div>
      </div>
      
      <div class="bg-stone-50 rounded-3xl p-8 border border-stone-100">
        <div class="flex items-center gap-1 mb-4">
          <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-current"></i>
          <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-current"></i>
          <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-current"></i>
          <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-current"></i>
          <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-current"></i>
        </div>
        <p class="text-stone-600 mb-6">
          "I work remotely and this is my office away from home. Great WiFi, amazing pastries, and the Caramel Macchiato is absolutely to die for!"
        </p>
        <div class="flex items-center gap-4">
          <div class="w-12 h-12 bg-orange-200 rounded-full flex items-center justify-center">
            <span class="text-orange-800 font-bold">MR</span>
          </div>
          <div>
            <h4 class="font-semibold text-stone-800">Michael Rodriguez</h4>
            <p class="text-stone-500 text-sm">Software Developer</p>
          </div>
        </div>
      </div>
      
      <div class="bg-stone-50 rounded-3xl p-8 border border-stone-100">
        <div class="flex items-center gap-1 mb-4">
          <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-current"></i>
          <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-current"></i>
          <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-current"></i>
          <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-current"></i>
          <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-current"></i>
        </div>
        <p class="text-stone-600 mb-6">
          "The atmosphere here is so warm and inviting. I love that they use sustainable beans and really care about their environmental impact. Plus, the lavender latte is divine!"
        </p>
        <div class="flex items-center gap-4">
          <div class="w-12 h-12 bg-yellow-200 rounded-full flex items-center justify-center">
            <span class="text-yellow-800 font-bold">EP</span>
          </div>
          <div>
            <h4 class="font-semibold text-stone-800">Emma Parker</h4>
            <p class="text-stone-500 text-sm">Marketing Manager</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- CTA Section -->
<section class="py-24 bg-gradient-to-br from-stone-900 via-stone-800 to-amber-900 relative overflow-hidden">
  <div class="absolute inset-0 opacity-20">
    <div class="absolute top-0 right-0 w-96 h-96 bg-amber-500 rounded-full blur-3xl"></div>
    <div class="absolute bottom-0 left-0 w-96 h-96 bg-orange-500 rounded-full blur-3xl"></div>
  </div>
  
  <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
    <h2 class="text-4xl md:text-5xl font-bold text-white mb-6">
      Ready to Taste the Difference?
    </h2>
    <p class="text-xl text-stone-300 mb-8 max-w-2xl mx-auto">
      Join us today and experience coffee the way it should be. Your first drink is on us when you sign up for our loyalty program!
    </p>
    <div class="flex flex-col sm:flex-row gap-4 justify-center">
      <a href="#contact" class="px-8 py-4 bg-amber-500 text-white font-semibold rounded-full hover:bg-amber-600 transition-all transform hover:scale-105 flex items-center justify-center gap-2">
        Find a Location
        <i data-lucide="map-pin" class="w-5 h-5"></i>
      </a>
      <a href="#" class="px-8 py-4 border-2 border-white text-white font-semibold rounded-full hover:bg-white hover:text-stone-900 transition-all flex items-center justify-center gap-2">
        Order Online
        <i data-lucide="shopping-cart" class="w-5 h-5"></i>
      </a>
    </div>
  </div>
</section>

<!-- Contact Section -->
<section id="contact" class="py-24 bg-stone-50">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid lg:grid-cols-2 gap-16">
      <div>
        <span class="text-amber-600 font-semibold uppercase tracking-wider">Contact Us</span>
        <h2 class="text-4xl md:text-5xl font-bold text-stone-800 mt-2 mb-6">
          Visit Our Cafe
        </h2>
        <p class="text-stone-600 text-lg mb-8">
          We'd love to see you! Stop by for a cup of coffee and experience the Bean Dream atmosphere firsthand.
        </p>
        
        <div class="space-y-6">
          <div class="flex items-start gap-4">
            <div class="w-12 h-12 bg-amber-100 rounded-xl flex items-center justify-center flex-shrink-0">
              <i data-lucide="map-pin" class="w-6 h-6 text-amber-700"></i>
            </div>
            <div>
              <h4 class="font-semibold text-stone-800">Location</h4>
              <p class="text-stone-600">123 Coffee Street, Downtown<br>New York, NY 10001</p>
            </div>
          </div>
          
          <div class="flex items-start gap-4">
            <div class="w-12 h-12 bg-amber-100 rounded-xl flex items-center justify-center flex-shrink-0">
              <i data-lucide="clock" class="w-6 h-6 text-amber-700"></i>
            </div>
            <div>
              <h4 class="font-semibold text-stone-800">Hours</h4>
              <p class="text-stone-600">Mon - Fri: 6:30 AM - 8:00 PM<br>Sat - Sun: 7:00 AM - 9:00 PM</p>
            </div>
          </div>
          
          <div class="flex items-start gap-4">
            <div class="w-12 h-12 bg-amber-100 rounded-xl flex items-center justify-center flex-shrink-0">
              <i data-lucide="phone" class="w-6 h-6 text-amber-700"></i>
            </div>
            <div>
              <h4 class="font-semibold text-stone-800">Phone</h4>
              <p class="text-stone-600">+1 (555) 123-4567</p>
            </div>
          </div>
          
          <div class="flex items-start gap-4">
            <div class="w-12 h-12 bg-amber-100 rounded-xl flex items-center justify-center flex-shrink-0">
              <i data-lucide="mail" class="w-6 h-6 text-amber-700"></i>
            </div>
            <div>
              <h4 class="font-semibold text-stone-800">Email</h4>
              <p class="text-stone-600">[email protected]</p>
            </div>
          </div>
        </div>
        
        <div class="flex items-center gap-4 mt-8">
          <a href="#" class="w-10 h-10 bg-stone-800 text-white rounded-full flex items-center justify-center hover:bg-amber-700 transition-colors">
            <i data-lucide="instagram" class="w-5 h-5"></i>
          </a>
          <a href="#" class="w-10 h-10 bg-stone-800 text-white rounded-full flex items-center justify-center hover:bg-amber-700 transition-colors">
            <i data-lucide="facebook" class="w-5 h-5"></i>
          </a>
          <a href="#" class="w-10 h-10 bg-stone-800 text-white rounded-full flex items-center justify-center hover:bg-amber-700 transition-colors">
            <i data-lucide="twitter" class="w-5 h-5"></i>
          </a>
        </div>
      </div>
      
      <div class="bg-white rounded-3xl p-8 shadow-xl">
        <h3 class="text-2xl font-bold text-stone-800 mb-6">Send us a Message</h3>
        <form class="space-y-6">
          <div class="grid sm:grid-cols-2 gap-6">
            <div>
              <label class="block text-stone-600 font-medium mb-2">First Name</label>
              <input type="text" class="w-full px-4 py-3 border border-stone-300 rounded-xl focus:ring-2 focus:ring-amber-500 focus:border-transparent outline-none transition-all" placeholder="John">
            </div>
            <div>
              <label class="block text-stone-600 font-medium mb-2">Last Name</label>
              <input type="text" class="w-full px-4 py-3 border border-stone-300 rounded-xl focus:ring-2 focus:ring-amber-500 focus:border-transparent outline-none transition-all" placeholder="Doe">
            </div>
          </div>
          <div>
            <label class="block text-stone-600 font-medium mb-2">Email</label>
            <input type="email" class="w-full px-4 py-3 border border-stone-300 rounded-xl focus:ring-2 focus:ring-amber-500 focus:border-transparent outline-none transition-all" placeholder="[email protected]">
          </div>
          <div>
            <label class="block text-stone-600 font-medium mb-2">Message</label>
            <textarea rows="4" class="w-full px-4 py-3 border border-stone-300 rounded-xl focus:ring-2 focus:ring-amber-500 focus:border-transparent outline-none transition-all resize-none" placeholder="Your message..."></textarea>
          </div>
          <button type="submit" class="w-full px-8 py-4 bg-amber-700 text-white font-semibold rounded-xl hover:bg-amber-800 transition-all flex items-center justify-center gap-2">
            Send Message
            <i data-lucide="send" class="w-5 h-5"></i>
          </button>
        </form>
      </div>
    </div>
  </div>
</section>

<!-- Footer -->
<footer class="bg-stone-900 text-white py-16">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid md:grid-cols-4 gap-12 mb-12">
      <div>
        <div class="flex items-center space-x-2 mb-6">
          <i data-lucide="coffee" class="w-8 h-8 text-amber-500"></i>
          <span class="text-2xl font-bold">Bean Dream</span>
        </div>
        <p class="text-stone-400">
          Crafting perfect coffee experiences since 2015. Every cup tells a story of passion, quality, and community.
        </p>
      </div>
      
      <div>
        <h4 class="font-semibold mb-4">Quick Links</h4>
        <ul class="space-y-3 text-stone-400">
          <li><a href="#about" class="hover:text-amber-500 transition-colors">About Us</a></li>
          <li><a href="#menu" class="hover:text-amber-500 transition-colors">Menu</a></li>
          <li><a href="#" class="hover:text-amber-500 transition-colors">Locations</a></li>
          <li><a href="#" class="hover:text-amber-500 transition-colors">Careers</a></li>
        </ul>
      </div>
      
      <div>
        <h4 class="font-semibold mb-4">Support</h4>
        <ul class="space-y-3 text-stone-400">
          <li><a href="#" class="hover:text-amber-500 transition-colors">FAQs</a></li>
          <li><a href="#" class="hover:text-amber-500 transition-colors">Shipping</a></li>
          <li><a href="#" class="hover:text-amber-500 transition-colors">Returns</a></li>
          <li><a href="#contact" class="hover:text-amber-500 transition-colors">Contact</a></li>
        </ul>
      </div>
      
      <div>
        <h4 class="font-semibold mb-4">Newsletter</h4>
        <p class="text-stone-400 mb-4">Subscribe for exclusive offers and coffee tips!</p>
        <div class="flex">
          <input type="email" placeholder="Your email" class="flex-1 px-4 py-3 bg-stone-800 text-white rounded-l-xl focus:outline-none focus:ring-2 focus:ring-amber-500">
          <button class="px-6 py-3 bg-amber-600 text-white rounded-r-xl hover:bg-amber-700 transition-colors">
            <i data-lucide="arrow-right" class="w-5 h-5"></i>
          </button>
        </div>
      </div>
    </div>
    
    <div class="border-t border-stone-800 pt-8 flex flex-col md:flex-row justify-between items-center">
      <p class="text-stone-400 text-sm">
        © 2024 Bean Dream Coffee. All rights reserved.
      </p>
      <div class="flex items-center gap-6 mt-4 md:mt-0 text-stone-400 text-sm">
        <a href="#" class="hover:text-amber-500 transition-colors">Privacy Policy</a>
        <a href="#" class="hover:text-amber-500 transition-colors">Terms of Service</a>
      </div>
    </div>
  </div>
</footer>

<script>
  // Initialize Lucide icons
  lucide.createIcons();
  
  // Smooth scroll for anchor links
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
      e.preventDefault();
      const target = document.querySelector(this.getAttribute('href'));
      if (target) {
        target.scrollIntoView({
          behavior: 'smooth',
          block: 'start'
        });
      }
    });
  });
</script>