Welcome to Bean There

Where every cup tells a story and every sip creates a memory. Experience artisan coffee crafted with passion in the heart of downtown.

Why Choose Bean There?

We're more than just a coffee shop. We're a community hub where quality meets passion, and every visit feels like coming home.

Premium Beans

Sourced directly from sustainable farms around the world. We roast our beans in-house daily to ensure maximum freshness and flavor.

Quick Service

Our experienced baristas craft your perfect cup in under 5 minutes, without compromising on quality or attention to detail.

Cozy Atmosphere

Comfortable seating, free Wi-Fi, and the perfect ambiance for work, study, or catching up with friends in our welcoming space.

Local Community

Proud to be part of the downtown community, supporting local artists, hosting events, and creating connections that matter.

Fair Prices

Quality doesn't have to break the bank. We offer competitive prices on all our handcrafted beverages and fresh pastries.

Satisfaction Guaranteed

Not happy with your order? We'll make it right. Your satisfaction is our top priority, and we stand behind every cup we serve.

What Our Customers Say

Don't just take our word for it. Here's what our loyal customers have to say about their Bean There experience.

"Bean There has become my daily ritual. The coffee is exceptional, and the staff always remembers my order. It's like having a personal coffee haven in the city."

SM
Sarah Mitchell
Marketing Director

"The atmosphere at Bean There is perfect for remote work. Great Wi-Fi, comfortable seating, and the best coffee in town. I practically live here now!"

MJ
Michael Johnson
Freelance Designer

"I've tried every coffee shop downtown, and Bean There is hands down the best. The seasonal drinks are incredible, and the pastries are always fresh."

EC
Emily Chen
Local Food Blogger

Our Story

Founded in 2018 by coffee enthusiasts Maria and James Rodriguez, Bean There began as a dream to create a space where community and quality coffee intersect. After traveling the world and experiencing diverse coffee cultures, they returned home with a mission to bring authentic, artisanal coffee to their neighborhood.

What started as a small 800-square-foot space has grown into a beloved community hub, but we've never lost sight of our core values: exceptional coffee, genuine hospitality, and supporting our local community. Every bean is carefully sourced from ethical farms, every cup is crafted with precision, and every customer is welcomed like family.

Today, we're proud to serve over 500 customers daily, host local art exhibitions, support community events, and provide a space where connections are made over the perfect cup of coffee.

Fresh Daily

We roast our beans every morning to ensure maximum freshness and flavor in every cup.

Ethically Sourced

Direct relationships with farmers ensure fair prices and sustainable farming practices.

Community First

Supporting local artists, charities, and events is at the heart of everything we do.

Visit Us Today

Located in the heart of downtown, Bean There is easily accessible and always ready to welcome you with a warm atmosphere and exceptional coffee.

Location & Contact

Address
425 Main Street, Downtown District
Seattle, WA 98101
Phone
(206) 555-BEAN

Hours of Operation

Monday - Friday 6:00 AM - 8:00 PM
Saturday 7:00 AM - 9:00 PM
Sunday 8:00 AM - 6:00 PM

Special Hours

During holidays and special events, our hours may vary. Follow us on social media or call ahead to confirm our schedule.

Follow Us

Ready for Your Perfect Cup?

Don't just take our word for it. Visit Bean There today and discover why we're the neighborhood's favorite coffee destination. Your taste buds will thank you.

HTML Source Code

