Hugging Face's logo

Spaces:
vc3nt
/
juicepop
Running

App Files Community
vc3nt commited on
Commit
ea52eb3
·
verified ·
1 Parent(s): 19fe9e7

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +680 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Juicepop
3
- emoji: 🏢
4
- colorFrom: yellow
5
- colorTo: red
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: juicepop
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: pink
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,680 @@
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>JuicePop - Fresh Fruit Juices</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=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ overflow-x: hidden;
15
+ }
16
+
17
+ .hero-gradient {
18
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
19
+ }
20
+
21
+ .juice-card:hover {
22
+ transform: translateY(-10px);
23
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
24
+ }
25
+
26
+ .juice-card {
27
+ transition: all 0.3s ease;
28
+ }
29
+
30
+ .floating {
31
+ animation: floating 3s ease-in-out infinite;
32
+ }
33
+
34
+ @keyframes floating {
35
+ 0% { transform: translateY(0px); }
36
+ 50% { transform: translateY(-15px); }
37
+ 100% { transform: translateY(0px); }
38
+ }
39
+
40
+ .smooth-scroll {
41
+ scroll-behavior: smooth;
42
+ }
43
+ </style>
44
+ </head>
45
+ <body class="smooth-scroll">
46
+ <!-- Navigation -->
47
+ <nav class="bg-white shadow-md sticky top-0 z-50">
48
+ <div class="container mx-auto px-6 py-3">
49
+ <div class="flex items-center justify-between">
50
+ <div class="flex items-center">
51
+ <a href="#" class="text-2xl font-bold text-orange-500">Juice<span class="text-green-500">Pop</span></a>
52
+ </div>
53
+
54
+ <!-- Mobile menu button -->
55
+ <div class="md:hidden">
56
+ <button id="menu-btn" class="text-gray-500 hover:text-orange-500 focus:outline-none">
57
+ <i class="fas fa-bars text-2xl"></i>
58
+ </button>
59
+ </div>
60
+
61
+ <!-- Desktop Menu -->
62
+ <div class="hidden md:flex space-x-8">
63
+ <a href="#home" class="text-gray-700 hover:text-orange-500">Home</a>
64
+ <a href="#menu" class="text-gray-700 hover:text-orange-500">Menu</a>
65
+ <a href="#about" class="text-gray-700 hover:text-orange-500">About</a>
66
+ <a href="#testimonials" class="text-gray-700 hover:text-orange-500">Testimonials</a>
67
+ <a href="#contact" class="text-gray-700 hover:text-orange-500">Contact</a>
68
+ </div>
69
+
70
+ <div class="hidden md:block">
71
+ <a href="#order" class="px-4 py-2 bg-orange-500 text-white rounded-full hover:bg-orange-600 transition">Order Now</a>
72
+ </div>
73
+ </div>
74
+
75
+ <!-- Mobile Menu -->
76
+ <div id="mobile-menu" class="hidden md:hidden mt-4 pb-4">
77
+ <a href="#home" class="block py-2 text-gray-700 hover:text-orange-500">Home</a>
78
+ <a href="#menu" class="block py-2 text-gray-700 hover:text-orange-500">Menu</a>
79
+ <a href="#about" class="block py-2 text-gray-700 hover:text-orange-500">About</a>
80
+ <a href="#testimonials" class="block py-2 text-gray-700 hover:text-orange-500">Testimonials</a>
81
+ <a href="#contact" class="block py-2 text-gray-700 hover:text-orange-500">Contact</a>
82
+ <a href="#order" class="block mt-2 px-4 py-2 bg-orange-500 text-white rounded-full text-center hover:bg-orange-600 transition">Order Now</a>
83
+ </div>
84
+ </div>
85
+ </nav>
86
+
87
+ <!-- Hero Section -->
88
+ <section id="home" class="hero-gradient py-20">
89
+ <div class="container mx-auto px-6 flex flex-col md:flex-row items-center">
90
+ <div class="md:w-1/2 mb-10 md:mb-0">
91
+ <h1 class="text-4xl md:text-6xl font-bold text-gray-800 leading-tight">
92
+ Fresh <span class="text-orange-500">Fruit</span> Juices for a <span class="text-green-500">Healthy</span> Life
93
+ </h1>
94
+ <p class="text-gray-600 mt-4 text-lg">
95
+ Discover our delicious range of 100% natural, no-added-sugar fruit juices made from the freshest ingredients.
96
+ </p>
97
+ <div class="mt-8 flex space-x-4">
98
+ <a href="#menu" class="px-6 py-3 bg-orange-500 text-white rounded-full hover:bg-orange-600 transition">Explore Menu</a>
99
+ <a href="#order" class="px-6 py-3 border border-orange-500 text-orange-500 rounded-full hover:bg-orange-50 transition">Order Now</a>
100
+ </div>
101
+ </div>
102
+ <div class="md:w-1/2 flex justify-center">
103
+ <img src="https://images.unsplash.com/photo-1550583724-b2692b85b150?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"
104
+ alt="Fresh Juice"
105
+ class="rounded-full w-64 h-64 md:w-80 md:h-80 object-cover shadow-xl floating">
106
+ </div>
107
+ </div>
108
+ </section>
109
+
110
+ <!-- Features Section -->
111
+ <section class="py-16 bg-white">
112
+ <div class="container mx-auto px-6">
113
+ <div class="text-center mb-16">
114
+ <h2 class="text-3xl font-bold text-gray-800">Why Choose JuicePop?</h2>
115
+ <div class="w-20 h-1 bg-orange-500 mx-auto mt-4"></div>
116
+ </div>
117
+
118
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
119
+ <div class="text-center p-6 rounded-lg hover:shadow-lg transition">
120
+ <div class="w-20 h-20 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4">
121
+ <i class="fas fa-leaf text-orange-500 text-3xl"></i>
122
+ </div>
123
+ <h3 class="text-xl font-semibold mb-2">100% Natural</h3>
124
+ <p class="text-gray-600">No artificial flavors, colors, or preservatives. Just pure, natural goodness.</p>
125
+ </div>
126
+
127
+ <div class="text-center p-6 rounded-lg hover:shadow-lg transition">
128
+ <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
129
+ <i class="fas fa-heart text-green-500 text-3xl"></i>
130
+ </div>
131
+ <h3 class="text-xl font-semibold mb-2">Healthy & Nutritious</h3>
132
+ <p class="text-gray-600">Packed with vitamins, minerals, and antioxidants to boost your health.</p>
133
+ </div>
134
+
135
+ <div class="text-center p-6 rounded-lg hover:shadow-lg transition">
136
+ <div class="w-20 h-20 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-4">
137
+ <i class="fas fa-bolt text-yellow-500 text-3xl"></i>
138
+ </div>
139
+ <h3 class="text-xl font-semibold mb-2">Instant Energy</h3>
140
+ <p class="text-gray-600">Natural sugars provide quick energy without the crash of processed drinks.</p>
141
+ </div>
142
+ </div>
143
+ </div>
144
+ </section>
145
+
146
+ <!-- Menu Section -->
147
+ <section id="menu" class="py-16 bg-gray-50">
148
+ <div class="container mx-auto px-6">
149
+ <div class="text-center mb-16">
150
+ <h2 class="text-3xl font-bold text-gray-800">Our Refreshing Menu</h2>
151
+ <div class="w-20 h-1 bg-orange-500 mx-auto mt-4"></div>
152
+ <p class="text-gray-600 mt-4 max-w-2xl mx-auto">Explore our wide selection of delicious, handcrafted fruit juices</p>
153
+ </div>
154
+
155
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
156
+ <!-- Juice Card 1 -->
157
+ <div class="juice-card bg-white rounded-xl overflow-hidden shadow-md">
158
+ <div class="h-48 overflow-hidden">
159
+ <img src="https://images.unsplash.com/photo-1603569283847-aa295f0d016a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"
160
+ alt="Tropical Bliss"
161
+ class="w-full h-full object-cover">
162
+ </div>
163
+ <div class="p-6">
164
+ <div class="flex justify-between items-center mb-2">
165
+ <h3 class="text-xl font-bold">Tropical Bliss</h3>
166
+ <span class="bg-orange-100 text-orange-800 px-3 py-1 rounded-full text-sm font-semibold">$5.99</span>
167
+ </div>
168
+ <p class="text-gray-600 mb-4">A refreshing blend of pineapple, mango, and orange with a hint of coconut.</p>
169
+ <button class="w-full py-2 bg-orange-500 text-white rounded-lg hover:bg-orange-600 transition">Add to Cart</button>
170
+ </div>
171
+ </div>
172
+
173
+ <!-- Juice Card 2 -->
174
+ <div class="juice-card bg-white rounded-xl overflow-hidden shadow-md">
175
+ <div class="h-48 overflow-hidden">
176
+ <img src="https://images.unsplash.com/photo-1603569283847-aa295f0d016a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"
177
+ alt="Berry Burst"
178
+ class="w-full h-full object-cover">
179
+ </div>
180
+ <div class="p-6">
181
+ <div class="flex justify-between items-center mb-2">
182
+ <h3 class="text-xl font-bold">Berry Burst</h3>
183
+ <span class="bg-orange-100 text-orange-800 px-3 py-1 rounded-full text-sm font-semibold">$6.49</span>
184
+ </div>
185
+ <p class="text-gray-600 mb-4">A powerful antioxidant mix of strawberries, blueberries, raspberries, and blackberries.</p>
186
+ <button class="w-full py-2 bg-orange-500 text-white rounded-lg hover:bg-orange-600 transition">Add to Cart</button>
187
+ </div>
188
+ </div>
189
+
190
+ <!-- Juice Card 3 -->
191
+ <div class="juice-card bg-white rounded-xl overflow-hidden shadow-md">
192
+ <div class="h-48 overflow-hidden">
193
+ <img src="https://images.unsplash.com/photo-1603569283847-aa295f0d016a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"
194
+ alt="Green Detox"
195
+ class="w-full h-full object-cover">
196
+ </div>
197
+ <div class="p-6">
198
+ <div class="flex justify-between items-center mb-2">
199
+ <h3 class="text-xl font-bold">Green Detox</h3>
200
+ <span class="bg-orange-100 text-orange-800 px-3 py-1 rounded-full text-sm font-semibold">$5.49</span>
201
+ </div>
202
+ <p class="text-gray-600 mb-4">Kale, spinach, cucumber, green apple, and lemon for a cleansing boost.</p>
203
+ <button class="w-full py-2 bg-orange-500 text-white rounded-lg hover:bg-orange-600 transition">Add to Cart</button>
204
+ </div>
205
+ </div>
206
+
207
+ <!-- Juice Card 4 -->
208
+ <div class="juice-card bg-white rounded-xl overflow-hidden shadow-md">
209
+ <div class="h-48 overflow-hidden">
210
+ <img src="https://images.unsplash.com/photo-1603569283847-aa295f0d016a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"
211
+ alt="Citrus Splash"
212
+ class="w-full h-full object-cover">
213
+ </div>
214
+ <div class="p-6">
215
+ <div class="flex justify-between items-center mb-2">
216
+ <h3 class="text-xl font-bold">Citrus Splash</h3>
217
+ <span class="bg-orange-100 text-orange-800 px-3 py-1 rounded-full text-sm font-semibold">$4.99</span>
218
+ </div>
219
+ <p class="text-gray-600 mb-4">A zesty combination of orange, grapefruit, lemon, and lime for vitamin C boost.</p>
220
+ <button class="w-full py-2 bg-orange-500 text-white rounded-lg hover:bg-orange-600 transition">Add to Cart</button>
221
+ </div>
222
+ </div>
223
+
224
+ <!-- Juice Card 5 -->
225
+ <div class="juice-card bg-white rounded-xl overflow-hidden shadow-md">
226
+ <div class="h-48 overflow-hidden">
227
+ <img src="https://images.unsplash.com/photo-1603569283847-aa295f0d016a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"
228
+ alt="Watermelon Chill"
229
+ class="w-full h-full object-cover">
230
+ </div>
231
+ <div class="p-6">
232
+ <div class="flex justify-between items-center mb-2">
233
+ <h3 class="text-xl font-bold">Watermelon Chill</h3>
234
+ <span class="bg-orange-100 text-orange-800 px-3 py-1 rounded-full text-sm font-semibold">$5.29</span>
235
+ </div>
236
+ <p class="text-gray-600 mb-4">Refreshing watermelon with a hint of mint - perfect for hot summer days.</p>
237
+ <button class="w-full py-2 bg-orange-500 text-white rounded-lg hover:bg-orange-600 transition">Add to Cart</button>
238
+ </div>
239
+ </div>
240
+
241
+ <!-- Juice Card 6 -->
242
+ <div class="juice-card bg-white rounded-xl overflow-hidden shadow-md">
243
+ <div class="h-48 overflow-hidden">
244
+ <img src="https://images.unsplash.com/photo-1603569283847-aa295f0d016a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"
245
+ alt="Carrot Sunshine"
246
+ class="w-full h-full object-cover">
247
+ </div>
248
+ <div class="p-6">
249
+ <div class="flex justify-between items-center mb-2">
250
+ <h3 class="text-xl font-bold">Carrot Sunshine</h3>
251
+ <span class="bg-orange-100 text-orange-800 px-3 py-1 rounded-full text-sm font-semibold">$4.79</span>
252
+ </div>
253
+ <p class="text-gray-600 mb-4">Sweet carrots blended with orange and ginger for a vitamin A powerhouse.</p>
254
+ <button class="w-full py-2 bg-orange-500 text-white rounded-lg hover:bg-orange-600 transition">Add to Cart</button>
255
+ </div>
256
+ </div>
257
+ </div>
258
+
259
+ <div class="text-center mt-12">
260
+ <a href="#order" class="px-8 py-3 bg-orange-500 text-white rounded-full hover:bg-orange-600 transition inline-block">View Full Menu</a>
261
+ </div>
262
+ </div>
263
+ </section>
264
+
265
+ <!-- About Section -->
266
+ <section id="about" class="py-16 bg-white">
267
+ <div class="container mx-auto px-6">
268
+ <div class="flex flex-col md:flex-row items-center">
269
+ <div class="md:w-1/2 mb-10 md:mb-0">
270
+ <img src="https://images.unsplash.com/photo-1603569283847-aa295f0d016a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"
271
+ alt="About JuicePop"
272
+ class="rounded-lg shadow-xl w-full">
273
+ </div>
274
+ <div class="md:w-1/2 md:pl-12">
275
+ <h2 class="text-3xl font-bold text-gray-800 mb-6">Our Story</h2>
276
+ <p class="text-gray-600 mb-4">
277
+ JuicePop was born from a simple idea: to create delicious, healthy juices that people actually enjoy drinking.
278
+ Founded in 2015 by nutritionist Sarah Johnson and chef Michael Rodriguez, we've grown from a small farmers'
279
+ market stand to multiple locations across the city.
280
+ </p>
281
+ <p class="text-gray-600 mb-4">
282
+ We believe that healthy doesn't have to mean boring. Our juices are crafted to deliver maximum nutrition
283
+ without compromising on taste. Every ingredient is carefully selected for quality and freshness.
284
+ </p>
285
+ <p class="text-gray-600 mb-6">
286
+ Sustainability is at our core. We source locally whenever possible, use biodegradable packaging, and compost
287
+ all our organic waste. Because what's good for you should be good for the planet too.
288
+ </p>
289
+ <div class="flex space-x-4">
290
+ <div class="text-center p-4 bg-orange-50 rounded-lg">
291
+ <div class="text-3xl font-bold text-orange-500">8+</div>
292
+ <div class="text-gray-600">Years Experience</div>
293
+ </div>
294
+ <div class="text-center p-4 bg-green-50 rounded-lg">
295
+ <div class="text-3xl font-bold text-green-500">50+</div>
296
+ <div class="text-gray-600">Juice Varieties</div>
297
+ </div>
298
+ <div class="text-center p-4 bg-yellow-50 rounded-lg">
299
+ <div class="text-3xl font-bold text-yellow-500">10K+</div>
300
+ <div class="text-gray-600">Happy Customers</div>
301
+ </div>
302
+ </div>
303
+ </div>
304
+ </div>
305
+ </div>
306
+ </section>
307
+
308
+ <!-- Testimonials Section -->
309
+ <section id="testimonials" class="py-16 bg-gray-50">
310
+ <div class="container mx-auto px-6">
311
+ <div class="text-center mb-16">
312
+ <h2 class="text-3xl font-bold text-gray-800">What Our Customers Say</h2>
313
+ <div class="w-20 h-1 bg-orange-500 mx-auto mt-4"></div>
314
+ </div>
315
+
316
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
317
+ <!-- Testimonial 1 -->
318
+ <div class="bg-white p-8 rounded-lg shadow-md">
319
+ <div class="flex items-center mb-4">
320
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
321
+ <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Customer" class="w-full h-full object-cover">
322
+ </div>
323
+ <div>
324
+ <h4 class="font-semibold">Jessica T.</h4>
325
+ <div class="flex text-yellow-400">
326
+ <i class="fas fa-star"></i>
327
+ <i class="fas fa-star"></i>
328
+ <i class="fas fa-star"></i>
329
+ <i class="fas fa-star"></i>
330
+ <i class="fas fa-star"></i>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ <p class="text-gray-600 italic">
335
+ "The Tropical Bliss juice is my absolute favorite! It's like a vacation in a bottle. I've been coming to JuicePop for over a year now and their quality never disappoints."
336
+ </p>
337
+ </div>
338
+
339
+ <!-- Testimonial 2 -->
340
+ <div class="bg-white p-8 rounded-lg shadow-md">
341
+ <div class="flex items-center mb-4">
342
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
343
+ <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Customer" class="w-full h-full object-cover">
344
+ </div>
345
+ <div>
346
+ <h4 class="font-semibold">David R.</h4>
347
+ <div class="flex text-yellow-400">
348
+ <i class="fas fa-star"></i>
349
+ <i class="fas fa-star"></i>
350
+ <i class="fas fa-star"></i>
351
+ <i class="fas fa-star"></i>
352
+ <i class="fas fa-star"></i>
353
+ </div>
354
+ </div>
355
+ </div>
356
+ <p class="text-gray-600 italic">
357
+ "As someone who's trying to eat healthier, JuicePop has been a game-changer. The Green Detox actually tastes good, which I never thought I'd say about a green juice!"
358
+ </p>
359
+ </div>
360
+
361
+ <!-- Testimonial 3 -->
362
+ <div class="bg-white p-8 rounded-lg shadow-md">
363
+ <div class="flex items-center mb-4">
364
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
365
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Customer" class="w-full h-full object-cover">
366
+ </div>
367
+ <div>
368
+ <h4 class="font-semibold">Sophia M.</h4>
369
+ <div class="flex text-yellow-400">
370
+ <i class="fas fa-star"></i>
371
+ <i class="fas fa-star"></i>
372
+ <i class="fas fa-star"></i>
373
+ <i class="fas fa-star"></i>
374
+ <i class="fas fa-star-half-alt"></i>
375
+ </div>
376
+ </div>
377
+ </div>
378
+ <p class="text-gray-600 italic">
379
+ "I love that JuicePop uses seasonal fruits. Their summer watermelon juice is incredible! The staff is always friendly and knowledgeable about their products too."
380
+ </p>
381
+ </div>
382
+ </div>
383
+ </div>
384
+ </section>
385
+
386
+ <!-- Order Section -->
387
+ <section id="order" class="py-16 bg-orange-500 text-white">
388
+ <div class="container mx-auto px-6">
389
+ <div class="text-center mb-12">
390
+ <h2 class="text-3xl font-bold">Ready to Refresh?</h2>
391
+ <div class="w-20 h-1 bg-white mx-auto mt-4"></div>
392
+ <p class="mt-4 max-w-2xl mx-auto">Order online for pickup or delivery. First-time customers get 15% off!</p>
393
+ </div>
394
+
395
+ <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden">
396
+ <div class="md:flex">
397
+ <div class="md:w-1/2 p-8">
398
+ <h3 class="text-2xl font-bold text-gray-800 mb-4">Place Your Order</h3>
399
+ <form>
400
+ <div class="mb-4">
401
+ <label class="block text-gray-700 mb-2" for="name">Name</label>
402
+ <input type="text" id="name" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500">
403
+ </div>
404
+ <div class="mb-4">
405
+ <label class="block text-gray-700 mb-2" for="email">Email</label>
406
+ <input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500">
407
+ </div>
408
+ <div class="mb-4">
409
+ <label class="block text-gray-700 mb-2" for="phone">Phone</label>
410
+ <input type="tel" id="phone" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500">
411
+ </div>
412
+ <div class="mb-4">
413
+ <label class="block text-gray-700 mb-2" for="juice">Select Juice</label>
414
+ <select id="juice" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500">
415
+ <option>Tropical Bliss</option>
416
+ <option>Berry Burst</option>
417
+ <option>Green Detox</option>
418
+ <option>Citrus Splash</option>
419
+ <option>Watermelon Chill</option>
420
+ <option>Carrot Sunshine</option>
421
+ </select>
422
+ </div>
423
+ <div class="mb-4">
424
+ <label class="block text-gray-700 mb-2" for="size">Size</label>
425
+ <div class="flex space-x-4">
426
+ <label class="inline-flex items-center">
427
+ <input type="radio" name="size" value="small" checked class="text-orange-500">
428
+ <span class="ml-2 text-gray-700">Small (12oz)</span>
429
+ </label>
430
+ <label class="inline-flex items-center">
431
+ <input type="radio" name="size" value="medium" class="text-orange-500">
432
+ <span class="ml-2 text-gray-700">Medium (16oz)</span>
433
+ </label>
434
+ <label class="inline-flex items-center">
435
+ <input type="radio" name="size" value="large" class="text-orange-500">
436
+ <span class="ml-2 text-gray-700">Large (24oz)</span>
437
+ </label>
438
+ </div>
439
+ </div>
440
+ <button type="submit" class="w-full py-3 bg-orange-500 text-white rounded-lg hover:bg-orange-600 transition">Place Order</button>
441
+ </form>
442
+ </div>
443
+ <div class="md:w-1/2 bg-orange-100 p-8 flex flex-col justify-center">
444
+ <h3 class="text-2xl font-bold text-gray-800 mb-4">Store Hours & Locations</h3>
445
+ <div class="mb-6">
446
+ <h4 class="font-semibold text-gray-800 mb-2">Downtown</h4>
447
+ <p class="text-gray-600">123 Fresh Street<br>Open Mon-Sat: 7am-7pm</p>
448
+ </div>
449
+ <div class="mb-6">
450
+ <h4 class="font-semibold text-gray-800 mb-2">Westside</h4>
451
+ <p class="text-gray-600">456 Health Avenue<br>Open Mon-Fri: 8am-6pm</p>
452
+ </div>
453
+ <div>
454
+ <h4 class="font-semibold text-gray-800 mb-2">Delivery Options</h4>
455
+ <p class="text-gray-600">Available through UberEats, DoorDash, and our own delivery service within 5 miles.</p>
456
+ </div>
457
+ </div>
458
+ </div>
459
+ </div>
460
+ </div>
461
+ </section>
462
+
463
+ <!-- Newsletter Section -->
464
+ <section class="py-16 bg-gray-100">
465
+ <div class="container mx-auto px-6 text-center">
466
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Join Our Juice Club</h2>
467
+ <p class="text-gray-600 max-w-2xl mx-auto mb-8">
468
+ Sign up for our newsletter and get exclusive discounts, new flavor announcements, and health tips delivered to your inbox.
469
+ </p>
470
+ <form class="max-w-md mx-auto flex">
471
+ <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-l-lg border focus:outline-none focus:ring-2 focus:ring-orange-500">
472
+ <button type="submit" class="px-6 py-3 bg-orange-500 text-white rounded-r-lg hover:bg-orange-600 transition">Subscribe</button>
473
+ </form>
474
+ </div>
475
+ </section>
476
+
477
+ <!-- Contact Section -->
478
+ <section id="contact" class="py-16 bg-white">
479
+ <div class="container mx-auto px-6">
480
+ <div class="text-center mb-16">
481
+ <h2 class="text-3xl font-bold text-gray-800">Get In Touch</h2>
482
+ <div class="w-20 h-1 bg-orange-500 mx-auto mt-4"></div>
483
+ </div>
484
+
485
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
486
+ <div>
487
+ <h3 class="text-xl font-semibold mb-4">Contact Information</h3>
488
+ <div class="space-y-4">
489
+ <div class="flex items-start">
490
+ <div class="text-orange-500 mr-4 mt-1">
491
+ <i class="fas fa-map-marker-alt"></i>
492
+ </div>
493
+ <div>
494
+ <h4 class="font-medium">Our Locations</h4>
495
+ <p class="text-gray-600">123 Fresh Street, Downtown<br>456 Health Avenue, Westside</p>
496
+ </div>
497
+ </div>
498
+ <div class="flex items-start">
499
+ <div class="text-orange-500 mr-4 mt-1">
500
+ <i class="fas fa-phone-alt"></i>
501
+ </div>
502
+ <div>
503
+ <h4 class="font-medium">Phone</h4>
504
+ <p class="text-gray-600">(555) 123-4567</p>
505
+ </div>
506
+ </div>
507
+ <div class="flex items-start">
508
+ <div class="text-orange-500 mr-4 mt-1">
509
+ <i class="fas fa-envelope"></i>
510
+ </div>
511
+ <div>
512
+ <h4 class="font-medium">Email</h4>
513
+ <p class="text-gray-600">[email protected]</p>
514
+ </div>
515
+ </div>
516
+ <div class="flex items-start">
517
+ <div class="text-orange-500 mr-4 mt-1">
518
+ <i class="fas fa-clock"></i>
519
+ </div>
520
+ <div>
521
+ <h4 class="font-medium">Hours</h4>
522
+ <p class="text-gray-600">Monday-Friday: 7am-7pm<br>Saturday: 8am-6pm<br>Sunday: 9am-4pm</p>
523
+ </div>
524
+ </div>
525
+ </div>
526
+
527
+ <div class="mt-8">
528
+ <h3 class="text-xl font-semibold mb-4">Follow Us</h3>
529
+ <div class="flex space-x-4">
530
+ <a href="#" class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center text-orange-500 hover:bg-orange-500 hover:text-white transition">
531
+ <i class="fab fa-facebook-f"></i>
532
+ </a>
533
+ <a href="#" class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center text-orange-500 hover:bg-orange-500 hover:text-white transition">
534
+ <i class="fab fa-instagram"></i>
535
+ </a>
536
+ <a href="#" class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center text-orange-500 hover:bg-orange-500 hover:text-white transition">
537
+ <i class="fab fa-twitter"></i>
538
+ </a>
539
+ <a href="#" class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center text-orange-500 hover:bg-orange-500 hover:text-white transition">
540
+ <i class="fab fa-tiktok"></i>
541
+ </a>
542
+ </div>
543
+ </div>
544
+ </div>
545
+
546
+ <div>
547
+ <h3 class="text-xl font-semibold mb-4">Send Us a Message</h3>
548
+ <form>
549
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
550
+ <div>
551
+ <label class="block text-gray-700 mb-2" for="contact-name">Name</label>
552
+ <input type="text" id="contact-name" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500">
553
+ </div>
554
+ <div>
555
+ <label class="block text-gray-700 mb-2" for="contact-email">Email</label>
556
+ <input type="email" id="contact-email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500">
557
+ </div>
558
+ </div>
559
+ <div class="mb-4">
560
+ <label class="block text-gray-700 mb-2" for="contact-subject">Subject</label>
561
+ <input type="text" id="contact-subject" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500">
562
+ </div>
563
+ <div class="mb-4">
564
+ <label class="block text-gray-700 mb-2" for="contact-message">Message</label>
565
+ <textarea id="contact-message" rows="4" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500"></textarea>
566
+ </div>
567
+ <button type="submit" class="px-6 py-3 bg-orange-500 text-white rounded-lg hover:bg-orange-600 transition">Send Message</button>
568
+ </form>
569
+ </div>
570
+ </div>
571
+ </div>
572
+ </section>
573
+
574
+ <!-- Footer -->
575
+ <footer class="bg-gray-800 text-white py-12">
576
+ <div class="container mx-auto px-6">
577
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
578
+ <div>
579
+ <h3 class="text-xl font-bold mb-4">Juice<span class="text-orange-500">Pop</span></h3>
580
+ <p class="text-gray-400">
581
+ Fresh, delicious, and nutritious fruit juices to boost your health and energy.
582
+ </p>
583
+ </div>
584
+ <div>
585
+ <h4 class="font-semibold mb-4">Quick Links</h4>
586
+ <ul class="space-y-2">
587
+ <li><a href="#home" class="text-gray-400 hover:text-white transition">Home</a></li>
588
+ <li><a href="#menu" class="text-gray-400 hover:text-white transition">Menu</a></li>
589
+ <li><a href="#about" class="text-gray-400 hover:text-white transition">About Us</a></li>
590
+ <li><a href="#testimonials" class="text-gray-400 hover:text-white transition">Testimonials</a></li>
591
+ <li><a href="#contact" class="text-gray-400 hover:text-white transition">Contact</a></li>
592
+ </ul>
593
+ </div>
594
+ <div>
595
+ <h4 class="font-semibold mb-4">Our Juices</h4>
596
+ <ul class="space-y-2">
597
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Tropical Bliss</a></li>
598
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Berry Burst</a></li>
599
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Green Detox</a></li>
600
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Citrus Splash</a></li>
601
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Seasonal Specials</a></li>
602
+ </ul>
603
+ </div>
604
+ <div>
605
+ <h4 class="font-semibold mb-4">Newsletter</h4>
606
+ <p class="text-gray-400 mb-4">
607
+ Subscribe to get updates on new flavors and special offers.
608
+ </p>
609
+ <form class="flex">
610
+ <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-lg text-gray-800 focus:outline-none">
611
+ <button class="px-4 py-2 bg-orange-500 rounded-r-lg hover:bg-orange-600 transition">
612
+ <i class="fas fa-paper-plane"></i>
613
+ </button>
614
+ </form>
615
+ </div>
616
+ </div>
617
+
618
+ <div class="border-t border-gray-700 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
619
+ <p class="text-gray-400 mb-4 md:mb-0">
620
+ &copy; 2023 JuicePop. All rights reserved.
621
+ </p>
622
+ <div class="flex space-x-6">
623
+ <a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a>
624
+ <a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a>
625
+ <a href="#" class="text-gray-400 hover:text-white transition">FAQ</a>
626
+ </div>
627
+ </div>
628
+ </div>
629
+ </footer>
630
+
631
+ <script>
632
+ // Mobile menu toggle
633
+ document.getElementById('menu-btn').addEventListener('click', function() {
634
+ document.getElementById('mobile-menu').classList.toggle('hidden');
635
+ });
636
+
637
+ // Smooth scrolling for all links
638
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
639
+ anchor.addEventListener('click', function (e) {
640
+ e.preventDefault();
641
+
642
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
643
+ behavior: 'smooth'
644
+ });
645
+
646
+ // Close mobile menu if open
647
+ document.getElementById('mobile-menu').classList.add('hidden');
648
+ });
649
+ });
650
+
651
+ // Add animation to juice cards when they come into view
652
+ const juiceCards = document.querySelectorAll('.juice-card');
653
+
654
+ const observer = new IntersectionObserver((entries) => {
655
+ entries.forEach(entry => {
656
+ if (entry.isIntersecting) {
657
+ entry.target.style.opacity = 1;
658
+ entry.target.style.transform = 'translateY(0)';
659
+ }
660
+ });
661
+ }, { threshold: 0.1 });
662
+
663
+ juiceCards.forEach(card => {
664
+ card.style.opacity = 0;
665
+ card.style.transform = 'translateY(20px)';
666
+ card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
667
+ observer.observe(card);
668
+ });
669
+
670
+ // Form submission handling (simplified)
671
+ document.querySelectorAll('form').forEach(form => {
672
+ form.addEventListener('submit', function(e) {
673
+ e.preventDefault();
674
+ alert('Thank you for your message! We will get back to you soon.');
675
+ this.reset();
676
+ });
677
+ });
678
+ </script>
679
+ <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=vc3nt/juicepop" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
680
+ </html>