Hugging Face's logo

Spaces:
tezzarida
/
maple-brew
Running

App Files Community
tezzarida commited on
Commit
6d581ab
·
verified ·
1 Parent(s): 75c6e90

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +644 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Maple Brew
3
- emoji: 🏃
4
- colorFrom: yellow
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: maple-brew
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,644 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Maple Brew - Authentic Canadian Coffee</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;600&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ scroll-behavior: smooth;
15
+ }
16
+
17
+ .hero {
18
+ background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
19
+ background-size: cover;
20
+ background-position: center;
21
+ background-attachment: fixed;
22
+ }
23
+
24
+ .menu-item:hover .menu-overlay {
25
+ opacity: 1;
26
+ transform: translateY(0);
27
+ }
28
+
29
+ .menu-overlay {
30
+ transition: all 0.3s ease;
31
+ opacity: 0;
32
+ transform: translateY(20px);
33
+ }
34
+
35
+ .floating {
36
+ animation: floating 3s ease-in-out infinite;
37
+ }
38
+
39
+ @keyframes floating {
40
+ 0% { transform: translateY(0px); }
41
+ 50% { transform: translateY(-15px); }
42
+ 100% { transform: translateY(0px); }
43
+ }
44
+
45
+ .maple-leaf {
46
+ position: absolute;
47
+ width: 30px;
48
+ height: 30px;
49
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23c2410c"><path d="M18.5,12c0,0.276-0.224,0.5-0.5,0.5s-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5S18.5,11.724,18.5,12z M12,5.5 c0.276,0,0.5-0.224,0.5-0.5S12.276,4.5,12,4.5S11.5,4.724,11.5,5S11.724,5.5,12,5.5z M12,18.5c-0.276,0-0.5,0.224-0.5,0.5 s0.224,0.5,0.5,0.5s0.5-0.224,0.5-0.5S12.276,18.5,12,18.5z M5.5,12c0-0.276-0.224-0.5-0.5-0.5S4.5,11.724,4.5,12 s0.224,0.5,0.5,0.5S5.5,12.276,5.5,12z M14.5,12c0,1.381-1.119,2.5-2.5,2.5S9.5,13.381,9.5,12s1.119-2.5,2.5-2.5 S14.5,10.619,14.5,12z M22,12c0,5.514-4.486,10-10,10S2,17.514,2,12S6.486,2,12,2S22,6.486,22,12z"/></svg>');
50
+ background-size: contain;
51
+ animation: falling linear infinite;
52
+ z-index: -1;
53
+ }
54
+
55
+ @keyframes falling {
56
+ 0% {
57
+ transform: translate(0, -10vh) rotate(0deg);
58
+ opacity: 1;
59
+ }
60
+ 100% {
61
+ transform: translate(var(--end-x), 100vh) rotate(360deg);
62
+ opacity: 0;
63
+ }
64
+ }
65
+ </style>
66
+ </head>
67
+ <body class="bg-amber-50 text-gray-800">
68
+ <!-- Floating Maple Leaves Background -->
69
+ <div id="maple-leaves"></div>
70
+
71
+ <!-- Navigation -->
72
+ <nav class="fixed w-full bg-white bg-opacity-90 shadow-md z-50">
73
+ <div class="container mx-auto px-6 py-3 flex justify-between items-center">
74
+ <div class="flex items-center">
75
+ <i class="fas fa-mug-hot text-amber-700 text-2xl mr-2"></i>
76
+ <span class="font-playfair text-xl font-bold text-amber-800">Maple Brew</span>
77
+ </div>
78
+ <div class="hidden md:flex space-x-8">
79
+ <a href="#home" class="text-amber-800 hover:text-amber-600 transition">Home</a>
80
+ <a href="#about" class="text-gray-700 hover:text-amber-600 transition">About</a>
81
+ <a href="#menu" class="text-gray-700 hover:text-amber-600 transition">Menu</a>
82
+ <a href="#locations" class="text-gray-700 hover:text-amber-600 transition">Locations</a>
83
+ <a href="#contact" class="text-gray-700 hover:text-amber-600 transition">Contact</a>
84
+ </div>
85
+ <button class="md:hidden focus:outline-none" id="mobile-menu-button">
86
+ <i class="fas fa-bars text-amber-800 text-xl"></i>
87
+ </button>
88
+ </div>
89
+ <!-- Mobile Menu -->
90
+ <div class="md:hidden hidden bg-white w-full px-6 py-3" id="mobile-menu">
91
+ <div class="flex flex-col space-y-3">
92
+ <a href="#home" class="text-amber-800 hover:text-amber-600 transition">Home</a>
93
+ <a href="#about" class="text-gray-700 hover:text-amber-600 transition">About</a>
94
+ <a href="#menu" class="text-gray-700 hover:text-amber-600 transition">Menu</a>
95
+ <a href="#locations" class="text-gray-700 hover:text-amber-600 transition">Locations</a>
96
+ <a href="#contact" class="text-gray-700 hover:text-amber-600 transition">Contact</a>
97
+ </div>
98
+ </div>
99
+ </nav>
100
+
101
+ <!-- Hero Section -->
102
+ <section id="home" class="hero min-h-screen flex items-center justify-center text-white pt-20">
103
+ <div class="container mx-auto px-6 text-center">
104
+ <h1 class="font-playfair text-5xl md:text-7xl font-bold mb-6">Maple Brew</h1>
105
+ <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Authentic Canadian Coffee Experience</p>
106
+ <div class="flex flex-col md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-6">
107
+ <a href="#menu" class="bg-amber-700 hover:bg-amber-600 text-white px-8 py-3 rounded-full font-medium transition">View Menu</a>
108
+ <a href="#locations" class="bg-transparent border-2 border-white hover:bg-white hover:bg-opacity-20 text-white px-8 py-3 rounded-full font-medium transition">Find Us</a>
109
+ </div>
110
+ </div>
111
+ <div class="absolute bottom-10 left-0 right-0 text-center">
112
+ <a href="#about" class="text-white animate-bounce inline-block">
113
+ <i class="fas fa-chevron-down text-2xl"></i>
114
+ </a>
115
+ </div>
116
+ </section>
117
+
118
+ <!-- About Section -->
119
+ <section id="about" class="py-20 bg-white">
120
+ <div class="container mx-auto px-6">
121
+ <div class="flex flex-col md:flex-row items-center">
122
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
123
+ <h2 class="font-playfair text-3xl md:text-4xl font-bold text-amber-800 mb-6">Our Canadian Coffee Story</h2>
124
+ <p class="text-gray-700 mb-4">Founded in the heart of Toronto in 2010, Maple Brew brings together the warmth of Canadian hospitality with the finest coffee beans sourced from ethical growers worldwide.</p>
125
+ <p class="text-gray-700 mb-6">Our signature blends incorporate subtle hints of maple, creating a uniquely Canadian coffee experience that warms you from the inside out.</p>
126
+ <div class="flex space-x-4">
127
+ <div class="bg-amber-100 p-4 rounded-lg text-center">
128
+ <i class="fas fa-seedling text-amber-700 text-2xl mb-2"></i>
129
+ <p class="font-medium">Ethically Sourced</p>
130
+ </div>
131
+ <div class="bg-amber-100 p-4 rounded-lg text-center">
132
+ <i class="fas fa-fire text-amber-700 text-2xl mb-2"></i>
133
+ <p class="font-medium">Small Batch Roasted</p>
134
+ </div>
135
+ <div class="bg-amber-100 p-4 rounded-lg text-center">
136
+ <i class="fas fa-leaf text-amber-700 text-2xl mb-2"></i>
137
+ <p class="font-medium">Sustainable</p>
138
+ </div>
139
+ </div>
140
+ </div>
141
+ <div class="md:w-1/2 relative">
142
+ <div class="relative">
143
+ <img src="https://images.unsplash.com/photo-1511920170033-f8396924c348?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Coffee beans" class="rounded-lg shadow-xl w-full">
144
+ <div class="absolute -bottom-6 -right-6 bg-amber-700 text-white p-4 rounded-lg shadow-lg hidden md:block">
145
+ <p class="font-bold text-xl">10+</p>
146
+ <p>Years of Experience</p>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </div>
151
+ </div>
152
+ </section>
153
+
154
+ <!-- Menu Section -->
155
+ <section id="menu" class="py-20 bg-amber-50">
156
+ <div class="container mx-auto px-6">
157
+ <div class="text-center mb-16">
158
+ <h2 class="font-playfair text-3xl md:text-4xl font-bold text-amber-800 mb-4">Our Signature Brews</h2>
159
+ <p class="text-gray-700 max-w-2xl mx-auto">From classic espresso to Canadian-inspired specialties, we craft each cup with care and precision.</p>
160
+ </div>
161
+
162
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
163
+ <!-- Menu Item 1 -->
164
+ <div class="menu-item bg-white rounded-lg overflow-hidden shadow-lg relative">
165
+ <img src="https://images.unsplash.com/photo-1517705008128-361805f42e86?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Maple Latte" class="w-full h-64 object-cover">
166
+ <div class="p-6">
167
+ <h3 class="font-bold text-xl text-amber-800 mb-2">Maple Latte</h3>
168
+ <p class="text-gray-700 mb-4">Our signature blend with real Canadian maple syrup</p>
169
+ <p class="font-bold text-amber-700">$5.50</p>
170
+ </div>
171
+ <div class="menu-overlay absolute inset-0 bg-amber-800 bg-opacity-90 flex items-center justify-center p-6 text-white">
172
+ <div>
173
+ <h3 class="font-bold text-xl mb-2">Maple Latte</h3>
174
+ <p class="mb-4">Espresso, steamed milk, and a touch of pure Canadian maple syrup topped with foam.</p>
175
+ <p class="font-bold">$5.50</p>
176
+ </div>
177
+ </div>
178
+ </div>
179
+
180
+ <!-- Menu Item 2 -->
181
+ <div class="menu-item bg-white rounded-lg overflow-hidden shadow-lg relative">
182
+ <img src="https://images.unsplash.com/photo-1568649929103-28ffbefaca1e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80" alt="Double Double" class="w-full h-64 object-cover">
183
+ <div class="p-6">
184
+ <h3 class="font-bold text-xl text-amber-800 mb-2">The True North</h3>
185
+ <p class="text-gray-700 mb-4">Double espresso with double cream and double sugar</p>
186
+ <p class="font-bold text-amber-700">$4.75</p>
187
+ </div>
188
+ <div class="menu-overlay absolute inset-0 bg-amber-800 bg-opacity-90 flex items-center justify-center p-6 text-white">
189
+ <div>
190
+ <h3 class="font-bold text-xl mb-2">The True North</h3>
191
+ <p class="mb-4">A Canadian classic - two shots of espresso with two creams and two sugars for the perfect balance.</p>
192
+ <p class="font-bold">$4.75</p>
193
+ </div>
194
+ </div>
195
+ </div>
196
+
197
+ <!-- Menu Item 3 -->
198
+ <div class="menu-item bg-white rounded-lg overflow-hidden shadow-lg relative">
199
+ <img src="https://images.unsplash.com/photo-1536599424071-0b215a388ba7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Iced Maple Mocha" class="w-full h-64 object-cover">
200
+ <div class="p-6">
201
+ <h3 class="font-bold text-xl text-amber-800 mb-2">Iced Maple Mocha</h3>
202
+ <p class="text-gray-700 mb-4">Cold brew with chocolate and maple syrup</p>
203
+ <p class="font-bold text-amber-700">$6.25</p>
204
+ </div>
205
+ <div class="menu-overlay absolute inset-0 bg-amber-800 bg-opacity-90 flex items-center justify-center p-6 text-white">
206
+ <div>
207
+ <h3 class="font-bold text-xl mb-2">Iced Maple Mocha</h3>
208
+ <p class="mb-4">Our cold brew coffee blended with rich chocolate and maple syrup, served over ice.</p>
209
+ <p class="font-bold">$6.25</p>
210
+ </div>
211
+ </div>
212
+ </div>
213
+
214
+ <!-- Menu Item 4 -->
215
+ <div class="menu-item bg-white rounded-lg overflow-hidden shadow-lg relative">
216
+ <img src="https://images.unsplash.com/photo-1517701550927-30cf4ba1d5a8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Nanaimo Bar Latte" class="w-full h-64 object-cover">
217
+ <div class="p-6">
218
+ <h3 class="font-bold text-xl text-amber-800 mb-2">Nanaimo Bar Latte</h3>
219
+ <p class="text-gray-700 mb-4">Inspired by the classic Canadian dessert</p>
220
+ <p class="font-bold text-amber-700">$6.50</p>
221
+ </div>
222
+ <div class="menu-overlay absolute inset-0 bg-amber-800 bg-opacity-90 flex items-center justify-center p-6 text-white">
223
+ <div>
224
+ <h3 class="font-bold text-xl mb-2">Nanaimo Bar Latte</h3>
225
+ <p class="mb-4">A decadent blend of chocolate, coconut, and custard flavors in a creamy latte.</p>
226
+ <p class="font-bold">$6.50</p>
227
+ </div>
228
+ </div>
229
+ </div>
230
+
231
+ <!-- Menu Item 5 -->
232
+ <div class="menu-item bg-white rounded-lg overflow-hidden shadow-lg relative">
233
+ <img src="https://images.unsplash.com/photo-1522992319-0365e5f11656?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Canadian Breakfast Blend" class="w-full h-64 object-cover">
234
+ <div class="p-6">
235
+ <h3 class="font-bold text-xl text-amber-800 mb-2">Canadian Breakfast Blend</h3>
236
+ <p class="text-gray-700 mb-4">Our signature house blend</p>
237
+ <p class="font-bold text-amber-700">$4.00</p>
238
+ </div>
239
+ <div class="menu-overlay absolute inset-0 bg-amber-800 bg-opacity-90 flex items-center justify-center p-6 text-white">
240
+ <div>
241
+ <h3 class="font-bold text-xl mb-2">Canadian Breakfast Blend</h3>
242
+ <p class="mb-4">A smooth, medium roast with notes of caramel and nuts, perfect for starting your day.</p>
243
+ <p class="font-bold">$4.00</p>
244
+ </div>
245
+ </div>
246
+ </div>
247
+
248
+ <!-- Menu Item 6 -->
249
+ <div class="menu-item bg-white rounded-lg overflow-hidden shadow-lg relative">
250
+ <img src="https://images.unsplash.com/photo-1560717843-60cb1b42b0e5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Beaver Tail Pastry" class="w-full h-64 object-cover">
251
+ <div class="p-6">
252
+ <h3 class="font-bold text-xl text-amber-800 mb-2">Beaver Tail Pastry</h3>
253
+ <p class="text-gray-700 mb-4">Classic Canadian fried dough pastry</p>
254
+ <p class="font-bold text-amber-700">$5.25</p>
255
+ </div>
256
+ <div class="menu-overlay absolute inset-0 bg-amber-800 bg-opacity-90 flex items-center justify-center p-6 text-white">
257
+ <div>
258
+ <h3 class="font-bold text-xl mb-2">Beaver Tail Pastry</h3>
259
+ <p class="mb-4">Fried dough pastry stretched to resemble a beaver's tail, topped with your choice of cinnamon sugar, chocolate hazelnut, or maple butter.</p>
260
+ <p class="font-bold">$5.25</p>
261
+ </div>
262
+ </div>
263
+ </div>
264
+ </div>
265
+
266
+ <div class="text-center mt-16">
267
+ <a href="#" class="inline-block bg-amber-700 hover:bg-amber-600 text-white px-8 py-3 rounded-full font-medium transition">View Full Menu</a>
268
+ </div>
269
+ </div>
270
+ </section>
271
+
272
+ <!-- Locations Section -->
273
+ <section id="locations" class="py-20 bg-white">
274
+ <div class="container mx-auto px-6">
275
+ <div class="text-center mb-16">
276
+ <h2 class="font-playfair text-3xl md:text-4xl font-bold text-amber-800 mb-4">Our Canadian Locations</h2>
277
+ <p class="text-gray-700 max-w-2xl mx-auto">Find your nearest Maple Brew café across Canada</p>
278
+ </div>
279
+
280
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
281
+ <!-- Location 1 -->
282
+ <div class="bg-amber-50 rounded-lg overflow-hidden shadow-lg">
283
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80" alt="Toronto Location" class="w-full h-48 object-cover">
284
+ <div class="p-6">
285
+ <h3 class="font-bold text-xl text-amber-800 mb-2">Toronto</h3>
286
+ <p class="text-gray-700 mb-4">123 Queen Street West</p>
287
+ <p class="text-gray-700 mb-4"><i class="fas fa-phone mr-2"></i> (416) 555-1234</p>
288
+ <p class="text-gray-700 mb-4"><i class="fas fa-clock mr-2"></i> Mon-Fri: 6:30am - 9pm<br>Sat-Sun: 7am - 10pm</p>
289
+ <a href="#" class="inline-block border border-amber-700 text-amber-700 hover:bg-amber-700 hover:text-white px-4 py-2 rounded-full font-medium transition">Get Directions</a>
290
+ </div>
291
+ </div>
292
+
293
+ <!-- Location 2 -->
294
+ <div class="bg-amber-50 rounded-lg overflow-hidden shadow-lg">
295
+ <img src="https://images.unsplash.com/photo-1600528252983-e70a2c8f49c0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Vancouver Location" class="w-full h-48 object-cover">
296
+ <div class="p-6">
297
+ <h3 class="font-bold text-xl text-amber-800 mb-2">Vancouver</h3>
298
+ <p class="text-gray-700 mb-4">456 Robson Street</p>
299
+ <p class="text-gray-700 mb-4"><i class="fas fa-phone mr-2"></i> (604) 555-5678</p>
300
+ <p class="text-gray-700 mb-4"><i class="fas fa-clock mr-2"></i> Mon-Fri: 6am - 8pm<br>Sat-Sun: 7am - 9pm</p>
301
+ <a href="#" class="inline-block border border-amber-700 text-amber-700 hover:bg-amber-700 hover:text-white px-4 py-2 rounded-full font-medium transition">Get Directions</a>
302
+ </div>
303
+ </div>
304
+
305
+ <!-- Location 3 -->
306
+ <div class="bg-amber-50 rounded-lg overflow-hidden shadow-lg">
307
+ <img src="https://images.unsplash.com/photo-1512429234305-12fe5b0b0f07?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Montreal Location" class="w-full h-48 object-cover">
308
+ <div class="p-6">
309
+ <h3 class="font-bold text-xl text-amber-800 mb-2">Montreal</h3>
310
+ <p class="text-gray-700 mb-4">789 Rue Saint-Catherine</p>
311
+ <p class="text-gray-700 mb-4"><i class="fas fa-phone mr-2"></i> (514) 555-9012</p>
312
+ <p class="text-gray-700 mb-4"><i class="fas fa-clock mr-2"></i> Mon-Fri: 6:30am - 10pm<br>Sat-Sun: 7:30am - 11pm</p>
313
+ <a href="#" class="inline-block border border-amber-700 text-amber-700 hover:bg-amber-700 hover:text-white px-4 py-2 rounded-full font-medium transition">Get Directions</a>
314
+ </div>
315
+ </div>
316
+ </div>
317
+
318
+ <div class="text-center mt-16">
319
+ <p class="text-gray-700 mb-6">Coming soon to Calgary and Halifax!</p>
320
+ <a href="#" class="inline-block bg-amber-700 hover:bg-amber-600 text-white px-8 py-3 rounded-full font-medium transition">Join Our Mailing List</a>
321
+ </div>
322
+ </div>
323
+ </section>
324
+
325
+ <!-- Testimonials Section -->
326
+ <section class="py-20 bg-amber-100">
327
+ <div class="container mx-auto px-6">
328
+ <div class="text-center mb-16">
329
+ <h2 class="font-playfair text-3xl md:text-4xl font-bold text-amber-800 mb-4">What Our Customers Say</h2>
330
+ <p class="text-gray-700 max-w-2xl mx-auto">Hear from coffee lovers across Canada</p>
331
+ </div>
332
+
333
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
334
+ <!-- Testimonial 1 -->
335
+ <div class="bg-white p-8 rounded-lg shadow-lg">
336
+ <div class="flex items-center mb-4">
337
+ <div class="flex-shrink-0">
338
+ <i class="fas fa-quote-left text-amber-600 text-2xl"></i>
339
+ </div>
340
+ <div class="ml-4">
341
+ <div class="flex items-center">
342
+ <i class="fas fa-star text-amber-500"></i>
343
+ <i class="fas fa-star text-amber-500"></i>
344
+ <i class="fas fa-star text-amber-500"></i>
345
+ <i class="fas fa-star text-amber-500"></i>
346
+ <i class="fas fa-star text-amber-500"></i>
347
+ </div>
348
+ </div>
349
+ </div>
350
+ <p class="text-gray-700 mb-6">"The Maple Latte is hands down the best coffee I've ever had. It's become my daily ritual!"</p>
351
+ <div class="flex items-center">
352
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah J." class="w-12 h-12 rounded-full">
353
+ <div class="ml-4">
354
+ <p class="font-bold text-gray-800">Sarah J.</p>
355
+ <p class="text-gray-600">Toronto, ON</p>
356
+ </div>
357
+ </div>
358
+ </div>
359
+
360
+ <!-- Testimonial 2 -->
361
+ <div class="bg-white p-8 rounded-lg shadow-lg">
362
+ <div class="flex items-center mb-4">
363
+ <div class="flex-shrink-0">
364
+ <i class="fas fa-quote-left text-amber-600 text-2xl"></i>
365
+ </div>
366
+ <div class="ml-4">
367
+ <div class="flex items-center">
368
+ <i class="fas fa-star text-amber-500"></i>
369
+ <i class="fas fa-star text-amber-500"></i>
370
+ <i class="fas fa-star text-amber-500"></i>
371
+ <i class="fas fa-star text-amber-500"></i>
372
+ <i class="fas fa-star text-amber-500"></i>
373
+ </div>
374
+ </div>
375
+ </div>
376
+ <p class="text-gray-700 mb-6">"As a coffee connoisseur, I appreciate their attention to detail and quality beans. The Canadian Breakfast Blend is exceptional."</p>
377
+ <div class="flex items-center">
378
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael T." class="w-12 h-12 rounded-full">
379
+ <div class="ml-4">
380
+ <p class="font-bold text-gray-800">Michael T.</p>
381
+ <p class="text-gray-600">Vancouver, BC</p>
382
+ </div>
383
+ </div>
384
+ </div>
385
+
386
+ <!-- Testimonial 3 -->
387
+ <div class="bg-white p-8 rounded-lg shadow-lg">
388
+ <div class="flex items-center mb-4">
389
+ <div class="flex-shrink-0">
390
+ <i class="fas fa-quote-left text-amber-600 text-2xl"></i>
391
+ </div>
392
+ <div class="ml-4">
393
+ <div class="flex items-center">
394
+ <i class="fas fa-star text-amber-500"></i>
395
+ <i class="fas fa-star text-amber-500"></i>
396
+ <i class="fas fa-star text-amber-500"></i>
397
+ <i class="fas fa-star text-amber-500"></i>
398
+ <i class="fas fa-star-half-alt text-amber-500"></i>
399
+ </div>
400
+ </div>
401
+ </div>
402
+ <p class="text-gray-700 mb-6">"The Nanaimo Bar Latte is like dessert in a cup! Perfect for when I need a sweet pick-me-up."</p>
403
+ <div class="flex items-center">
404
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emily R." class="w-12 h-12 rounded-full">
405
+ <div class="ml-4">
406
+ <p class="font-bold text-gray-800">Emily R.</p>
407
+ <p class="text-gray-600">Montreal, QC</p>
408
+ </div>
409
+ </div>
410
+ </div>
411
+ </div>
412
+ </div>
413
+ </section>
414
+
415
+ <!-- Contact Section -->
416
+ <section id="contact" class="py-20 bg-white">
417
+ <div class="container mx-auto px-6">
418
+ <div class="flex flex-col md:flex-row">
419
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
420
+ <h2 class="font-playfair text-3xl md:text-4xl font-bold text-amber-800 mb-6">Get In Touch</h2>
421
+ <p class="text-gray-700 mb-6">Have questions about our coffee, locations, or catering services? We'd love to hear from you!</p>
422
+
423
+ <div class="mb-8">
424
+ <div class="flex items-start mb-6">
425
+ <div class="bg-amber-100 p-3 rounded-full mr-4">
426
+ <i class="fas fa-envelope text-amber-700"></i>
427
+ </div>
428
+ <div>
429
+ <h3 class="font-bold text-gray-800 mb-1">Email Us</h3>
430
+ <p class="text-gray-700">hello@maplebrew.ca</p>
431
+ </div>
432
+ </div>
433
+
434
+ <div class="flex items-start mb-6">
435
+ <div class="bg-amber-100 p-3 rounded-full mr-4">
436
+ <i class="fas fa-phone text-amber-700"></i>
437
+ </div>
438
+ <div>
439
+ <h3 class="font-bold text-gray-800 mb-1">Call Us</h3>
440
+ <p class="text-gray-700">1-888-555-1234</p>
441
+ </div>
442
+ </div>
443
+
444
+ <div class="flex items-start">
445
+ <div class="bg-amber-100 p-3 rounded-full mr-4">
446
+ <i class="fas fa-map-marker-alt text-amber-700"></i>
447
+ </div>
448
+ <div>
449
+ <h3 class="font-bold text-gray-800 mb-1">Headquarters</h3>
450
+ <p class="text-gray-700">123 Queen Street West<br>Toronto, ON M5H 2M9</p>
451
+ </div>
452
+ </div>
453
+ </div>
454
+
455
+ <div>
456
+ <h3 class="font-bold text-gray-800 mb-4">Follow Us</h3>
457
+ <div class="flex space-x-4">
458
+ <a href="#" class="bg-amber-100 hover:bg-amber-200 text-amber-700 p-3 rounded-full transition"><i class="fab fa-instagram"></i></a>
459
+ <a href="#" class="bg-amber-100 hover:bg-amber-200 text-amber-700 p-3 rounded-full transition"><i class="fab fa-facebook-f"></i></a>
460
+ <a href="#" class="bg-amber-100 hover:bg-amber-200 text-amber-700 p-3 rounded-full transition"><i class="fab fa-twitter"></i></a>
461
+ <a href="#" class="bg-amber-100 hover:bg-amber-200 text-amber-700 p-3 rounded-full transition"><i class="fab fa-tiktok"></i></a>
462
+ </div>
463
+ </div>
464
+ </div>
465
+
466
+ <div class="md:w-1/2">
467
+ <div class="bg-amber-50 p-8 rounded-lg shadow-lg">
468
+ <h3 class="font-bold text-xl text-amber-800 mb-6">Send Us a Message</h3>
469
+ <form>
470
+ <div class="mb-4">
471
+ <label for="name" class="block text-gray-700 mb-2">Name</label>
472
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500">
473
+ </div>
474
+ <div class="mb-4">
475
+ <label for="email" class="block text-gray-700 mb-2">Email</label>
476
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500">
477
+ </div>
478
+ <div class="mb-4">
479
+ <label for="subject" class="block text-gray-700 mb-2">Subject</label>
480
+ <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500">
481
+ </div>
482
+ <div class="mb-6">
483
+ <label for="message" class="block text-gray-700 mb-2">Message</label>
484
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"></textarea>
485
+ </div>
486
+ <button type="submit" class="w-full bg-amber-700 hover:bg-amber-600 text-white px-6 py-3 rounded-full font-medium transition">Send Message</button>
487
+ </form>
488
+ </div>
489
+ </div>
490
+ </div>
491
+ </div>
492
+ </section>
493
+
494
+ <!-- Newsletter Section -->
495
+ <section class="py-16 bg-amber-800 text-white">
496
+ <div class="container mx-auto px-6 text-center">
497
+ <h2 class="font-playfair text-3xl font-bold mb-6">Join Our Coffee Club</h2>
498
+ <p class="max-w-2xl mx-auto mb-8">Sign up for our newsletter and receive exclusive offers, new product announcements, and Canadian coffee stories straight to your inbox.</p>
499
+ <div class="max-w-md mx-auto flex">
500
+ <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-l-lg focus:outline-none text-gray-800">
501
+ <button class="bg-amber-600 hover:bg-amber-700 px-6 py-3 rounded-r-lg font-medium transition">Subscribe</button>
502
+ </div>
503
+ </div>
504
+ </section>
505
+
506
+ <!-- Footer -->
507
+ <footer class="bg-gray-900 text-white py-12">
508
+ <div class="container mx-auto px-6">
509
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
510
+ <div>
511
+ <div class="flex items-center mb-4">
512
+ <i class="fas fa-mug-hot text-amber-600 text-2xl mr-2"></i>
513
+ <span class="font-playfair text-xl font-bold">Maple Brew</span>
514
+ </div>
515
+ <p class="text-gray-400">Bringing authentic Canadian coffee experiences to you since 2010.</p>
516
+ </div>
517
+
518
+ <div>
519
+ <h3 class="font-bold text-lg mb-4">Quick Links</h3>
520
+ <ul class="space-y-2">
521
+ <li><a href="#home" class="text-gray-400 hover:text-amber-500 transition">Home</a></li>
522
+ <li><a href="#about" class="text-gray-400 hover:text-amber-500 transition">About</a></li>
523
+ <li><a href="#menu" class="text-gray-400 hover:text-amber-500 transition">Menu</a></li>
524
+ <li><a href="#locations" class="text-gray-400 hover:text-amber-500 transition">Locations</a></li>
525
+ <li><a href="#contact" class="text-gray-400 hover:text-amber-500 transition">Contact</a></li>
526
+ </ul>
527
+ </div>
528
+
529
+ <div>
530
+ <h3 class="font-bold text-lg mb-4">Legal</h3>
531
+ <ul class="space-y-2">
532
+ <li><a href="#" class="text-gray-400 hover:text-amber-500 transition">Privacy Policy</a></li>
533
+ <li><a href="#" class="text-gray-400 hover:text-amber-500 transition">Terms of Service</a></li>
534
+ <li><a href="#" class="text-gray-400 hover:text-amber-500 transition">Cookie Policy</a></li>
535
+ <li><a href="#" class="text-gray-400 hover:text-amber-500 transition">Accessibility</a></li>
536
+ </ul>
537
+ </div>
538
+
539
+ <div>
540
+ <h3 class="font-bold text-lg mb-4">Contact</h3>
541
+ <ul class="space-y-2">
542
+ <li class="flex items-center"><i class="fas fa-map-marker-alt text-amber-500 mr-2"></i> <span class="text-gray-400">123 Queen St W, Toronto</span></li>
543
+ <li class="flex items-center"><i class="fas fa-phone text-amber-500 mr-2"></i> <span class="text-gray-400">1-888-555-1234</span></li>
544
+ <li class="flex items-center"><i class="fas fa-envelope text-amber-500 mr-2"></i> <span class="text-gray-400">hello@maplebrew.ca</span></li>
545
+ </ul>
546
+ </div>
547
+ </div>
548
+
549
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
550
+ <p class="text-gray-500 mb-4 md:mb-0">© 2023 Maple Brew. All rights reserved.</p>
551
+ <div class="flex space-x-6">
552
+ <a href="#" class="text-gray-500 hover:text-amber-500 transition"><i class="fab fa-instagram"></i></a>
553
+ <a href="#" class="text-gray-500 hover:text-amber-500 transition"><i class="fab fa-facebook-f"></i></a>
554
+ <a href="#" class="text-gray-500 hover:text-amber-500 transition"><i class="fab fa-twitter"></i></a>
555
+ <a href="#" class="text-gray-500 hover:text-amber-500 transition"><i class="fab fa-tiktok"></i></a>
556
+ </div>
557
+ </div>
558
+ </div>
559
+ </footer>
560
+
561
+ <!-- Back to Top Button -->
562
+ <button id="back-to-top" class="fixed bottom-6 right-6 bg-amber-700 text-white p-3 rounded-full shadow-lg opacity-0 invisible transition-all">
563
+ <i class="fas fa-arrow-up"></i>
564
+ </button>
565
+
566
+ <script>
567
+ // Mobile Menu Toggle
568
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
569
+ const mobileMenu = document.getElementById('mobile-menu');
570
+
571
+ mobileMenuButton.addEventListener('click', () => {
572
+ mobileMenu.classList.toggle('hidden');
573
+ });
574
+
575
+ // Back to Top Button
576
+ const backToTopButton = document.getElementById('back-to-top');
577
+
578
+ window.addEventListener('scroll', () => {
579
+ if (window.pageYOffset > 300) {
580
+ backToTopButton.classList.remove('opacity-0', 'invisible');
581
+ backToTopButton.classList.add('opacity-100', 'visible');
582
+ } else {
583
+ backToTopButton.classList.remove('opacity-100', 'visible');
584
+ backToTopButton.classList.add('opacity-0', 'invisible');
585
+ }
586
+ });
587
+
588
+ backToTopButton.addEventListener('click', () => {
589
+ window.scrollTo({ top: 0, behavior: 'smooth' });
590
+ });
591
+
592
+ // Smooth scrolling for anchor links
593
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
594
+ anchor.addEventListener('click', function(e) {
595
+ e.preventDefault();
596
+
597
+ const targetId = this.getAttribute('href');
598
+ const targetElement = document.querySelector(targetId);
599
+
600
+ if (targetElement) {
601
+ window.scrollTo({
602
+ top: targetElement.offsetTop - 80,
603
+ behavior: 'smooth'
604
+ });
605
+
606
+ // Close mobile menu if open
607
+ if (!mobileMenu.classList.contains('hidden')) {
608
+ mobileMenu.classList.add('hidden');
609
+ }
610
+ }
611
+ });
612
+ });
613
+
614
+ // Create floating maple leaves
615
+ function createMapleLeaves() {
616
+ const container = document.getElementById('maple-leaves');
617
+ const leafCount = 15;
618
+
619
+ for (let i = 0; i < leafCount; i++) {
620
+ const leaf = document.createElement('div');
621
+ leaf.classList.add('maple-leaf');
622
+
623
+ // Random position and animation duration
624
+ const startX = Math.random() * 100;
625
+ const endX = (Math.random() * 40) - 20; // -20 to 20
626
+ const duration = 10 + Math.random() * 20; // 10-30 seconds
627
+
628
+ leaf.style.left = `${startX}%`;
629
+ leaf.style.setProperty('--end-x', `${endX}px`);
630
+ leaf.style.animationDuration = `${duration}s`;
631
+ leaf.style.animationDelay = `${Math.random() * 10}s`;
632
+ leaf.style.opacity = Math.random() * 0.5 + 0.3; // 0.3-0.8
633
+ leaf.style.width = `${Math.random() * 20 + 10}px`; // 10-30px
634
+ leaf.style.height = leaf.style.width;
635
+
636
+ container.appendChild(leaf);
637
+ }
638
+ }
639
+
640
+ // Initialize maple leaves when page loads
641
+ window.addEventListener('load', createMapleLeaves);
642
+ </script>
643
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=tezzarida/maple-brew" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
644
+ </html>