<header class="bg-stone-900 text-stone-100">
  <nav class="container mx-auto px-6 py-4 flex items-center justify-between">
    <div class="flex items-center space-x-2">
      <div class="w-8 h-8 bg-amber-600 rounded-full flex items-center justify-center">
        <svg class="w-5 h-5 text-stone-900" fill="currentColor" viewBox="0 0 24 24">
          <path d="M2 21h20v-2H2v2zM20 8V5l1-1h1v4h-2zM20 3V1h-2v2h2zM15 13.5c0-2.5 2.5-4.5 2.5-4.5S20 11 20 13.5V15h-5v-1.5zM12.5 11.5c.83 0 1.5-.67 1.5-1.5s-.67-1.5-1.5-1.5S11 9.17 11 10s.67 1.5 1.5 1.5zM12.5 7.5c.83 0 1.5-.67 1.5-1.5S13.33 4.5 12.5 4.5 11 5.17 11 6s.67 1.5 1.5 1.5z"/>
        </svg>
      </div>
      <span class="text-2xl font-bold">Bean There</span>
    </div>
    <div class="hidden md:flex space-x-8">
      <a href="#home" class="hover:text-amber-400 transition duration-300">Home</a>
      <a href="#menu" class="hover:text-amber-400 transition duration-300">Menu</a>
      <a href="#about" class="hover:text-amber-400 transition duration-300">About</a>
      <a href="#contact" class="hover:text-amber-400 transition duration-300">Contact</a>
    </div>
    <button class="md:hidden text-stone-100">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
      </svg>
    </button>
  </nav>
</header>

