Hugging Face's logo

Spaces:
Onyeka1187
/
agripack
Running

App Files Community
Onyeka1187 commited on
Commit
455782c
·
verified ·
1 Parent(s): 3bba0bf

I'm still not ok with your design, please include sample images of biodegradable takeaway plates, and the background images should reflect the Nigerian market and farm - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +661 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Agripack
3
- emoji: 📉
4
- colorFrom: red
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: agripack
3
+ emoji: 🐳
4
+ colorFrom: purple
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,661 @@
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>EcoPlate | Biodegradable Plates from Agricultural Waste</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
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#4CAF50',
15
+ secondary: '#8BC34A',
16
+ accent: '#CDDC39',
17
+ dark: '#2E7D32',
18
+ light: '#C8E6C9',
19
+ }
20
+ }
21
+ }
22
+ }
23
+ </script>
24
+ <style>
25
+ .hero-bg {
26
+ background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://images.unsplash.com/photo-1590674899484-d5640e854abe?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
27
+ background-size: cover;
28
+ background-position: center;
29
+ }
30
+ .product-card:hover {
31
+ transform: translateY(-10px);
32
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
33
+ }
34
+ .transition-all {
35
+ transition: all 0.3s ease;
36
+ }
37
+ </style>
38
+ </head>
39
+ <body class="font-sans antialiased text-gray-800">
40
+ <!-- Navigation -->
41
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
42
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
43
+ <div class="flex justify-between h-16">
44
+ <div class="flex items-center">
45
+ <div class="flex-shrink-0 flex items-center">
46
+ <i class="fas fa-leaf text-primary text-2xl mr-2"></i>
47
+ <span class="text-xl font-bold text-primary">Agri<span class="text-dark">Pack</span></span>
48
+ </div>
49
+ </div>
50
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
51
+ <a href="#home" class="text-dark px-3 py-2 rounded-md text-sm font-medium hover:text-primary transition-all">Home</a>
52
+ <a href="#about" class="text-gray-600 hover:text-dark px-3 py-2 rounded-md text-sm font-medium transition-all">About</a>
53
+ <a href="#products" class="text-gray-600 hover:text-dark px-3 py-2 rounded-md text-sm font-medium transition-all">Products</a>
54
+ <a href="#impact" class="text-gray-600 hover:text-dark px-3 py-2 rounded-md text-sm font-medium transition-all">Impact</a>
55
+ <a href="#contact" class="text-gray-600 hover:text-dark px-3 py-2 rounded-md text-sm font-medium transition-all">Contact</a>
56
+ <a href="#order" class="bg-primary text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-dark transition-all">Order Now</a>
57
+ </div>
58
+ <div class="-mr-2 flex items-center md:hidden">
59
+ <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-dark hover:bg-gray-100 focus:outline-none">
60
+ <span class="sr-only">Open main menu</span>
61
+ <i class="fas fa-bars"></i>
62
+ </button>
63
+ </div>
64
+ </div>
65
+ </div>
66
+
67
+ <!-- Mobile menu -->
68
+ <div id="mobile-menu" class="hidden md:hidden">
69
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
70
+ <a href="#home" class="text-dark block px-3 py-2 rounded-md text-base font-medium">Home</a>
71
+ <a href="#about" class="text-gray-600 hover:text-dark block px-3 py-2 rounded-md text-base font-medium">About</a>
72
+ <a href="#products" class="text-gray-600 hover:text-dark block px-3 py-2 rounded-md text-base font-medium">Products</a>
73
+ <a href="#impact" class="text-gray-600 hover:text-dark block px-3 py-2 rounded-md text-base font-medium">Impact</a>
74
+ <a href="#contact" class="text-gray-600 hover:text-dark block px-3 py-2 rounded-md text-base font-medium">Contact</a>
75
+ <a href="#order" class="bg-primary text-white block px-3 py-2 rounded-md text-base font-medium text-center">Order Now</a>
76
+ </div>
77
+ </div>
78
+ </nav>
79
+
80
+ <!-- Hero Section -->
81
+ <section id="home" class="hero-bg text-white py-20 md:py-32">
82
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
83
+ <div class="md:w-2/3 lg:w-1/2">
84
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Nigeria's Sustainable Alternative to Styrofoam</h1>
85
+ <p class="text-xl mb-8">100% biodegradable packaging made from rice husk and farm waste - compliant with Lagos' 2025 plastic ban.</p>
86
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
87
+ <a href="#order" class="bg-primary hover:bg-dark text-white px-6 py-3 rounded-lg text-lg font-semibold text-center transition-all">Order Samples</a>
88
+ <a href="#about" class="bg-white hover:bg-gray-100 text-dark px-6 py-3 rounded-lg text-lg font-semibold text-center transition-all">Learn More</a>
89
+ </div>
90
+ </div>
91
+ </div>
92
+ </section>
93
+
94
+ <!-- Stats Section -->
95
+ <section class="bg-primary text-white py-12">
96
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
97
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
98
+ <div>
99
+ <div class="text-3xl font-bold mb-2">100%</div>
100
+ <div class="text-sm uppercase tracking-wider">Biodegradable</div>
101
+ </div>
102
+ <div>
103
+ <div class="text-3xl font-bold mb-2">30M+</div>
104
+ <div class="text-sm uppercase tracking-wider">Plastic Plates Replaced</div>
105
+ </div>
106
+ <div>
107
+ <div class="text-3xl font-bold mb-2">200+</div>
108
+ <div class="text-sm uppercase tracking-wider">Farmers Supported</div>
109
+ </div>
110
+ <div>
111
+ <div class="text-3xl font-bold mb-2">0</div>
112
+ <div class="text-sm uppercase tracking-wider">Toxic Chemicals</div>
113
+ </div>
114
+ </div>
115
+ </div>
116
+ </section>
117
+
118
+ <!-- About Section -->
119
+ <section id="about" class="py-20 bg-gray-50">
120
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
121
+ <div class="lg:flex lg:items-center lg:justify-between">
122
+ <div class="lg:w-1/2 mb-12 lg:mb-0">
123
+ <img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Nigerian agricultural waste" class="rounded-lg shadow-xl w-full">
124
+ </div>
125
+ <div class="lg:w-1/2 lg:pl-12">
126
+ <h2 class="text-3xl font-bold text-dark mb-6">Turning Waste Into Sustainable Tableware</h2>
127
+ <p class="text-gray-600 mb-6">At EcoPlate, we've developed an innovative solution to two pressing environmental issues: agricultural waste disposal and plastic pollution. Our plates are crafted from leftover crop residues that would otherwise be burned, contributing to air pollution.</p>
128
+ <p class="text-gray-600 mb-8">By upcycling this waste into durable, compostable tableware, we're creating a circular economy that benefits farmers, food vendors, and the planet.</p>
129
+ <div class="space-y-4">
130
+ <div class="flex items-start">
131
+ <div class="flex-shrink-0 bg-primary bg-opacity-10 p-2 rounded-full">
132
+ <i class="fas fa-check text-primary"></i>
133
+ </div>
134
+ <p class="ml-3 text-gray-600">Made from 100% agricultural byproducts</p>
135
+ </div>
136
+ <div class="flex items-start">
137
+ <div class="flex-shrink-0 bg-primary bg-opacity-10 p-2 rounded-full">
138
+ <i class="fas fa-check text-primary"></i>
139
+ </div>
140
+ <p class="ml-3 text-gray-600">Completely biodegradable in 90 days</p>
141
+ </div>
142
+ <div class="flex items-start">
143
+ <div class="flex-shrink-0 bg-primary bg-opacity-10 p-2 rounded-full">
144
+ <i class="fas fa-check text-primary"></i>
145
+ </div>
146
+ <p class="ml-3 text-gray-600">Affordable alternative to plastic disposables</p>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </div>
151
+ </div>
152
+ </section>
153
+
154
+ <!-- Products Section -->
155
+ <section id="products" class="py-20">
156
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
157
+ <div class="text-center mb-16">
158
+ <h2 class="text-3xl font-bold text-dark mb-4">Our Sustainable Product Line</h2>
159
+ <p class="text-gray-600 max-w-2xl mx-auto">Designed for food vendors who care about their environmental impact without compromising on quality or affordability.</p>
160
+ </div>
161
+
162
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
163
+ <!-- Product 1 -->
164
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition-all">
165
+ <div class="h-48 bg-gray-100 flex items-center justify-center">
166
+ <img src="https://images.unsplash.com/photo-1633429877819-a0d9bf01b8e3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Nigerian biodegradable plates" class="h-full w-full object-cover">
167
+ </div>
168
+ <div class="p-6">
169
+ <h3 class="text-xl font-semibold text-dark mb-2">Food Packs</h3>
170
+ <p class="text-gray-600 mb-4">Styrofoam-free food containers perfect for Nigerian takeaway meals.</p>
171
+ <div class="flex justify-between items-center">
172
+ <span class="text-primary font-bold">From $0.15/plate</span>
173
+ <button class="bg-primary hover:bg-dark text-white px-4 py-2 rounded text-sm transition-all">Order Now</button>
174
+ </div>
175
+ </div>
176
+ </div>
177
+
178
+ <!-- Product 2 -->
179
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition-all">
180
+ <div class="h-48 bg-gray-100 flex items-center justify-center">
181
+ <img src="https://images.unsplash.com/photo-1615484477778-ca3b77940c25?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Nigerian food in biodegradable plates" class="h-full w-full object-cover">
182
+ </div>
183
+ <div class="p-6">
184
+ <h3 class="text-xl font-semibold text-dark mb-2">Square Plates</h3>
185
+ <p class="text-gray-600 mb-4">Great for portion control and modern presentation, 7" and 9" sizes.</p>
186
+ <div class="flex justify-between items-center">
187
+ <span class="text-primary font-bold">From $0.18/plate</span>
188
+ <button class="bg-primary hover:bg-dark text-white px-4 py-2 rounded text-sm transition-all">Order Now</button>
189
+ </div>
190
+ </div>
191
+ </div>
192
+
193
+ <!-- Product 3 -->
194
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition-all">
195
+ <div class="h-48 bg-gray-100 flex items-center justify-center">
196
+ <img src="https://images.unsplash.com/photo-1633429877819-a0d9bf01b8e3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Nigerian biodegradable plate assortment" class="h-full w-full object-cover">
197
+ </div>
198
+ <div class="p-6">
199
+ <h3 class="text-xl font-semibold text-dark mb-2">Combo Packs</h3>
200
+ <p class="text-gray-600 mb-4">Mixed sizes for all your catering needs. Save 15% with bulk orders.</p>
201
+ <div class="flex justify-between items-center">
202
+ <span class="text-primary font-bold">From $0.12/plate</span>
203
+ <button class="bg-primary hover:bg-dark text-white px-4 py-2 rounded text-sm transition-all">Order Now</button>
204
+ </div>
205
+ </div>
206
+ </div>
207
+ </div>
208
+
209
+ <div class="text-center mt-12">
210
+ <a href="#order" class="inline-block bg-dark hover:bg-primary text-white px-6 py-3 rounded-lg text-lg font-semibold transition-all">View Full Product Catalog</a>
211
+ </div>
212
+ </div>
213
+ </section>
214
+
215
+ <!-- Impact Section -->
216
+ <section id="impact" class="py-20 bg-gray-50">
217
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
218
+ <div class="text-center mb-16">
219
+ <h2 class="text-3xl font-bold text-dark mb-4">Our Environmental & Social Impact</h2>
220
+ <p class="text-gray-600 max-w-2xl mx-auto">Every EcoPlate purchase makes a difference beyond just reducing plastic waste.</p>
221
+ </div>
222
+
223
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
224
+ <div class="bg-white p-8 rounded-lg shadow-md text-center">
225
+ <div class="bg-primary bg-opacity-10 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
226
+ <i class="fas fa-recycle text-primary text-2xl"></i>
227
+ </div>
228
+ <h3 class="text-xl font-semibold text-dark mb-3">Waste Reduction</h3>
229
+ <p class="text-gray-600">We've diverted over 3,000 tons of rice husk from Lagos landfills, preventing 8,000 tons of CO2 emissions annually.</p>
230
+ </div>
231
+
232
+ <div class="bg-white p-8 rounded-lg shadow-md text-center">
233
+ <div class="bg-primary bg-opacity-10 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
234
+ <i class="fas fa-hand-holding-usd text-primary text-2xl"></i>
235
+ </div>
236
+ <h3 class="text-xl font-semibold text-dark mb-3">Farmer Income</h3>
237
+ <p class="text-gray-600">Our network of 200+ farmers earns supplemental income from selling crop residues that were previously worthless.</p>
238
+ </div>
239
+
240
+ <div class="bg-white p-8 rounded-lg shadow-md text-center">
241
+ <div class="bg-primary bg-opacity-10 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
242
+ <i class="fas fa-users text-primary text-2xl"></i>
243
+ </div>
244
+ <h3 class="text-xl font-semibold text-dark mb-3">Community Jobs</h3>
245
+ <p class="text-gray-600">Our manufacturing facilities employ 150+ workers from local communities with fair wages and benefits.</p>
246
+ </div>
247
+ </div>
248
+
249
+ <div class="mt-12 bg-white rounded-lg shadow-md overflow-hidden">
250
+ <div class="md:flex">
251
+ <div class="md:w-1/2">
252
+ <img src="https://images.unsplash.com/photo-1567181910476-8141768950e1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Nigerian farmer" class="h-full w-full object-cover">
253
+ </div>
254
+ <div class="md:w-1/2 p-8">
255
+ <h3 class="text-2xl font-bold text-dark mb-4">Farmer Success Stories</h3>
256
+ <p class="text-gray-600 mb-6">"Before EcoPlate, we used to burn our rice husks after harvest. Now they pay us for what was just waste. This extra income helps send my children to school."</p>
257
+ <div class="flex items-center">
258
+ <div class="flex-shrink-0">
259
+ <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="">
260
+ </div>
261
+ <div class="ml-3">
262
+ <p class="text-sm font-medium text-gray-900">Rajesh Kumar</p>
263
+ <p class="text-sm text-gray-500">Rice Farmer, Kebbi State</p>
264
+ </div>
265
+ </div>
266
+ </div>
267
+ </div>
268
+ </div>
269
+ </div>
270
+ </section>
271
+
272
+ <!-- Testimonials -->
273
+ <section class="py-20 bg-primary text-white">
274
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
275
+ <div class="text-center mb-12">
276
+ <h2 class="text-3xl font-bold mb-4">What Our Customers Say</h2>
277
+ <p class="max-w-2xl mx-auto opacity-90">Food vendors across the country are making the switch to EcoPlate</p>
278
+ </div>
279
+
280
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
281
+ <div class="bg-white bg-opacity-10 p-6 rounded-lg">
282
+ <div class="flex mb-4">
283
+ <i class="fas fa-star text-accent"></i>
284
+ <i class="fas fa-star text-accent"></i>
285
+ <i class="fas fa-star text-accent"></i>
286
+ <i class="fas fa-star text-accent"></i>
287
+ <i class="fas fa-star text-accent"></i>
288
+ </div>
289
+ <p class="mb-4 italic">"Our customers love that we use sustainable plates. It's become part of our brand identity and we've actually gained business because of it."</p>
290
+ <div class="flex items-center">
291
+ <img class="h-10 w-10 rounded-full mr-3" src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt="">
292
+ <div>
293
+ <p class="font-medium">Sarah Johnson</p>
294
+ <p class="text-sm opacity-80">Café Green, Mumbai</p>
295
+ </div>
296
+ </div>
297
+ </div>
298
+
299
+ <div class="bg-white bg-opacity-10 p-6 rounded-lg">
300
+ <div class="flex mb-4">
301
+ <i class="fas fa-star text-accent"></i>
302
+ <i class="fas fa-star text-accent"></i>
303
+ <i class="fas fa-star text-accent"></i>
304
+ <i class="fas fa-star text-accent"></i>
305
+ <i class="fas fa-star text-accent"></i>
306
+ </div>
307
+ <p class="mb-4 italic">"The quality surprised me - they hold up just as well as plastic but without the guilt. And the price is competitive too!"</p>
308
+ <div class="flex items-center">
309
+ <img class="h-10 w-10 rounded-full mr-3" src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="">
310
+ <div>
311
+ <p class="font-medium">Amit Patel</p>
312
+ <p class="text-sm opacity-80">Street Food Hub, Delhi</p>
313
+ </div>
314
+ </div>
315
+ </div>
316
+
317
+ <div class="bg-white bg-opacity-10 p-6 rounded-lg">
318
+ <div class="flex mb-4">
319
+ <i class="fas fa-star text-accent"></i>
320
+ <i class="fas fa-star text-accent"></i>
321
+ <i class="fas fa-star text-accent"></i>
322
+ <i class="fas fa-star text-accent"></i>
323
+ <i class="fas fa-star-half-alt text-accent"></i>
324
+ </div>
325
+ <p class="mb-4 italic">"Switching to EcoPlate helped us meet our sustainability goals while actually reducing our packaging costs. Win-win!"</p>
326
+ <div class="flex items-center">
327
+ <img class="h-10 w-10 rounded-full mr-3" src="https://images.unsplash.com/photo-1545167622-3a6ac756afa4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=712&q=80" alt="">
328
+ <div>
329
+ <p class="font-medium">Priya Sharma</p>
330
+ <p class="text-sm opacity-80">Corporate Catering Co.</p>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ </div>
336
+ </section>
337
+
338
+ <!-- Order Section -->
339
+ <section id="order" class="py-20">
340
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
341
+ <div class="bg-gradient-to-r from-primary to-secondary rounded-2xl shadow-xl overflow-hidden">
342
+ <div class="md:flex">
343
+ <div class="md:w-1/2 p-8 md:p-12 text-white">
344
+ <h2 class="text-3xl font-bold mb-4">Ready to Make the Switch?</h2>
345
+ <p class="mb-6 opacity-90">Join hundreds of food vendors who are reducing their environmental impact with our sustainable plates.</p>
346
+ <div class="space-y-4 mb-8">
347
+ <div class="flex items-center">
348
+ <div class="flex-shrink-0 bg-white bg-opacity-20 p-2 rounded-full mr-3">
349
+ <i class="fas fa-check"></i>
350
+ </div>
351
+ <p>Free samples for first-time customers</p>
352
+ </div>
353
+ <div class="flex items-center">
354
+ <div class="flex-shrink-0 bg-white bg-opacity-20 p-2 rounded-full mr-3">
355
+ <i class="fas fa-check"></i>
356
+ </div>
357
+ <p>Bulk discounts available</p>
358
+ </div>
359
+ <div class="flex items-center">
360
+ <div class="flex-shrink-0 bg-white bg-opacity-20 p-2 rounded-full mr-3">
361
+ <i class="fas fa-check"></i>
362
+ </div>
363
+ <p>Flexible delivery options</p>
364
+ </div>
365
+ </div>
366
+ <div class="flex items-center">
367
+ <i class="fas fa-phone-alt mr-2"></i>
368
+ <span class="font-semibold">+91 98765 43210</span>
369
+ </div>
370
+ </div>
371
+ <div class="md:w-1/2 bg-white p-8 md:p-12">
372
+ <h3 class="text-2xl font-bold text-dark mb-6">Request a Quote</h3>
373
+ <form>
374
+ <div class="mb-4">
375
+ <label for="name" class="block text-gray-700 text-sm font-medium mb-2">Name</label>
376
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
377
+ </div>
378
+ <div class="mb-4">
379
+ <label for="business" class="block text-gray-700 text-sm font-medium mb-2">Business Name</label>
380
+ <input type="text" id="business" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
381
+ </div>
382
+ <div class="mb-4">
383
+ <label for="email" class="block text-gray-700 text-sm font-medium mb-2">Email</label>
384
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
385
+ </div>
386
+ <div class="mb-4">
387
+ <label for="phone" class="block text-gray-700 text-sm font-medium mb-2">Phone</label>
388
+ <input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
389
+ </div>
390
+ <div class="mb-6">
391
+ <label for="message" class="block text-gray-700 text-sm font-medium mb-2">What products are you interested in?</label>
392
+ <textarea id="message" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"></textarea>
393
+ </div>
394
+ <button type="submit" class="w-full bg-dark hover:bg-primary text-white py-3 rounded-md font-medium transition-all">Get Pricing</button>
395
+ </form>
396
+ </div>
397
+ </div>
398
+ </div>
399
+ </div>
400
+ </section>
401
+
402
+ <!-- FAQ Section -->
403
+ <section class="py-20 bg-gray-50">
404
+ <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
405
+ <div class="text-center mb-16">
406
+ <h2 class="text-3xl font-bold text-dark mb-4">Frequently Asked Questions</h2>
407
+ <p class="text-gray-600">Everything you need to know about EcoPlate products</p>
408
+ </div>
409
+
410
+ <div class="space-y-6">
411
+ <div class="bg-white p-6 rounded-lg shadow-md">
412
+ <button class="faq-toggle w-full flex justify-between items-center text-left">
413
+ <h3 class="text-lg font-medium text-dark">Are EcoPlates really biodegradable?</h3>
414
+ <i class="fas fa-chevron-down text-primary transition-transform"></i>
415
+ </button>
416
+ <div class="faq-content mt-4 hidden">
417
+ <p class="text-gray-600">Yes! Our plates are made from 100% agricultural waste with no synthetic additives. They completely biodegrade in home compost within 90 days, leaving no toxic residues. We've had them certified by independent laboratories.</p>
418
+ </div>
419
+ </div>
420
+
421
+ <div class="bg-white p-6 rounded-lg shadow-md">
422
+ <button class="faq-toggle w-full flex justify-between items-center text-left">
423
+ <h3 class="text-lg font-medium text-dark">How do they compare in price to plastic plates?</h3>
424
+ <i class="fas fa-chevron-down text-primary transition-transform"></i>
425
+ </button>
426
+ <div class="faq-content mt-4 hidden">
427
+ <p class="text-gray-600">Our plates are competitively priced with mid-range plastic disposables, typically just 10-15% more expensive. However, bulk discounts can often make them price-competitive with plastic. Many customers find the branding and customer goodwill benefits outweigh the small price difference.</p>
428
+ </div>
429
+ </div>
430
+
431
+ <div class="bg-white p-6 rounded-lg shadow-md">
432
+ <button class="faq-toggle w-full flex justify-between items-center text-left">
433
+ <h3 class="text-lg font-medium text-dark">Can they handle hot, wet, or greasy foods?</h3>
434
+ <i class="fas fa-chevron-down text-primary transition-transform"></i>
435
+ </button>
436
+ <div class="faq-content mt-4 hidden">
437
+ <p class="text-gray-600">Absolutely! Our proprietary manufacturing process creates plates that are oil-resistant and can handle temperatures up to 100°C. They maintain structural integrity for up to 4 hours with wet foods - perfect for most takeaway needs.</p>
438
+ </div>
439
+ </div>
440
+
441
+ <div class="bg-white p-6 rounded-lg shadow-md">
442
+ <button class="faq-toggle w-full flex justify-between items-center text-left">
443
+ <h3 class="text-lg font-medium text-dark">What's the minimum order quantity?</h3>
444
+ <i class="fas fa-chevron-down text-primary transition-transform"></i>
445
+ </button>
446
+ <div class="faq-content mt-4 hidden">
447
+ <p class="text-gray-600">We offer sample packs starting at just 50 plates so you can test them. For regular orders, our minimum is 1,000 plates of a single type, but mixed cartons are available at 2,000 plates minimum. Larger orders qualify for volume discounts.</p>
448
+ </div>
449
+ </div>
450
+
451
+ <div class="bg-white p-6 rounded-lg shadow-md">
452
+ <button class="faq-toggle w-full flex justify-between items-center text-left">
453
+ <h3 class="text-lg font-medium text-dark">How long do they last in storage?</h3>
454
+ <i class="fas fa-chevron-down text-primary transition-transform"></i>
455
+ </button>
456
+ <div class="faq-content mt-4 hidden">
457
+ <p class="text-gray-600">When stored in a cool, dry place (not exposed to moisture), our plates have a shelf life of 18 months. They don't require any special storage conditions beyond what you'd use for paper or plastic disposables.</p>
458
+ </div>
459
+ </div>
460
+ </div>
461
+
462
+ <div class="text-center mt-12">
463
+ <p class="text-gray-600 mb-4">Still have questions?</p>
464
+ <a href="#contact" class="inline-block bg-primary hover:bg-dark text-white px-6 py-3 rounded-lg font-semibold transition-all">Contact Our Team</a>
465
+ </div>
466
+ </div>
467
+ </section>
468
+
469
+ <!-- Contact Section -->
470
+ <section id="contact" class="py-20">
471
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
472
+ <div class="text-center mb-16">
473
+ <h2 class="text-3xl font-bold text-dark mb-4">Get In Touch</h2>
474
+ <p class="text-gray-600 max-w-2xl mx-auto">We'd love to hear from you! Reach out for wholesale inquiries, partnerships, or any questions.</p>
475
+ </div>
476
+
477
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
478
+ <div>
479
+ <h3 class="text-xl font-semibold text-dark mb-6">Contact Information</h3>
480
+ <div class="space-y-6">
481
+ <div class="flex items-start">
482
+ <div class="flex-shrink-0 bg-primary bg-opacity-10 p-3 rounded-full">
483
+ <i class="fas fa-map-marker-alt text-primary"></i>
484
+ </div>
485
+ <div class="ml-4">
486
+ <h4 class="text-lg font-medium text-dark mb-1">Our Office</h4>
487
+ <p class="text-gray-600">14 Agric Road, Ikeja, Lagos, Nigeria</p>
488
+ </div>
489
+ </div>
490
+
491
+ <div class="flex items-start">
492
+ <div class="flex-shrink-0 bg-primary bg-opacity-10 p-3 rounded-full">
493
+ <i class="fas fa-phone-alt text-primary"></i>
494
+ </div>
495
+ <div class="ml-4">
496
+ <h4 class="text-lg font-medium text-dark mb-1">Phone</h4>
497
+ <p class="text-gray-600">+234 812 345 6789 (Sales)</p>
498
+ <p class="text-gray-600">+234 812 345 6790 (Support)</p>
499
+ </div>
500
+ </div>
501
+
502
+ <div class="flex items-start">
503
+ <div class="flex-shrink-0 bg-primary bg-opacity-10 p-3 rounded-full">
504
+ <i class="fas fa-envelope text-primary"></i>
505
+ </div>
506
+ <div class="ml-4">
507
+ <h4 class="text-lg font-medium text-dark mb-1">Email</h4>
508
+ <p class="text-gray-600">[email protected]</p>
509
+ <p class="text-gray-600">[email protected]</p>
510
+ </div>
511
+ </div>
512
+ </div>
513
+
514
+ <div class="mt-8">
515
+ <h4 class="text-lg font-medium text-dark mb-4">Follow Us</h4>
516
+ <div class="flex space-x-4">
517
+ <a href="#" class="bg-gray-100 hover:bg-primary hover:text-white w-10 h-10 rounded-full flex items-center justify-center text-gray-600 transition-all">
518
+ <i class="fab fa-facebook-f"></i>
519
+ </a>
520
+ <a href="#" class="bg-gray-100 hover:bg-primary hover:text-white w-10 h-10 rounded-full flex items-center justify-center text-gray-600 transition-all">
521
+ <i class="fab fa-twitter"></i>
522
+ </a>
523
+ <a href="#" class="bg-gray-100 hover:bg-primary hover:text-white w-10 h-10 rounded-full flex items-center justify-center text-gray-600 transition-all">
524
+ <i class="fab fa-instagram"></i>
525
+ </a>
526
+ <a href="#" class="bg-gray-100 hover:bg-primary hover:text-white w-10 h-10 rounded-full flex items-center justify-center text-gray-600 transition-all">
527
+ <i class="fab fa-linkedin-in"></i>
528
+ </a>
529
+ </div>
530
+ </div>
531
+ </div>
532
+
533
+ <div>
534
+ <h3 class="text-xl font-semibold text-dark mb-6">Send Us a Message</h3>
535
+ <form>
536
+ <div class="grid grid-cols-1 gap-6">
537
+ <div>
538
+ <label for="contact-name" class="block text-sm font-medium text-gray-700 mb-1">Name</label>
539
+ <input type="text" id="contact-name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
540
+ </div>
541
+ <div>
542
+ <label for="contact-email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
543
+ <input type="email" id="contact-email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
544
+ </div>
545
+ <div>
546
+ <label for="contact-subject" class="block text-sm font-medium text-gray-700 mb-1">Subject</label>
547
+ <input type="text" id="contact-subject" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
548
+ </div>
549
+ <div>
550
+ <label for="contact-message" class="block text-sm font-medium text-gray-700 mb-1">Message</label>
551
+ <textarea id="contact-message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"></textarea>
552
+ </div>
553
+ <div>
554
+ <button type="submit" class="bg-primary hover:bg-dark text-white px-6 py-3 rounded-md font-medium transition-all">Send Message</button>
555
+ </div>
556
+ </div>
557
+ </form>
558
+ </div>
559
+ </div>
560
+ </div>
561
+ </section>
562
+
563
+ <!-- Footer -->
564
+ <footer class="bg-dark text-white pt-12 pb-6">
565
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
566
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
567
+ <div>
568
+ <h3 class="text-xl font-bold mb-4">Eco<span class="text-primary">Plate</span></h3>
569
+ <p class="text-gray-300 mb-4">Sustainable tableware solutions for a plastic-free future.</p>
570
+ <div class="flex space-x-4">
571
+ <a href="#" class="text-gray-300 hover:text-primary transition-all"><i class="fab fa-facebook-f"></i></a>
572
+ <a href="#" class="text-gray-300 hover:text-primary transition-all"><i class="fab fa-twitter"></i></a>
573
+ <a href="#" class="text-gray-300 hover:text-primary transition-all"><i class="fab fa-instagram"></i></a>
574
+ <a href="#" class="text-gray-300 hover:text-primary transition-all"><i class="fab fa-linkedin-in"></i></a>
575
+ </div>
576
+ </div>
577
+
578
+ <div>
579
+ <h4 class="text-lg font-semibold mb-4">Products</h4>
580
+ <ul class="space-y-2">
581
+ <li><a href="#" class="text-gray-300 hover:text-primary transition-all">Round Plates</a></li>
582
+ <li><a href="#" class="text-gray-300 hover:text-primary transition-all">Square Plates</a></li>
583
+ <li><a href="#" class="text-gray-300 hover:text-primary transition-all">Combo Packs</a></li>
584
+ <li><a href="#" class="text-gray-300 hover:text-primary transition-all">Custom Branding</a></li>
585
+ </ul>
586
+ </div>
587
+
588
+ <div>
589
+ <h4 class="text-lg font-semibold mb-4">Company</h4>
590
+ <ul class="space-y-2">
591
+ <li><a href="#" class="text-gray-300 hover:text-primary transition-all">About Us</a></li>
592
+ <li><a href="#" class="text-gray-300 hover:text-primary transition-all">Our Impact</a></li>
593
+ <li><a href="#" class="text-gray-300 hover:text-primary transition-all">Blog</a></li>
594
+ <li><a href="#" class="text-gray-300 hover:text-primary transition-all">Careers</a></li>
595
+ </ul>
596
+ </div>
597
+
598
+ <div>
599
+ <h4 class="text-lg font-semibold mb-4">Support</h4>
600
+ <ul class="space-y-2">
601
+ <li><a href="#" class="text-gray-300 hover:text-primary transition-all">FAQ</a></li>
602
+ <li><a href="#" class="text-gray-300 hover:text-primary transition-all">Shipping Policy</a></li>
603
+ <li><a href="#" class="text-gray-300 hover:text-primary transition-all">Returns</a></li>
604
+ <li><a href="#" class="text-gray-300 hover:text-primary transition-all">Contact Us</a></li>
605
+ </ul>
606
+ </div>
607
+ </div>
608
+
609
+ <div class="border-t border-gray-700 pt-6 flex flex-col md:flex-row justify-between items-center">
610
+ <p class="text-gray-300 mb-4 md:mb-0">© 2023 EcoPlate. All rights reserved.</p>
611
+ <div class="flex space-x-6">
612
+ <a href="#" class="text-gray-300 hover:text-primary transition-all">Privacy Policy</a>
613
+ <a href="#" class="text-gray-300 hover:text-primary transition-all">Terms of Service</a>
614
+ <a href="#" class="text-gray-300 hover:text-primary transition-all">Sitemap</a>
615
+ </div>
616
+ </div>
617
+ </div>
618
+ </footer>
619
+
620
+ <script>
621
+ // Mobile menu toggle
622
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
623
+ const menu = document.getElementById('mobile-menu');
624
+ menu.classList.toggle('hidden');
625
+ });
626
+
627
+ // FAQ toggle functionality
628
+ document.querySelectorAll('.faq-toggle').forEach(button => {
629
+ button.addEventListener('click', () => {
630
+ const content = button.nextElementSibling;
631
+ const icon = button.querySelector('i');
632
+
633
+ content.classList.toggle('hidden');
634
+ icon.classList.toggle('rotate-180');
635
+ });
636
+ });
637
+
638
+ // Smooth scrolling for anchor links
639
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
640
+ anchor.addEventListener('click', function (e) {
641
+ e.preventDefault();
642
+
643
+ const targetId = this.getAttribute('href');
644
+ const targetElement = document.querySelector(targetId);
645
+
646
+ if (targetElement) {
647
+ targetElement.scrollIntoView({
648
+ behavior: 'smooth'
649
+ });
650
+
651
+ // Close mobile menu if open
652
+ const mobileMenu = document.getElementById('mobile-menu');
653
+ if (!mobileMenu.classList.contains('hidden')) {
654
+ mobileMenu.classList.add('hidden');
655
+ }
656
+ }
657
+ });
658
+ });
659
+ </script>
660
+ <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=Onyeka1187/agripack" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
661
+ </html>