Hugging Face's logo

Spaces:
enzostvs
/
deepsite
Running

App Files Community
166

Add photos to the product page the first image goes to the Ecosip Cup the 2nd one goes to the work cup and the 3rd goes to the kids cup

#149
by hunter45 - opened
base: refs/heads/main
←
from: refs/pr/149
Discussion Files changed
+546
-0
Files changed (1) hide show
  1. EcoSip +546 -0
EcoSip ADDED
@@ -0,0 +1,546 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>EcoSip - Drink Smart, Live Green</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
+ @keyframes float {
11
+ 0% { transform: translateY(0px); }
12
+ 50% { transform: translateY(-10px); }
13
+ 100% { transform: translateY(0px); }
14
+ }
15
+ .floating-logo {
16
+ animation: float 3s ease-in-out infinite;
17
+ }
18
+ .wave-bg {
19
+ background-image: url('https://images.unsplash.com/photo-1503756234508-e32369269deb?ixlib=rb-4.0.3');
20
+ background-size: cover;
21
+ background-position: center;
22
+ background-attachment: fixed;
23
+ }
24
+ .product-card:hover {
25
+ transform: translateY(-10px);
26
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
27
+ }
28
+ .parallax {
29
+ background-attachment: fixed;
30
+ background-position: center;
31
+ background-repeat: no-repeat;
32
+ background-size: cover;
33
+ }
34
+ .leaf {
35
+ position: absolute;
36
+ width: 30px;
37
+ height: 30px;
38
+ background-color: #4ade80;
39
+ border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
40
+ transform: rotate(-45deg);
41
+ top: 20px;
42
+ right: -10px;
43
+ }
44
+ .cup {
45
+ position: relative;
46
+ width: 60px;
47
+ height: 80px;
48
+ background-color: #60a5fa;
49
+ border-radius: 5px 5px 30px 30px;
50
+ margin: 0 auto;
51
+ }
52
+ .cup:before {
53
+ content: '';
54
+ position: absolute;
55
+ width: 30px;
56
+ height: 40px;
57
+ border: 5px solid #3b82f6;
58
+ border-radius: 0 0 15px 15px;
59
+ border-top: none;
60
+ top: -15px;
61
+ left: 15px;
62
+ }
63
+ </style>
64
+ </head>
65
+ <body class="font-sans bg-gray-50">
66
+ <!-- View Website Link -->
67
+ <div class="bg-green-600 text-white text-center py-2">
68
+ <a href="https://www.EcoSip.com" target="_blank" class="underline font-medium">View Live Website</a>
69
+ </div>
70
+
71
+ <!-- Navigation -->
72
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
73
+ <div class="max-w-6xl mx-auto px-4">
74
+ <div class="flex justify-between">
75
+ <div class="flex space-x-7">
76
+ <div class="flex items-center py-4 px-2">
77
+ <div class="cup floating-logo">
78
+ <div class="leaf"></div>
79
+ </div>
80
+ <a href="#" class="font-semibold text-gray-900 text-2xl ml-2">EcoSip</a>
81
+ </div>
82
+ </div>
83
+ <div class="hidden md:flex items-center space-x-1">
84
+ <a href="#home" class="py-4 px-2 text-green-600 border-b-4 border-green-600 font-medium">Home</a>
85
+ <a href="#products" class="py-4 px-2 text-gray-500 hover:text-green-600 transition duration-300">Products</a>
86
+ <a href="#mission" class="py-4 px-2 text-gray-500 hover:text-green-600 transition duration-300">Our Mission</a>
87
+ <a href="#impact" class="py-4 px-2 text-gray-500 hover:text-green-600 transition duration-300">Impact</a>
88
+ <a href="#contact" class="py-4 px-2 text-gray-500 hover:text-green-600 transition duration-300">Contact</a>
89
+ <a href="#" class="py-2 px-4 bg-green-600 text-white font-medium rounded-lg hover:bg-green-700 transition duration-300">Shop Now</a>
90
+ </div>
91
+ <div class="md:hidden flex items-center">
92
+ <button class="outline-none mobile-menu-button">
93
+ <svg class="w-6 h-6 text-gray-500" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
94
+ <path d="M4 6h16M4 12h16M4 18h16"></path>
95
+ </svg>
96
+ </button>
97
+ </div>
98
+ </div>
99
+ </div>
100
+ <div class="hidden mobile-menu">
101
+ <ul>
102
+ <li><a href="#home" class="block text-sm px-2 py-4 text-white bg-green-600 font-semibold">Home</a></li>
103
+ <li><a href="#products" class="block text-sm px-2 py-4 hover:bg-green-600 hover:text-white transition duration-300">Products</a></li>
104
+ <li><a href="#mission" class="block text-sm px-2 py-4 hover:bg-green-600 hover:text-white transition duration-300">Our Mission</a></li>
105
+ <li><a href="#impact" class="block text-sm px-2 py-4 hover:bg-green-600 hover:text-white transition duration-300">Impact</a></li>
106
+ <li><a href="#contact" class="block text-sm px-2 py-4 hover:bg-green-600 hover:text-white transition duration-300">Contact</a></li>
107
+ </ul>
108
+ </div>
109
+ </nav>
110
+
111
+ <!-- Hero Section -->
112
+ <section id="home" class="wave-bg py-20 md:py-32 text-white">
113
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
114
+ <div class="md:flex md:items-center md:justify-between">
115
+ <div class="md:w-1/2 mb-10 md:mb-0">
116
+ <h1 class="text-4xl md:text-6xl font-bold mb-4">Drink Smart, <span class="text-green-300">Live Green</span></h1>
117
+ <p class="text-xl mb-8">Beautiful, functional products made from recycled ocean plastic. Each cup removes approximately 50 plastic bottles from our oceans.</p>
118
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
119
+ <a href="#products" class="px-8 py-3 bg-green-600 text-white font-medium rounded-lg hover:bg-green-700 transition duration-300 text-center">Shop Now</a>
120
+ <a href="#mission" class="px-8 py-3 bg-transparent border-2 border-white text-white font-medium rounded-lg hover:bg-white hover:text-gray-900 transition duration-300 text-center">Our Story</a>
121
+ </div>
122
+ </div>
123
+ <div class="md:w-1/2 flex justify-center">
124
+ <div class="relative">
125
+ <img src="https://images.unsplash.com/photo-1590845947676-fa2576f585d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="EcoSip Cup" class="rounded-lg shadow-2xl w-full max-w-md border-4 border-white">
126
+ <div class="absolute -bottom-5 -right-5 bg-green-600 text-white px-4 py-2 rounded-lg shadow-lg">
127
+ <p class="font-bold">Saves 50 plastic bottles</p>
128
+ </div>
129
+ </div>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ </section>
134
+
135
+ <!-- Stats Section -->
136
+ <section class="bg-white py-12">
137
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
138
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
139
+ <div class="bg-gray-50 p-6 rounded-lg shadow">
140
+ <div class="text-green-600 text-4xl font-bold mb-2">10%</div>
141
+ <div class="text-gray-600">of profits donated to ocean cleanup</div>
142
+ </div>
143
+ <div class="bg-gray-50 p极客时间-6 rounded-lg shadow">
144
+ <div class="text-green-600 text-4xl font-bold mb-2">50+</div>
145
+ <div class="text-gray-600">plastic bottles removed per cup</div>
146
+ </div>
147
+ <div class="bg-gray-50 p-6 rounded-lg shadow">
148
+ <div class="text-green-600 text-4xl font-bold mb-2">100%</div>
149
+ <div class="text-gray-600">BPA-free & dishwasher safe</div>
150
+ </div>
151
+ </div>
152
+ </div>
153
+ </section>
154
+
155
+ <!-- Products Section -->
156
+ <section id="products" class="py-20 bg-gray-50">
157
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
158
+ <div class="text-center mb-16">
159
+ <h2 class="text-3xl font-bold text-gray-900 mb极客时间-4">Our <span class="text-green-600">Eco-Friendly</span> Products</h2>
160
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Sustainable drinking solutions for every lifestyle</p>
161
+ </div>
162
+
163
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
164
+ <!-- EcoSip Cup -->
165
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-500">
166
+ <div class="relative">
167
+ <img src="https://images.unsplash.com/photo-1602143407151-7111541de5e8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="EcoSip Cup" class="w-full h-64 object-cover">
168
+ <div class="absolute top-2 right-2 bg-green-600 text-white text-xs px-2 py-1 rounded-full">BESTSELLER</div>
169
+ </div>
170
+ <div class="p-6">
171
+ <h3 class="text-xl font-semibold text-gray-900 mb-2">EcoSip Cup</h3>
172
+ <p class="text-gray-600 mb-4">16oz insulated cup with silicone lid and thermal sleeve. Perfect for your daily commute.</p>
173
+ <div class="flex justify-between items-center">
174
+ <span class="text-2xl font-bold text-gray-900">$24.99</span>
175
+ <button class="px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-lg hover:bg-green-700 transition duration-300">Add to Cart</button>
176
+ </div>
177
+ </div>
178
+ </div>
179
+
180
+ <!-- EcoSip Office -->
181
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-500">
182
+ <div class="relative">
183
+ <img src="https://images.unsplash.com/photo-1571902943209-9d9d0b4c6a8f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="EcoSip Office" class="w-full h-64 object-cover">
184
+ <div class="absolute top-2 right-2 bg-blue-600 text-white text-xs px-2 py-1 rounded-full">NEW</div>
185
+ </div>
186
+ <div class="p-6">
187
+ <h3 class="text-xl font-semibold text-gray-900 mb-2">EcoSip Office</h3>
188
+ <p class="text-gray-600 mb-4">12oz sleek design with leak-proof lid. Ideal for your workspace or meetings.</p>
189
+ <div class="flex justify-between items-center">
190
+ <span class="text-2xl font-bold text-gray-900">$19.99</span>
191
+ <button class="px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-lg hover:bg-green-700 transition duration-300">Add to Cart</button>
192
+ </div>
193
+ </div>
194
+ </div>
195
+
196
+ <!-- EcoSip Kids -->
197
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-500">
198
+ <div class="relative">
199
+ <img src="https://images.unsplash.com/photo-1590071089560-5e35a8d2d6a6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="EcoSip Kids" class="w-full h-64 object-cover">
200
+ <div class="absolute top-2 right-2 bg-yellow-400 text-white text-xs px-2 py-1 rounded-full">KIDS</div>
201
+ </div>
202
+ <div class="p-6">
203
+ <h3 class="text-xl font-semibold text-gray-900 mb-2">EcoSip Kids</h3>
204
+ <p class="text-gray-600 mb-4">8oz colorful cup with fun designs and spill-proof lid. Safe for little hands.</p>
205
+ <div class="flex justify-between items-center">
206
+ <span class="text-2xl font-bold text-gray-900">$16.99</span>
207
+ <button class="px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-lg hover:bg-green-700 transition duration-300">Add to Cart</button>
208
+ </div>
209
+ </div>
210
+ </div>
211
+ </div>
212
+
213
+ <div class="text-center mt-12">
214
+ <a href="#" class="inline-block px-8 py-3 bg-gray-900 text-white font-medium rounded-lg hover:bg-gray-800 transition duration-300">View All Products</a>
215
+ </div>
216
+ </div>
217
+ </section>
218
+
219
+ <!-- Mission Section -->
220
+ <section id="mission" class="py-20 bg-white">
221
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
222
+ <div class="md:flex md:items-center md:space-x-12">
223
+ <div class="md:w-1/2 mb-10 md:mb-0">
224
+ <img src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=713&q=80" alt="Ocean Plastic" class="rounded-lg shadow-lg w-full">
225
+ </div>
226
+ <div class="md:w-1/2">
227
+ <h2 class="text-3xl font-bold text-gray-900 mb-6">Our <span class="text-green-600">Mission</span></h2>
228
+ <p class="text-gray-600 mb-4">At EcoSip, we're on a mission to reduce single-use plastic waste by creating beautiful, functional products from recycled ocean plastic.</p>
229
+ <p class="text-gray-600 mb-6">We partner with cleanup organizations worldwide to source our materials responsibly. Our BPA-free, dishwasher-safe cups are designed for everyday use, making sustainability convenient and stylish.</p>
230
+
231
+ <div class="space-y-4">
232
+ <div class="flex items-start">
233
+ <div class="flex-shrink-0 mt-1">
234
+ <div class="flex items-center justify-center h-6 w-6 rounded-full bg-green-100 text-green-600">
235
+ <svg class="h-4 w-4" fill="none" viewBox="0 极客时间0 24 24" stroke="currentColor">
236
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
237
+ </svg>
238
+ </div>
239
+ </div>
240
+ <p class="ml-3 text-gray-600">Made from recycled ocean plastic</p>
241
+ </div>
242
+ <div class="flex items-start">
243
+ <div class="flex-shrink-0 mt-1">
244
+ <div class="flex items-center justify-center h-6 w-6 rounded-full bg-green-100 text-green-600">
245
+ <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
246
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
247
+ </svg>
248
+ </div>
249
+ </div>
250
+ <p class="ml-3 text-gray-600">Biodegradable packaging to reduce landfill waste</p>
251
+ </div>
252
+ <div class="flex items-start">
253
+ <div class="flex-shrink-0 mt-1">
254
+ <div class="flex items-center justify-center h-6 w-6 rounded-full bg-green-100 text-green-600">
255
+ <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
256
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
257
+ </svg>
258
+ </div>
259
+ </div>
260
+ <p class="ml-3 text-gray-600">10% of profits donated to Surfrider Foundation</p>
261
+ </div>
262
+ </div>
263
+ </div>
264
+ </div>
265
+ </div>
266
+ </section>
267
+
268
+ <!-- Impact Section -->
269
+ <section id="impact" class="py-20 parallax" style="background-image: url('https://images.unsplash.com/photo-1588591795084-1770cb3be374?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');">
270
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
271
+ <div class="bg-white bg-opacity-90 p-8 rounded-lg shadow-lg">
272
+ <h2 class="text-3xl font-bold text-gray-900 mb-6">Our <span class="text-green-600">Impact</span></h2>
273
+
274
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
275
+ <div>
276
+ <h3 class="text-xl font-semibold text-gray极客时间-900 mb-4">Plastic Waste Removed</h3>
277
+ <div class="w-full bg-gray-200 rounded-full h-4 mb-4">
278
+ <div class="bg-green-600 h-4 rounded-full" style="width: 75%"></div>
279
+ </div>
280
+ <p class="text-gray-600 mb-6">Each EcoSip cup removes approximately 50 plastic bottles worth of waste from our oceans.</p>
281
+
282
+ <h3 class="text-xl font-semibold text-gray-900 mb-4">Community Cleanups</h3>
283
+ <p class="text-gray-600">We partner with local clean up groups to help pick up trash in parks and rivers. Join our next cleanup event!</p>
284
+ </div>
285
+ <div>
286
+ <h3 class="text-xl font-semibold text-gray-900 mb-4">Charity Partnership</h3>
287
+ <div class="flex items-center mb-6">
288
+ <img src="https://www.surfrider.org/images/Surfrider19_Logo_Blue.png" alt="Surfrider Foundation" class="h-12 mr-4">
289
+ <p class="text-gray-600">We support the Surfrider Foundation because they fight to protect oceans and beaches from pollution.</p>
290
+ </div>
291
+
292
+ <h3 class="text-xl font-semibold text-gray-900 mb-4">Sustainable Packaging</h3>
293
+ <p class="text-gray-600">We use biodegradable packaging to avoid plastic wrapping and reduce landfill waste.</p>
294
+ </div>
295
+ </div>
296
+ </div>
297
+ </div>
298
+ </section>
299
+
300
+ <!-- Testimonials -->
301
+ <section class="py-20 bg-gray-50">
302
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
303
+ <div class="text-center mb-16">
304
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">What Our <span class="text-green-600">Customers</span> Say</h2>
305
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Join thousands of eco-conscious sippers</p>
306
+ </div>
307
+
308
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
309
+ <div class="bg-white p-8 rounded-lg shadow-md">
310
+ <div class="flex items-center mb-4">
311
+ <div class="flex -space-x-2 mr-4">
312
+ <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Customer">
313
+ </div>
314
+ <div>
315
+ <h4 class="font-semibold text-gray-900">Sarah Johnson</h4>
316
+ <div class="flex text-yellow-400">
317
+ <i class="fas fa-star"></i>
318
+ <i class="fas fa-star"></i>
319
+ <i class="fas fa-star"></i>
320
+ <i class="fas fa-star"></i>
321
+ <i class="fas fa-star"></i>
322
+ </div>
323
+ </div>
324
+ </div>
325
+ <p class="text-gray-600">"I love my EcoSip cup! It keeps my drinks hot for hours and I feel good knowing I'm helping reduce plastic waste. The design is beautiful too!"</p>
326
+ </div>
327
+
328
+ <div class="bg-white p-8 rounded-lg shadow-md">
329
+ <div class="flex items-center mb-4">
330
+ <div class="flex -space-x-2 mr-4">
331
+ <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Customer">
332
+ </div>
333
+ <div>
334
+ <h4 class="font-semibold text-gray-900">Michael Chen</h4>
335
+ <div class="flex text-yellow-400">
336
+ <i class="fas fa-star"></i>
337
+ <i class="fas fa-star"></i>
338
+ <i class="fas fa-star"></i>
339
+ <i class="fas fa-star"></i>
340
+ <i class="fas fa-star"></i>
341
+ </div>
342
+ </div>
343
+ </div>
344
+ <p class="text-gray-600">"The EcoSip Office cup is perfect for my commute. Never leaks and the sleek design looks professional in meetings. Plus it's great for the planet!"</p>
345
+ </div>
346
+
347
+ <div class="bg-white p-8 rounded-lg shadow-md">
348
+ <div class="flex items-center mb-4">
349
+ <div class="flex -space-x-2 mr-4">
350
+ <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Customer">
351
+ </div>
352
+ <div>
353
+ <h4 class="font-semibold text-gray-900">Emily Rodriguez</h4>
354
+ <div class="flex text-yellow-400">
355
+ <i class="fas fa-star"></i>
356
+ <i class="fas fa-star"></i>
357
+ <i class="fas fa-star"></i>
358
+ <i class="fas fa-star"></i>
359
+ <i class="fas fa-star"></i>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ <p class="text-gray-600">"My kids love their colorful EcoSip cups! They're durable, spill-proof, and I don't have to worry about plastic chemicals. Win-win for our family and the ocean!"</p>
364
+ </div>
365
+ </div>
366
+ </div>
367
+ </section>
368
+
369
+ <!-- CTA Section -->
370
+ <section class="py-20 bg-green-600 text-white">
371
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
372
+ <h2 class="text-3xl font-bold mb-6">Join the <span class="text-green-200">EcoSip</span> Movement</h2>
373
+ <p class="text-xl mb-8 max-w-3xl mx-auto">Every purchase removes plastic from our oceans and supports environmental charities.</p>
374
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
375
+ <a href="#products" class="px-8 py-3 bg-white text-green-600 font-medium rounded-lg hover:bg-gray-100 transition duration-300">Shop Now</a>
376
+ <a href="#" class="px-8 py-3 bg-transparent border-2 border-white font-medium rounded-lg hover:bg-green-700 transition duration-300">Learn About Cleanups</a>
377
+ </div>
378
+ </div>
379
+ </section>
380
+
381
+ <!-- Contact Section -->
382
+ <section id="contact" class="py-20 bg-white">
383
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
384
+ <div class="md:flex md:items-center md:space-x-12">
385
+ <div class="md:w-1/2 mb-10 md:mb-0">
386
+ <h2 class="text-3xl font-bold text-gray-900 mb-6">Get In <span class="text-green-600">Touch</span></h2>
387
+ <p class="text-gray-600 mb-6">Have questions about our products or want to partner with us? We'd love to hear from you!</p>
388
+
389
+ <div class="space-y-4">
390
+ <div class="flex items-start">
391
+ <div class="flex-shrink-0 mt-1 text-green-600">
392
+ <i class="fas fa-envelope"></i>
393
+ </div>
394
+ <p class="ml-3 text-gray-600">hello@ecosip.com</p>
395
+ </div>
396
+ <div class="flex items-start">
397
+ <div class="flex-shrink-0 mt-1 text-green-600">
398
+ <i class="fas fa-phone"></i>
399
+ </div>
400
+ <p class="ml-3 text-gray-600">(555) 123-4567</p>
401
+ </div>
402
+ <div class="flex items-start">
403
+ <div class="flex-shrink-0 mt-1 text-green-600">
404
+ <i class="fas fa-map-marker-alt"></i>
405
+ </div>
406
+ <p class="ml-3 text-gray-600">123 Ocean Ave, Santa Monica, CA 90401</p>
407
+ </div>
408
+ </div>
409
+
410
+ <div class="mt-8">
411
+ <h3 class="text-xl font-semibold text-gray-900 mb-4">Follow Us</h3>
412
+ <div class="flex space-x-4">
413
+ <a href="#" class="text-gray-600 hover:text-green-600 transition duration-300">
414
+ <i class="fab fa-facebook-f text-2xl"></i>
415
+ </a>
416
+ <a href="#" class="text-gray-600 hover:text-green-600 transition duration-300">
417
+ <i class="fab fa-twitter text-2xl"></i>
418
+ </a>
419
+ <a href="#" class="text-gray-600 hover:text-green-600 transition duration-300">
420
+ <极客时间i class="fab fa-instagram text-2xl"></i>
421
+ </a>
422
+ <a href="#" class="text-gray-600 hover:text-green-600 transition duration-300">
423
+ <i class="fab fa-pinterest text-2xl"></i>
424
+ </a>
425
+ </div>
426
+ </div>
427
+ </div>
428
+ <div class="md:w-1/2">
429
+ <form class="bg-gray-50 p-8 rounded-lg shadow-md">
430
+ <div class="mb-4">
431
+ <label for="name" class="block text-gray-700 font-medium mb-2">Name</label>
432
+ <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-green-600">
433
+ </div>
434
+ <div class="mb-4">
435
+ <label for="email" class="block text-gray-700 font-medium mb-2">Email</label>
436
+ <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-green-600">
437
+ </div>
438
+ <div class="mb-4">
439
+ <label for="message" class="block text-gray-700 font-medium mb-2">Message</label>
440
+ <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-green-600"></textarea>
441
+ </div>
442
+ <button type="submit" class="w-full px-4 py-2 bg-green-600 text-white font-medium rounded-lg hover:bg-green-700 transition duration-300">Send Message</button>
443
+ </form>
444
+ </div>
445
+ </div>
446
+ </div>
447
+ </section>
448
+
449
+ <!-- Footer -->
450
+ <footer class="bg-gray-900 text-white py-12">
451
+ <div class="max极客时间-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
452
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
453
+ <div>
454
+ <div class="flex items-center mb-4">
455
+ <div class="cup">
456
+ <div class="leaf"></div>
457
+ </div>
458
+ <a href="#" class="font-semibold text-xl ml-2">EcoSip</a>
459
+ </div>
460
+ <p class="text-gray-400">Drink Smart, Live Green</p>
461
+ <p class="text-gray-400 mt-4">Making sustainability convenient and stylish.</p>
462
+ </div>
463
+ <div>
464
+ <h3 class="text-lg font-semibold mb-4">Shop</h3>
465
+ <ul class="space-y-2">
466
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">All Products</a></li>
467
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">EcoSip Cup</a></li>
468
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">EcoSip Office</a></li>
469
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">EcoSip Kids</a></li>
470
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Accessories</a></li>
471
+ </ul>
472
+ </div>
473
+ <div>
474
+ <h3 class="text-lg font-semibold mb-4">About</h3>
475
+ <ul class="space-y-2">
476
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Our Mission</a></li>
477
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Impact</a></li>
478
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Partnerships</a></li>
479
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Blog</a></li>
480
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Careers</a></li>
481
+ </ul>
482
+ </div>
483
+ <div>
484
+ <h3 class="text-lg font-semibold mb-4">Support</h3>
485
+ <ul class="space-y-2">
486
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Contact Us</a></li>
487
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">FAQs</a></li>
488
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Shipping & Returns</a></li>
489
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Warranty</a></li>
490
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Privacy Policy</a></li>
491
+ </ul>
492
+ </div>
493
+ </div>
494
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
495
+ <p class="text-gray-400">© 2023 EcoSip. All rights reserved.</p>
496
+ <div class="flex space-x-6 mt-4 md:mt-0">
497
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
498
+ <i class="fab fa-facebook-f"></i>
499
+ </a>
500
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
501
+ <i class="fab fa-twitter"></i>
502
+ </a>
503
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
504
+ <i class="fab fa-instagram"></i>
505
+ </a>
506
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
507
+ <i class="fab fa-pinterest"></i>
508
+ </a>
509
+ </div>
510
+ </div>
511
+ </div>
512
+ </footer>
513
+
514
+ <script>
515
+ // Mobile menu toggle
516
+ const btn = document.querySelector('.mobile-menu-button');
517
+ const menu = document.querySelector('.mobile-menu');
518
+
519
+ btn.addEventListener('click', () => {
520
+ menu.classList.toggle('hidden');
521
+ });
522
+
523
+ // Smooth scrolling for anchor links
524
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
525
+ anchor.addEventListener('click', function (e) {
526
+ e.preventDefault();
527
+
528
+ const targetId = this.getAttribute('href');
529
+ if (targetId === '#') return;
530
+
531
+ const targetElement = document.querySelector(targetId);
532
+ if (targetElement) {
533
+ targetElement.scrollIntoView({
534
+ behavior: 'smooth'
535
+ });
536
+
537
+ // Close mobile menu if open
538
+ if (!menu.classList.contains('hidden')) {
539
+ menu.classList.add('hidden');
540
+ }
541
+ }
542
+ });
543
+ });
544
+ </script>
545
+ </body>
546
+ </html>