<main>
  <!-- Hero Section -->
  <section id="home" class="relative bg-gradient-to-br from-stone-900 to-stone-800 text-stone-100 py-20 lg:py-32">
    <div class="absolute inset-0 bg-black opacity-40"></div>
    <div class="container mx-auto px-6 relative z-10">
      <div class="max-w-4xl mx-auto text-center">
        <h1 class="text-5xl lg:text-7xl font-bold mb-6 leading-tight">
          Welcome to <span class="text-amber-400">Bean There</span>
        </h1>
        <p class="text-xl lg:text-2xl mb-8 text-stone-300">
          Where every cup tells a story and every sip creates a memory. Experience artisan coffee crafted with passion in the heart of downtown.
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
          <button class="bg-amber-600 hover:bg-amber-700 text-stone-900 font-semibold px-8 py-4 rounded-lg transition duration-300 transform hover:scale-105">
            View Our Menu
          </button>
          <button class="border-2 border-stone-100 hover:bg-stone-100 hover:text-stone-900 font-semibold px-8 py-4 rounded-lg transition duration-300">
            Visit Us Today
          </button>
        </div>
      </div>
    </div>
    <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
      <svg class="w-6 h-6 text-stone-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
      </svg>
    </div>
  </section>

  <!-- Features Section -->
  <section class="py-20 bg-stone-50">
    <div class="container mx-auto px-6">
      <div class="text-center mb-16">
        <h2 class="text-4xl lg:text-5xl font-bold text-stone-900 mb-4">Why Choose Bean There?</h2>
        <p class="text-xl text-stone-600 max-w-3xl mx-auto">
          We're more than just a coffee shop. We're a community hub where quality meets passion, and every visit feels like coming home.
        </p>
      </div>
      
      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
        <div class="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition duration-300">
          <div class="w-16 h-16 bg-amber-100 rounded-lg flex items-center justify-center mb-6">
            <svg class="w-8 h-8 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"></path>
            </svg>
          </div>
          <h3 class="text-2xl font-bold text-stone-900 mb-4">Premium Beans</h3>
          <p class="text-stone-600">
            Sourced directly from sustainable farms around the world. We roast our beans in-house daily to ensure maximum freshness and flavor.
          </p>
        </div>

        <div class="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition duration-300">
          <div class="w-16 h-16 bg-amber-100 rounded-lg flex items-center justify-center mb-6">
            <svg class="w-8 h-8 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
          </div>
          <h3 class="text-2xl font-bold text-stone-900 mb-4">Quick Service</h3>
          <p class="text-stone-600">
            Our experienced baristas craft your perfect cup in under 5 minutes, without compromising on quality or attention to detail.
          </p>
        </div>

        <div class="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition duration-300">
          <div class="w-16 h-16 bg-amber-100 rounded-lg flex items-center justify-center mb-6">
            <svg class="w-8 h-8 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
            </svg>
          </div>
          <h3 class="text-2xl font-bold text-stone-900 mb-4">Cozy Atmosphere</h3>
          <p class="text-stone-600">
            Comfortable seating, free Wi-Fi, and the perfect ambiance for work, study, or catching up with friends in our welcoming space.
          </p>
        </div>

        <div class="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition duration-300">
          <div class="w-16 h-16 bg-amber-100 rounded-lg flex items-center justify-center mb-6">
            <svg class="w-8 h-8 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
            </svg>
          </div>
          <h3 class="text-2xl font-bold text-stone-900 mb-4">Local Community</h3>
          <p class="text-stone-600">
            Proud to be part of the downtown community, supporting local artists, hosting events, and creating connections that matter.
          </p>
        </div>

        <div class="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition duration-300">
          <div class="w-16 h-16 bg-amber-100 rounded-lg flex items-center justify-center mb-6">
            <svg class="w-8 h-8 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"></path>
            </svg>
          </div>
          <h3 class="text-2xl font-bold text-stone-900 mb-4">Fair Prices</h3>
          <p class="text-stone-600">
            Quality doesn't have to break the bank. We offer competitive prices on all our handcrafted beverages and fresh pastries.
          </p>
        </div>

        <div class="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition duration-300">
          <div class="w-16 h-16 bg-amber-100 rounded-lg flex items-center justify-center mb-6">
            <svg class="w-8 h-8 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
          </div>
          <h3 class="text-2xl font-bold text-stone-900 mb-4">Satisfaction Guaranteed</h3>
          <p class="text-stone-600">
            Not happy with your order? We'll make it right. Your satisfaction is our top priority, and we stand behind every cup we serve.
          </p>
        </div>
      </div>
    </div>
  </section>

  <!-- Menu Preview Section -->
  <section id="menu" class="py-20 bg-white">
    <div class="container mx-auto px-6">
      <div class="text-center mb-16">
        <h2 class="text-4xl lg:text-5xl font-bold text-stone-900 mb-4">Our Signature Drinks</h2>
        <p class="text-xl text-stone-600 max-w-3xl mx-auto">
          From classic espresso to innovative seasonal blends, discover your new favorite cup at Bean There.
        </p>
      </div>

      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
        <div class="group cursor-pointer">
          <div class="bg-stone-100 rounded-xl p-6 group-hover:bg-amber-50 transition duration-300">
            <div class="w-20 h-20 bg-amber-600 rounded-full mx-auto mb-4 flex items-center justify-center">
              <svg class="w-10 h-10 text-white" fill="currentColor" viewBox="0 0 24 24">
                <path d="M2 21h20v-2H2v2zM20 8V5l1-1h1v4h-2zM20 3V1h-2v2h2zM15 13.5c0-2.5 2.5-4.5 2.5-4.5S20 11 20 13.5V15h-5v-1.5z"/>
              </svg>
            </div>
            <h3 class="text-xl font-bold text-stone-900 mb-2">Classic Espresso</h3>
            <p class="text-stone-600 mb-4">Rich, bold, and perfectly extracted. The foundation of all great coffee drinks.</p>
            <div class="text-2xl font-bold text-amber-600">$2.95</div>
          </div>
        </div>

        <div class="group cursor-pointer">
          <div class="bg-stone-100 rounded-xl p-6 group-hover:bg-amber-50 transition duration-300">
            <div class="w-20 h-20 bg-amber-600 rounded-full mx-auto mb-4 flex items-center justify-center">
              <svg class="w-10 h-10 text-white" fill="currentColor" viewBox="0 0 24 24">
                <path d="M18.5 3H6c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h12.5c1.38 0 2.5-1.12 2.5-2.5v-13C21 4.12 19.88 3 18.5 3zM18.5 17H6V7h12.5v10z"/>
              </svg>
            </div>
            <h3 class="text-xl font-bold text-stone-900 mb-2">Caramel Macchiato</h3>
            <p class="text-stone-600 mb-4">Vanilla syrup, steamed milk, espresso, and rich caramel drizzle.</p>
            <div class="text-2xl font-bold text-amber-600">$4.75</div>
          </div>
        </div>

        <div class="group cursor-pointer">
          <div class="bg-stone-100 rounded-xl p-6 group-hover:bg-amber-50 transition duration-300">
            <div class="w-20 h-20 bg-amber-600 rounded-full mx-auto mb-4 flex items-center justify-center">
              <svg class="w-10 h-10 text-white" fill="currentColor" viewBox="0 0 24 24">
                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
              </svg>
            </div>
            <h3 class="text-xl font-bold text-stone-900 mb-2">Cold Brew</h3>
            <p class="text-stone-600 mb-4">Smooth and refreshing, slow-steeped for 12 hours for maximum flavor.</p>
            <div class="text-2xl font-bold text-amber-600">$3.95</div>
          </div>
        </div>

        <div class="group cursor-pointer">
          <div class="bg-stone-100 rounded-xl p-6 group-hover:bg-amber-50 transition duration-300">
            <div class="w-20 h-20 bg-amber-600 rounded-full mx-auto mb-4 flex items-center justify-center">
              <svg class="w-10 h-10 text-white" fill="currentColor" viewBox="0 0 24 24">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
              </svg>
            </div>
            <h3 class="text-xl font-bold text-stone-900 mb-2">Seasonal Special</h3>
            <p class="text-stone-600 mb-4">Ask about our rotating seasonal drinks featuring local ingredients.</p>
            <div class="text-2xl font-bold text-amber-600">$5.25</div>
          </div>
        </div>
      </div>

      <div class="text-center mt-12">
        <button class="bg-amber-600 hover:bg-amber-700 text-white font-semibold px-8 py-3 rounded-lg transition duration-300 transform hover:scale-105">
          View Full Menu
        </button>
      </div>
    </div>
  </section>

  <!-- Testimonials Section -->
  <section class="py-20 bg-stone-900 text-stone-100">
    <div class="container mx-auto px-6">
      <div class="text-center mb-16">
        <h2 class="text-4xl lg:text-5xl font-bold mb-4">What Our Customers Say</h2>
        <p class="text-xl text-stone-300 max-w-3xl mx-auto">
          Don't just take our word for it. Here's what our loyal customers have to say about their Bean There experience.
        </p>
      </div>

      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
        <div class="bg-stone-800 rounded-xl p-8">
          <div class="flex items-center mb-4">
            <div class="flex text-amber-400">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
              </svg>
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
              </svg>
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
              </svg>
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
              </svg>
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
              </svg>
            </div>
          </div>
          <p class="text-stone-300 mb-6">
            "Bean There has become my daily ritual. The coffee is exceptional, and the staff always remembers my order. It's like having a personal coffee haven in the city."
          </p>
          <div class="flex items-center">
            <div class="w-12 h-12 bg-amber-600 rounded-full flex items-center justify-center mr-4">
              <span class="text-stone-900 font-bold">SM</span>
            </div>
            <div>
              <div class="font-bold">Sarah Mitchell</div>
              <div class="text-stone-400 text-sm">Marketing Director</div>
            </div>
          </div>
        </div>

        <div class="bg-stone-800 rounded-xl p-8">
          <div class="flex items-center mb-4">
            <div class="flex text-amber-400">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
              </svg>
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
              </svg>
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
              </svg>
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
              </svg>
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
              </svg>
            </div>
          </div>
          <p class="text-stone-300 mb-6">
            "The atmosphere at Bean There is perfect for remote work. Great Wi-Fi, comfortable seating, and the best coffee in town. I practically live here now!"
          </p>
          <div class="flex items-center">
            <div class="w-12 h-12 bg-amber-600 rounded-full flex items-center justify-center mr-4">
              <span class="text-stone-900 font-bold">MJ</span>
            </div>
            <div>
              <div class="font-bold">Michael Johnson</div>
              <div class="text-stone-400 text-sm">Freelance Designer</div>
            </div>
          </div>
        </div>

        <div class="bg-stone-800 rounded-xl p-8">
          <div class="flex items-center mb-4">
            <div class="flex text-amber-400">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
              </svg>
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
              </svg>
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
              </svg>
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
              </svg>
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
              </svg>
            </div>
          </div>
          <p class="text-stone-300 mb-6">
            "I've tried every coffee shop downtown, and Bean There is hands down the best. The seasonal drinks are incredible, and the pastries are always fresh."
          </p>
          <div class="flex items-center">
            <div class="w-12 h-12 bg-amber-600 rounded-full flex items-center justify-center mr-4">
              <span class="text-stone-900 font-bold">EC</span>
            </div>
            <div>
              <div class="font-bold">Emily Chen</div>
              <div class="text-stone-400 text-sm">Local Food Blogger</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- About Section -->
  <section id="about" class="py-20 bg-stone-50">
    <div class="container mx-auto px-6">
      <div class="grid lg:grid-cols-2 gap-12 items-center">
        <div>
          <h2 class="text-4xl lg:text-5xl font-bold text-stone-900 mb-6">Our Story</h2>
          <p class="text-lg text-stone-600 mb-6">
            Founded in 2018 by coffee enthusiasts Maria and James Rodriguez, Bean There began as a dream to create a space where community and quality coffee intersect. After traveling the world and experiencing diverse coffee cultures, they returned home with a mission to bring authentic, artisanal coffee to their neighborhood.
          </p>
          <p class="text-lg text-stone-600 mb-6">
            What started as a small 800-square-foot space has grown into a beloved community hub, but we've never lost sight of our core values: exceptional coffee, genuine hospitality, and supporting our local community. Every bean is carefully sourced from ethical farms, every cup is crafted with precision, and every customer is welcomed like family.
          </p>
          <p class="text-lg text-stone-600 mb-8">
            Today, we're proud to serve over 500 customers daily, host local art exhibitions, support community events, and provide a space where connections are made over the perfect cup of coffee.
          </p>
          <div class="flex flex-col sm:flex-row gap-4">
            <button class="bg-amber-600 hover:bg-amber-700 text-white font-semibold px-6 py-3 rounded-lg transition duration-300">
              Meet Our Team
            </button>
            <button class="border-2 border-stone-300 hover:border-amber-600 text-stone-700 hover:text-amber-600 font-semibold px-6 py-3 rounded-lg transition duration-300">
              Our Values
            </button>
          </div>
        </div>
        <div class="space-y-4">
          <div class="bg-white rounded-xl p-6 shadow-lg">
            <h3 class="text-2xl font-bold text-stone-900 mb-2">Fresh Daily</h3>
            <p class="text-stone-600">We roast our beans every morning to ensure maximum freshness and flavor in every cup.</p>
          </div>
          <div class="bg-white rounded-xl p-6 shadow-lg">
            <h3 class="text-2xl font-bold text-stone-900 mb-2">Ethically Sourced</h3>
            <p class="text-stone-600">Direct relationships with farmers ensure fair prices and sustainable farming practices.</p>
          </div>
          <div class="bg-white rounded-xl p-6 shadow-lg">
            <h3 class="text-2xl font-bold text-stone-900 mb-2">Community First</h3>
            <p class="text-stone-600">Supporting local artists, charities, and events is at the heart of everything we do.</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Location & Hours Section -->
  <section id="contact" class="py-20 bg-white">
    <div class="container mx-auto px-6">
      <div class="text-center mb-16">
        <h2 class="text-4xl lg:text-5xl font-bold text-stone-900 mb-4">Visit Us Today</h2>
        <p class="text-xl text-stone-600 max-w-3xl mx-auto">
          Located in the heart of downtown, Bean There is easily accessible and always ready to welcome you with a warm atmosphere and exceptional coffee.
        </p>
      </div>

      <div class="grid lg:grid-cols-2 gap-12">
        <div>
          <div class="bg-stone-100 rounded-xl p-8">
            <h3 class="text-2xl font-bold text-stone-900 mb-6">Location & Contact</h3>
            <div class="space-y-4">
              <div class="flex items-start space-x-3">
                <svg class="w-6 h-6 text-amber-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                </svg>
                <div>
                  <div class="font-semibold text-stone-900">Address</div>
                  <div class="text-stone-600">425 Main Street, Downtown District<br>Seattle, WA 98101</div>
                </div>
              </div>
              <div class="flex items-start space-x-3">
                <svg class="w-6 h-6 text-amber-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                </svg>
                <div>
                  <div class="font-semibold text-stone-900">Phone</div>
                  <div class="text-stone-600">(206) 555-BEAN</div>
                </div>
              </div>
              <div class="flex items-start space-x-3">
                <svg class="w-6 h-6 text-amber-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                </svg>
                <div>
                  <div class="font-semibold text-stone-900">Email</div>
                  <div class="text-stone-600">[email protected]</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div>
          <div class="bg-stone-100 rounded-xl p-8">
            <h3 class="text-2xl font-bold text-stone-900 mb-6">Hours of Operation</h3>
            <div class="space-y-3">
              <div class="flex justify-between py-2 border-b border-stone-200">
                <span class="text-stone-900 font-medium">Monday - Friday</span>
                <span class="text-stone-600">6:00 AM - 8:00 PM</span>
              </div>
              <div class="flex justify-between py-2 border-b border-stone-200">
                <span class="text-stone-900 font-medium">Saturday</span>
                <span class="text-stone-600">7:00 AM - 9:00 PM</span>
              </div>
              <div class="flex justify-between py-2 border-b border-stone-200">
                <span class="text-stone-900 font-medium">Sunday</span>
                <span class="text-stone-600">8:00 AM - 6:00 PM</span>
              </div>
            </div>
            
            <div class="mt-8 p-4 bg-amber-50 rounded-lg">
              <h4 class="font-bold text-stone-900 mb-2">Special Hours</h4>
              <p class="text-stone-600 text-sm">
                During holidays and special events, our hours may vary. Follow us on social media or call ahead to confirm our schedule.
              </p>
            </div>
          </div>
        </div>
      </div>

      <div class="mt-12 text-center">
        <h3 class="text-2xl font-bold text-stone-900 mb-4">Follow Us</h3>
        <div class="flex justify-center space-x-4">
          <a href="#" class="w-12 h-12 bg-amber-600 hover:bg-amber-700 text-white rounded-lg flex items-center justify-center transition duration-300">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
              <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
            </svg>
          </a>
          <a href="#" class="w-12 h-12 bg-amber-600 hover:bg-amber-700 text-white rounded-lg flex items-center justify-center transition duration-300">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
            </svg>
          </a>
          <a href="#" class="w-12 h-12 bg-amber-600 hover:bg-amber-700 text-white rounded-lg flex items-center justify-center transition duration-300">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
              <path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/>
            </svg>
          </a>
        </div>
      </div>
    </div>
  </section>

  <!-- CTA Section -->
  <section class="py-20 bg-gradient-to-br from-amber-600 to-amber-700 text-white">
    <div class="container mx-auto px-6 text-center">
      <h2 class="text-4xl lg:text-5xl font-bold mb-6">Ready for Your Perfect Cup?</h2>
      <p class="text-xl mb-8 text-amber-100 max-w-3xl mx-auto">
        Don't just take our word for it. Visit Bean There today and discover why we're the neighborhood's favorite coffee destination. Your taste buds will thank you.
      </p>
      <div class="flex flex-col sm:flex-row gap-4 justify-center">
        <button class="bg-white hover:bg-stone-100 text-amber-700 font-semibold px-8 py-4 rounded-lg transition duration-300 transform hover:scale-105">
          Get Directions
        </button>
        <button class="border-2 border-white hover:bg-white hover:text-amber-700 font-semibold px-8 py-4 rounded-lg transition duration-300">
          Order Online
        </button>
      </div>
    </div>
  </section>
