Spaces:

becktech
/

brew-haven-caf

Running

App Files Files Community

becktech commited on Oct 2, 2025

Commit

b78e8c5

verified ·

1 Parent(s): f2fe603

create a site for a local cafe

Browse files

Files changed (2) hide show

README.md +8 -5
index.html +413 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Brew Haven Caf
-emoji: 🏢
-colorFrom: pink
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Brew Haven Café ☕
+colorFrom: purple
+colorTo: red
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,414 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Brew Haven Café</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            colors: {
+              primary: {
+                100: '#F9F5EB',
+                500: '#E4DCCF',
+                900: '#EA5455',
+              },
+              secondary: {
+                100: '#E4DCCF',
+                500: '#002B5B',
+                900: '#1C3879',
+              }
+            }
+          }
+        }
+      }
+    </script>
+    <style>
+      @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
+      body {
+        font-family: 'Poppins', sans-serif;
+      }
+      .hero-pattern {
+        background-image: url('http://static.photos/food/1200x630/42');
+        background-size: cover;
+        background-position: center;
+      }
+      .menu-item:hover .menu-overlay {
+        opacity: 1;
+      }
+    </style>
+</head>
+<body class="bg-primary-100 text-secondary-500">
+  <!-- Navigation -->
+  <nav class="bg-white shadow-lg sticky top-0 z-50">
+    <div class="max-w-6xl mx-auto px-4">
+      <div class="flex justify-between">
+        <div class="flex space-x-7">
+          <div>
+            <a href="#" class="flex items-center py-4 px-2">
+              <i data-feather="coffee" class="h-8 w-8 text-primary-900 mr-2"></i>
+              <span class="font-semibold text-secondary-500 text-lg">Brew Haven</span>
+            </a>
+          </div>
+          <div class="hidden md:flex items-center space-x-1">
+            <a href="#" class="py-4 px-2 text-secondary-900 border-b-4 border-primary-900 font-semibold">Home</a>
+            <a href="#menu" class="py-4 px-2 text-secondary-500 hover:text-secondary-900 transition duration-300">Menu</a>
+            <a href="#about" class="py-4 px-2 text-secondary-500 hover:text-secondary-900 transition duration-300">About</a>
+            <a href="#contact" class="py-4 px-2 text-secondary-500 hover:text-secondary-900 transition duration-300">Contact</a>
+          </div>
+        </div>
+        <div class="hidden md:flex items-center space-x-3">
+          <a href="#" class="py-2 px-6 bg-primary-900 text-white rounded-full hover:bg-primary-700 transition duration-300 font-medium">Order Now</a>
+        </div>
+        <div class="md:hidden flex items-center">
+          <button class="outline-none mobile-menu-button">
+            <i data-feather="menu" class="w-6 h-6 text-secondary-500"></i>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div class="hidden mobile-menu">
+      <ul>
+        <li><a href="#" class="block text-sm px-2 py-4 hover:bg-primary-100 transition duration-300">Home</a></li>
+        <li><a href="#menu" class="block text-sm px-2 py-4 hover:bg-primary-100 transition duration-300">Menu</a></li>
+        <li><a href="#about" class="block text-sm px-2 py-4 hover:bg-primary-100 transition duration-300">About</a></li>
+        <li><a href="#contact" class="block text-sm px-2 py-4 hover:bg-primary-100 transition duration-300">Contact</a></li>
+      </ul>
+    </div>
+  </nav>
+  <!-- Hero Section -->
+  <section class="hero-pattern relative h-96 flex items-center">
+    <div class="absolute inset-0 bg-black opacity-40"></div>
+    <div class="max-w-4xl mx-auto text-center relative z-10 px-4">
+      <h1 class="text-4xl md:text-6xl font-bold text-white mb-4">Artisan Coffee & Comfort Food</h1>
+      <p class="text-xl text-white mb-8">Locally roasted beans paired with homemade pastries since 2012</p>
+      <a href="#menu" class="inline-block bg-primary-900 text-white px-8 py-3 rounded-full hover:bg-primary-700 transition duration-300 font-medium">View Menu</a>
+    </div>
+  </section>
+  <!-- Featured Items -->
+  <section class="py-16 px-4">
+    <div class="max-w-6xl mx-auto">
+      <h2 class="text-3xl font-bold text-center mb-12">Our Specialties</h2>
+      <div class="grid md:grid-cols-3 gap-8">
+        <div class="bg-white rounded-lg shadow-lg overflow-hidden">
+          <img src="http://static.photos/food/640x360/1" alt="Cold Brew" class="w-full h-48 object-cover">
+          <div class="p-6">
+            <h3 class="text-xl font-bold mb-2">Honey Lavender Cold Brew</h3>
+            <p class="text-secondary-500 mb-4">Our signature cold brew infused with local honey and organic lavender.</p>
+            <div class="flex justify-between items-center">
+              <span class="font-bold text-primary-900">$5.50</span>
+              <button class="bg-secondary-500 text-white px-4 py-1 rounded-full text-sm hover:bg-secondary-700">Add +</button>
+            </div>
+          </div>
+        </div>
+        <div class="bg-white rounded-lg shadow-lg overflow-hidden">
+          <img src="http://static.photos/food/640x360/2" alt="Avocado Toast" class="w-full h-48 object-cover">
+          <div class="p-6">
+            <h3 class="text-xl font-bold mb-2">Avocado Toast Deluxe</h3>
+            <p class="text-secondary-500 mb-4">Sourdough bread with smashed avocado, cherry tomatoes, and microgreens.</p>
+            <div class="flex justify-between items-center">
+              <span class="font-bold text-primary-900">$8.50</span>
+              <button class="bg-secondary-500 text-white px-4 py-1 rounded-full text-sm hover:bg-secondary-700">Add +</button>
+            </div>
+          </div>
+        </div>
+        <div class="bg-white rounded-lg shadow-lg overflow-hidden">
+          <img src="http://static.photos/food/640x360/3" alt="Cinnamon Roll" class="w-full h-48 object-cover">
+          <div class="p-6">
+            <h3 class="text-xl font-bold mb-2">Cinnamon Roll</h3>
+            <p class="text-secondary-500 mb-4">Freshly baked daily with our secret family recipe and cream cheese frosting.</p>
+            <div class="flex justify-between items-center">
+              <span class="font-bold text-primary-900">$4.25</span>
+              <button class="bg-secondary-500 text-white px-4 py-1 rounded-full text-sm hover:bg-secondary-700">Add +</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- Menu Section -->
+  <section id="menu" class="py-16 bg-primary-500 px-4">
+    <div class="max-w-6xl mx-auto">
+      <h2 class="text-3xl font-bold text-center text-white mb-12">Our Menu</h2>
+      <div class="grid md:grid-cols-2 gap-8">
+        <!-- Coffee Menu -->
+        <div class="bg-white rounded-lg shadow-lg p-6">
+          <h3 class="text-xl font-bold mb-4 border-b-2 border-primary-100 pb-2 flex items-center">
+            <i data-feather="coffee" class="mr-2"></i> Coffee & Drinks
+          </h3>
+          <div class="space-y-4">
+            <div class="flex justify-between">
+              <div>
+                <h4 class="font-medium">Espresso</h4>
+                <p class="text-sm text-secondary-500">Single or double shot</p>
+              </div>
+              <span class="font-bold text-primary-900">$3.00</span>
+            </div>
+            <div class="flex justify-between">
+              <div>
+                <h4 class="font-medium">Cappuccino</h4>
+                <p class="text-sm text-secondary-500">Espresso with steamed milk foam</p>
+              </div>
+              <span class="font-bold text-primary-900">$4.50</span>
+            </div>
+            <div class="flex justify-between">
+              <div>
+                <h4 class="font-medium">Matcha Latte</h4>
+                <p class="text-sm text-secondary-500">Ceremonial grade matcha</p>
+              </div>
+              <span class="font-bold text-primary-900">$5.00</span>
+            </div>
+            <div class="flex justify-between">
+              <div>
+                <h4 class="font-medium">Chai Latte</h4>
+                <p class="text-sm text-secondary-500">House-blended spices</p>
+              </div>
+              <span class="font-bold text-primary-900">$4.75</span>
+            </div>
+          </div>
+        </div>
+        <!-- Food Menu -->
+        <div class="bg-white rounded-lg shadow-lg p-6">
+          <h3 class="text-xl font-bold mb-4 border-b-2 border-primary-100 pb-2 flex items-center">
+            <i data-feather="croissant" class="mr-2"></i> Food & Pastries
+          </h3>
+          <div class="space-y-4">
+            <div class="flex justify-between">
+              <div>
+                <h4 class="font-medium">Breakfast Sandwich</h4>
+                <p class="text-sm text-secondary-500">Egg, cheese, and choice of bacon or sausage</p>
+              </div>
+              <span class="font-bold text-primary-900">$7.50</span>
+            </div>
+            <div class="flex justify-between">
+              <div>
+                <h4 class="font-medium">Quiche of the Day</h4>
+                <p class="text-sm text-secondary-500">Freshly baked with seasonal ingredients</p>
+              </div>
+              <span class="font-bold text-primary-900">$8.00</span>
+            </div>
+            <div class="flex justify-between">
+              <div>
+                <h4 class="font-medium">Berry Parfait</h4>
+                <p class="text-sm text-secondary-500">Greek yogurt with granola and fresh berries</p>
+              </div>
+              <span class="font-bold text-primary-900">$6.50</span>
+            </div>
+            <div class="flex justify-between">
+              <div>
+                <h4 class="font-medium">Almond Croissant</h4>
+                <p class="text-sm text-secondary-500">Flaky pastry with almond paste filling</p>
+              </div>
+              <span class="font-bold text-primary-900">$4.00</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- About Section -->
+  <section id="about" class="py-16 px-4">
+    <div class="max-w-6xl mx-auto">
+      <div class="md:flex items-center">
+        <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
+          <img src="http://static.photos/people/640x360/1" alt="Cafe interior" class="rounded-lg shadow-lg w-full">
+        </div>
+        <div class="md:w-1/2">
+          <h2 class="text-3xl font-bold mb-6">Our Story</h2>
+          <p class="mb-4">Founded in 2012 by two college friends passionate about coffee, Brew Haven started as a small cart at the local farmers market. Today, we're proud to serve our community from our cozy brick-and-mortar location downtown.</p>
+          <p class="mb-6">We source our beans directly from sustainable farms and roast them in-house weekly to ensure maximum freshness. All our pastries are made from scratch daily using locally-sourced ingredients whenever possible.</p>
+          <div class="flex items-center">
+            <div class="mr-4">
+              <i data-feather="award" class="w-8 h-8 text-primary-900"></i>
+            </div>
+            <div>
+              <h4 class="font-bold">Best Local Café 2022</h4>
+              <p class="text-sm text-secondary-500">City Magazine Readers' Choice</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- Testimonials -->
+  <section class="py-16 bg-primary-100 px-4">
+    <div class="max-w-4xl mx-auto">
+      <h2 class="text-3xl font-bold text-center mb-12">What Our Customers Say</h2>
+      <div class="grid md:grid-cols-2 gap-8">
+        <div class="bg-white p-6 rounded-lg shadow-lg">
+          <div class="flex items-center mb-4">
+            <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
+              <img src="http://static.photos/people/200x200/1" alt="Customer" class="w-full h-full object-cover">
+            </div>
+            <div>
+              <h4 class="font-bold">Sarah M.</h4>
+              <div class="flex">
+                <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i>
+                <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i>
+                <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i>
+                <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i>
+                <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i>
+              </div>
+            </div>
+          </div>
+          <p>"The honey lavender cold brew is absolutely divine! I come here every Saturday morning to get my fix. The atmosphere is so welcoming too."</p>
+        </div>
+        <div class="bg-white p-6 rounded-lg shadow-lg">
+          <div class="flex items-center mb-4">
+            <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
+              <img src="http://static.photos/people/200x200/2" alt="Customer" class="w-full h-full object-cover">
+            </div>
+            <div>
+              <h4 class="font-bold">James T.</h4>
+              <div class="flex">
+                <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i>
+                <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i>
+                <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i>
+                <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i>
+                <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i>
+              </div>
+            </div>
+          </div>
+          <p>"Best coffee in town, hands down. I've tried them all and nothing compares to Brew Haven's espresso. Their avocado toast is my go-to breakfast."</p>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- Contact Section -->
+  <section id="contact" class="py-16 px-4">
+    <div class="max-w-6xl mx-auto">
+      <div class="md:flex">
+        <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
+          <h2 class="text-3xl font-bold mb-6">Visit Us</h2>
+          <div class="mb-6">
+            <div class="flex items-start mb-4">
+              <i data-feather="map-pin" class="mr-3 mt-1"></i>
+              <div>
+                <h4 class="font-bold">Location</h4>
+                <p>123 Main Street, Downtown<br>Your City, ST 12345</p>
+              </div>
+            </div>
+            <div class="flex items-start mb-4">
+              <i data-feather="clock" class="mr-3 mt-1"></i>
+              <div>
+                <h4 class="font-bold">Hours</h4>
+                <p>Monday-Friday: 7am - 7pm<br>Saturday-Sunday: 8am - 6pm</p>
+              </div>
+            </div>
+            <div class="flex items-start mb-4">
+              <i data-feather="phone" class="mr-3 mt-1"></i>
+              <div>
+                <h4 class="font-bold">Phone</h4>
+                <p>(555) 123-4567</p>
+              </div>
+            </div>
+          </div>
+          <div class="flex space-x-4">
+            <a href="#" class="bg-secondary-500 text-white p-2 rounded-full hover:bg-secondary-700 transition duration-300">
+              <i data-feather="instagram"></i>
+            </a>
+            <a href="#" class="bg-secondary-500 text-white p-2 rounded-full hover:bg-secondary-700 transition duration-300">
+              <i data-feather="facebook"></i>
+            </a>
+            <a href="#" class="bg-secondary-500 text-white p-2 rounded-full hover:bg-secondary-700 transition duration-300">
+              <i data-feather="twitter"></i>
+            </a>
+          </div>
+        </div>
+        <div class="md:w-1/2">
+          <h2 class="text-3xl font-bold mb-6">Get in Touch</h2>
+          <form class="space-y-4">
+            <div>
+              <label for="name" class="block mb-1">Name</label>
+              <input type="text" id="name" class="w-full px-4 py-2 border border-secondary-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-900 focus:border-transparent">
+            </div>
+            <div>
+              <label for="email" class="block mb-1">Email</label>
+              <input type="email" id="email" class="w-full px-4 py-2 border border-secondary-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-900 focus:border-transparent">
+            </div>
+            <div>
+              <label for="message" class="block mb-1">Message</label>
+              <textarea id="message" rows="4" class="w-full px-4 py-2 border border-secondary-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-900 focus:border-transparent"></textarea>
+            </div>
+            <button type="submit" class="bg-primary-900 text-white px-6 py-2 rounded-full hover:bg-primary-700 transition duration-300 font-medium">Send Message</button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- Footer -->
+  <footer class="bg-secondary-500 text-white py-8 px-4">
+    <div class="max-w-6xl mx-auto">
+      <div class="md:flex md:justify-between">
+        <div class="mb-6 md:mb-0">
+          <a href="#" class="flex items-center">
+            <i data-feather="coffee" class="h-8 w-8 text-primary-100 mr-2"></i>
+            <span class="text-xl font-semibold">Brew Haven</span>
+          </a>
+        </div>
+        <div class="grid grid-cols-2 gap-8 sm:grid-cols-3">
+          <div>
+            <h3 class="font-bold mb-4">Links</h3>
+            <ul class="space-y-2">
+              <li><a href="#" class="hover:text-primary-100 transition duration-300">Home</a></li>
+              <li><a href="#menu" class="hover:text-primary-100 transition duration-300">Menu</a></li>
+              <li><a href="#about" class="hover:text-primary-100 transition duration-300">About</a></li>
+              <li><a href="#contact" class="hover:text-primary-100 transition duration-300">Contact</a></li>
+            </ul>
+          </div>
+          <div>
+            <h3 class="font-bold mb-4">Legal</h3>
+            <ul class="space-y-2">
+              <li><a href="#" class="hover:text-primary-100 transition duration-300">Privacy Policy</a></li>
+              <li><a href="#" class="hover:text-primary-100 transition duration-300">Terms of Service</a></li>
+            </ul>
+          </div>
+          <div>
+            <h3 class="font-bold mb-4">Newsletter</h3>
+            <div class="flex">
+              <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-lg text-secondary-900 focus:outline-none">
+              <button class="bg-primary-900 px-4 py-2 rounded-r-lg hover:bg-primary-700 transition duration-300">
+                <i data-feather="send"></i>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <hr class="my-6 border-primary-500">
+      <div class="text-center">
+        <p>© 2023 Brew Haven Café. All rights reserved.</p>
+      </div>
+    </div>
+  </footer>
+  <script>
+    // Mobile menu toggle
+    const btn = document.querySelector(".mobile-menu-button");
+    const menu = document.querySelector(".mobile-menu");
+    btn.addEventListener("click", () => {
+      menu.classList.toggle("hidden");
+    });
+    // Close mobile menu when clicking outside
+    document.addEventListener('click', (e) => {
+      if (!menu.contains(e.target) && !btn.contains(e.target)) {
+        menu.classList.add('hidden');
+      }
+    });
+  </script>
+  <script>feather.replace();</script>
+</body>
 </html>