</main>

<footer class="bg-stone-900 text-stone-300">
  <div class="container mx-auto px-6 py-12">
    <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
      <div>
        <div class="flex items-center space-x-2 mb-4">
          <div class="w-8 h-8 bg-amber-600 rounded-full flex items-center justify-center">
            <svg class="w-5 h-5 text-stone-900" fill="currentColor" viewBox="0 0 24 24">
              <path d="M2 21h20v-2H2v2zM20 8V5l1-1h1v4h-2zM20 3V1h-2v2h2zM15 13.5c0-2.5 2.5-4.5 2.5-4.5S20 11 20 13.5V15h-5v-1.5z"/>
            </svg>
          </div>
          <span class="text-2xl font-bold text-white">Bean There</span>
        </div>
        <p class="text-stone-400 mb-4">
          Crafting exceptional coffee experiences and building community connections one cup at a time.
        </p>
        <div class="flex space-x-3">
          <a href="#" class="w-8 h-8 bg-stone-800 hover:bg-amber-600 rounded-lg flex items-center justify-center transition duration-300">
            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
              <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
            </svg>
          </a>
          <a href="#" class="w-8 h-8 bg-stone-800 hover:bg-amber-600 rounded-lg flex items-center justify-center transition duration-300">
            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
            </svg>
          </a>
          <a href="#" class="w-8 h-8 bg-stone-800 hover:bg-amber-600 rounded-lg flex items-center justify-center transition duration-300">
            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
              <path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/>
            </svg>
          </a>
        </div>
      </div>

      <div>
        <h3 class="text-lg font-semibold text-white mb-4">Quick Links</h3>
        <ul class="space-y-2">
          <li><a href="#home" class="text-stone-400 hover:text-amber-400 transition duration-300">Home</a></li>
          <li><a href="#menu" class="text-stone-400 hover:text-amber-400 transition duration-300">Menu</a></li>
          <li><a href="#about" class="text-stone-400 hover:text-amber-400 transition duration-300">About Us</a></li>
          <li><a href="#contact" class="text-stone-400 hover:text-amber-400 transition duration-300">Contact</a></li>
          <li><a href="#" class="text-stone-400 hover:text-amber-400 transition duration-300">Catering</a></li>
        </ul>
      </div>

      <div>
        <h3 class="text-lg font-semibold text-white mb-4">Services</h3>
        <ul class="space-y-2">
          <li><a href="#" class="text-stone-400 hover:text-amber-400 transition duration-300">Online Ordering</a></li>
          <li><a href="#" class="text-stone-400 hover:text-amber-400 transition duration-300">Coffee Subscriptions</a></li>
          <li><a href="#" class="text-stone-400 hover:text-amber-400 transition duration-300">Private Events</a></li>
          <li><a href="#" class="text-stone-400 hover:text-amber-400 transition duration-300">Coffee Classes</a></li>
          <li><a href="#" class="text-stone-400 hover:text-amber-400 transition duration-300">Gift Cards</a></li>
        </ul>
      </div>

      <div>
        <h3 class="text-lg font-semibold text-white mb-4">Newsletter</h3>
        <p class="text-stone-400 mb-4 text-sm">
          Stay updated with our latest blends, events, and special offers.
        </p>
        <div class="flex">
          <input type="email" placeholder="Enter your email" class="flex-1 px-3 py-2 bg-stone-800 text-white rounded-l-lg focus:outline-none focus:ring-2 focus:ring-amber-600">
          <button class="bg-amber-600 hover:bg-amber-700 px-4 py-2 rounded-r-lg transition duration-300">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>

    <div class="border-t border-stone-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
      <div class="text-stone-400 text-sm">
        © 2024 Bean There Coffee Shop. All rights reserved.
      </div>
      <div class="flex space-x-6 mt-4 md:mt-0">
        <a href="#" class="text-stone-400 hover:text-amber-400 text-sm transition duration-300">Privacy Policy</a>
        <a href="#" class="text-stone-400 hover:text-amber-400 text-sm transition duration-300">Terms of Service</a>
        <a href="#" class="text-stone-400 hover:text-amber-400 text-sm transition duration-300">Accessibility</a>
      </div>
    </div>
  </div>
</footer>