Hugging Face's logo

Spaces:
likesimo75
/
garden
Running

App Files Community
likesimo75 commited on
Commit
7f5e092
·
verified ·
1 Parent(s): 254a927

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +587 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Garden
3
- emoji: 👁
4
- colorFrom: gray
5
- colorTo: pink
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: garden
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: purple
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,587 @@
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>GreenThumb | Your Gardening Companion</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
+ /* Custom CSS for animations and effects */
11
+ .plant-card:hover {
12
+ transform: translateY(-5px);
13
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
14
+ }
15
+
16
+ .hero-bg {
17
+ background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1585320806297-9794b3e4eeae?ixlib=rb-4.0.3');
18
+ background-size: cover;
19
+ background-position: center;
20
+ }
21
+
22
+ .seasonal-banner {
23
+ background: linear-gradient(135deg, #84cc16 0%, #22c55e 100%);
24
+ }
25
+
26
+ @keyframes float {
27
+ 0% { transform: translateY(0px); }
28
+ 50% { transform: translateY(-10px); }
29
+ 100% { transform: translateY(0px); }
30
+ }
31
+
32
+ .floating-icon {
33
+ animation: float 3s ease-in-out infinite;
34
+ }
35
+
36
+ .tooltip {
37
+ position: relative;
38
+ display: inline-block;
39
+ }
40
+
41
+ .tooltip .tooltiptext {
42
+ visibility: hidden;
43
+ width: 120px;
44
+ background-color: #333;
45
+ color: #fff;
46
+ text-align: center;
47
+ border-radius: 6px;
48
+ padding: 5px;
49
+ position: absolute;
50
+ z-index: 1;
51
+ bottom: 125%;
52
+ left: 50%;
53
+ margin-left: -60px;
54
+ opacity: 0;
55
+ transition: opacity 0.3s;
56
+ }
57
+
58
+ .tooltip:hover .tooltiptext {
59
+ visibility: visible;
60
+ opacity: 1;
61
+ }
62
+ </style>
63
+ </head>
64
+ <body class="font-sans bg-green-50">
65
+ <!-- Header/Navigation -->
66
+ <header class="bg-white shadow-md sticky top-0 z-50">
67
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
68
+ <div class="flex items-center space-x-2">
69
+ <i class="fas fa-leaf text-green-600 text-2xl"></i>
70
+ <h1 class="text-xl font-bold text-green-800">GreenThumb</h1>
71
+ </div>
72
+ <nav class="hidden md:flex space-x-8">
73
+ <a href="#" class="text-green-700 hover:text-green-500 font-medium">Home</a>
74
+ <a href="#plants" class="text-green-700 hover:text-green-500 font-medium">Plants</a>
75
+ <a href="#guides" class="text-green-700 hover:text-green-500 font-medium">Guides</a>
76
+ <a href="#tools" class="text-green-700 hover:text-green-500 font-medium">Tools</a>
77
+ <a href="#community" class="text-green-700 hover:text-green-500 font-medium">Community</a>
78
+ </nav>
79
+ <div class="flex items-center space-x-4">
80
+ <button class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-full transition duration-300">
81
+ Sign In
82
+ </button>
83
+ <button class="md:hidden text-green-700">
84
+ <i class="fas fa-bars text-2xl"></i>
85
+ </button>
86
+ </div>
87
+ </div>
88
+ </header>
89
+
90
+ <!-- Hero Section -->
91
+ <section class="hero-bg text-white py-20 md:py-32">
92
+ <div class="container mx-auto px-4 text-center">
93
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">Grow Your Perfect Garden</h1>
94
+ <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Discover expert tips, plant care guides, and connect with fellow gardening enthusiasts.</p>
95
+ <div class="flex flex-col md:flex-row justify-center gap-4">
96
+ <button class="bg-green-600 hover:bg-green-700 text-white px-8 py-3 rounded-full text-lg font-medium transition duration-300">
97
+ Get Started
98
+ </button>
99
+ <button class="bg-white hover:bg-gray-100 text-green-700 px-8 py-3 rounded-full text-lg font-medium transition duration-300">
100
+ Learn More
101
+ </button>
102
+ </div>
103
+ </div>
104
+ </section>
105
+
106
+ <!-- Seasonal Banner -->
107
+ <section class="seasonal-banner text-white py-4">
108
+ <div class="container mx-auto px-4 text-center">
109
+ <p class="text-lg font-medium"><i class="fas fa-seedling mr-2"></i> Spring Planting Guide Now Available! <a href="#" class="underline ml-2">Check it out</a></p>
110
+ </div>
111
+ </section>
112
+
113
+ <!-- Featured Plants -->
114
+ <section id="plants" class="py-16 bg-white">
115
+ <div class="container mx-auto px-4">
116
+ <div class="text-center mb-12">
117
+ <h2 class="text-3xl font-bold text-green-800 mb-4">Featured Plants</h2>
118
+ <p class="text-gray-600 max-w-2xl mx-auto">Discover our curated selection of plants perfect for your garden this season</p>
119
+ </div>
120
+
121
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
122
+ <!-- Plant Card 1 -->
123
+ <div class="plant-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
124
+ <div class="relative">
125
+ <img src="https://images.unsplash.com/photo-1598971861713-54ad16a7e72d?ixlib=rb-4.0.3" alt="Lavender" class="w-full h-64 object-cover">
126
+ <span class="absolute top-4 right-4 bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full">Easy Care</span>
127
+ </div>
128
+ <div class="p-6">
129
+ <div class="flex justify-between items-start mb-2">
130
+ <h3 class="text-xl font-bold text-gray-800">Lavender</h3>
131
+ <span class="text-green-600 font-bold">$12.99</span>
132
+ </div>
133
+ <p class="text-gray-600 mb-4">Fragrant purple flowers perfect for borders and containers.</p>
134
+ <div class="flex items-center justify-between">
135
+ <div class="flex items-center space-x-1 text-yellow-400">
136
+ <i class="fas fa-sun"></i>
137
+ <span class="text-gray-600 text-sm">Full Sun</span>
138
+ </div>
139
+ <button class="text-green-600 hover:text-green-800">
140
+ <i class="fas fa-heart"></i>
141
+ </button>
142
+ </div>
143
+ </div>
144
+ </div>
145
+
146
+ <!-- Plant Card 2 -->
147
+ <div class="plant-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
148
+ <div class="relative">
149
+ <img src="https://images.unsplash.com/photo-1597848212624-a19eb35e2651?ixlib=rb-4.0.3" alt="Snake Plant" class="w-full h-64 object-cover">
150
+ <span class="absolute top-4 right-4 bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full">Low Light</span>
151
+ </div>
152
+ <div class="p-6">
153
+ <div class="flex justify-between items-start mb-2">
154
+ <h3 class="text-xl font-bold text-gray-800">Snake Plant</h3>
155
+ <span class="text-green-600 font-bold">$18.99</span>
156
+ </div>
157
+ <p class="text-gray-600 mb-4">Air-purifying and nearly indestructible houseplant.</p>
158
+ <div class="flex items-center justify-between">
159
+ <div class="flex items-center space-x-1 text-gray-400">
160
+ <i class="fas fa-cloud"></i>
161
+ <span class="text-gray-600 text-sm">Low Light</span>
162
+ </div>
163
+ <button class="text-green-600 hover:text-green-800">
164
+ <i class="fas fa-heart"></i>
165
+ </button>
166
+ </div>
167
+ </div>
168
+ </div>
169
+
170
+ <!-- Plant Card 3 -->
171
+ <div class="plant-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
172
+ <div class="relative">
173
+ <img src="https://images.unsplash.com/photo-1518977676601-b53f467aba1a?ixlib=rb-4.0.3" alt="Tomato Plant" class="w-full h-64 object-cover">
174
+ <span class="absolute top-4 right-4 bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full">Edible</span>
175
+ </div>
176
+ <div class="p-6">
177
+ <div class="flex justify-between items-start mb-2">
178
+ <h3 class="text-xl font-bold text-gray-800">Cherry Tomato</h3>
179
+ <span class="text-green-600 font-bold">$9.99</span>
180
+ </div>
181
+ <p class="text-gray-600 mb-4">Sweet, bite-sized tomatoes perfect for home gardens.</p>
182
+ <div class="flex items-center justify-between">
183
+ <div class="flex items-center space-x-1 text-yellow-400">
184
+ <i class="fas fa-sun"></i>
185
+ <span class="text-gray-600 text-sm">Full Sun</span>
186
+ </div>
187
+ <button class="text-green-600 hover:text-green-800">
188
+ <i class="fas fa-heart"></i>
189
+ </button>
190
+ </div>
191
+ </div>
192
+ </div>
193
+
194
+ <!-- Plant Card 4 -->
195
+ <div class="plant-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
196
+ <div class="relative">
197
+ <img src="https://images.unsplash.com/photo-1593483316242-efda5721104c?ixlib=rb-4.0.3" alt="Monstera" class="w-full h-64 object-cover">
198
+ <span class="absolute top-4 right-4 bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full">Tropical</span>
199
+ </div>
200
+ <div class="p-6">
201
+ <div class="flex justify-between items-start mb-2">
202
+ <h3 class="text-xl font-bold text-gray-800">Monstera Deliciosa</h3>
203
+ <span class="text-green-600 font-bold">$24.99</span>
204
+ </div>
205
+ <p class="text-gray-600 mb-4">Iconic split-leaf plant that makes a statement.</p>
206
+ <div class="flex items-center justify-between">
207
+ <div class="flex items-center space-x-1 text-yellow-300">
208
+ <i class="fas fa-cloud-sun"></i>
209
+ <span class="text-gray-600 text-sm">Partial Sun</span>
210
+ </div>
211
+ <button class="text-green-600 hover:text-green-800">
212
+ <i class="fas fa-heart"></i>
213
+ </button>
214
+ </div>
215
+ </div>
216
+ </div>
217
+ </div>
218
+
219
+ <div class="text-center mt-12">
220
+ <button class="bg-green-600 hover:bg-green-700 text-white px-8 py-3 rounded-full text-lg font-medium transition duration-300">
221
+ View All Plants
222
+ </button>
223
+ </div>
224
+ </div>
225
+ </section>
226
+
227
+ <!-- Gardening Guides -->
228
+ <section id="guides" class="py-16 bg-green-50">
229
+ <div class="container mx-auto px-4">
230
+ <div class="text-center mb-12">
231
+ <h2 class="text-3xl font-bold text-green-800 mb-4">Gardening Guides</h2>
232
+ <p class="text-gray-600 max-w-2xl mx-auto">Learn from our comprehensive guides tailored for all skill levels</p>
233
+ </div>
234
+
235
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
236
+ <!-- Guide Card 1 -->
237
+ <div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-300 hover:shadow-lg">
238
+ <img src="https://images.unsplash.com/photo-1605000797499-95a51c5269ae?ixlib=rb-4.0.3" alt="Vegetable Gardening" class="w-full h-48 object-cover">
239
+ <div class="p-6">
240
+ <div class="flex items-center mb-3">
241
+ <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full mr-2">Beginner</span>
242
+ <span class="text-gray-500 text-sm"><i class="far fa-clock mr-1"></i> 10 min read</span>
243
+ </div>
244
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Starting a Vegetable Garden</h3>
245
+ <p class="text-gray-600 mb-4">Everything you need to know to grow your own food, from soil prep to harvest.</p>
246
+ <div class="flex items-center">
247
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author" class="w-8 h-8 rounded-full mr-2">
248
+ <span class="text-sm text-gray-600">By Sarah Johnson</span>
249
+ </div>
250
+ </div>
251
+ </div>
252
+
253
+ <!-- Guide Card 2 -->
254
+ <div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-300 hover:shadow-lg">
255
+ <img src="https://images.unsplash.com/photo-1560713781-d1c8b1ade0e2?ixlib=rb-4.0.3" alt="Indoor Plants" class="w-full h-48 object-cover">
256
+ <div class="p-6">
257
+ <div class="flex items-center mb-3">
258
+ <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full mr-2">Intermediate</span>
259
+ <span class="text-gray-500 text-sm"><i class="far fa-clock mr-1"></i> 15 min read</span>
260
+ </div>
261
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Indoor Plant Care Guide</h3>
262
+ <p class="text-gray-600 mb-4">Keep your houseplants thriving with these essential care tips and troubleshooting advice.</p>
263
+ <div class="flex items-center">
264
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author" class="w-8 h-8 rounded-full mr-2">
265
+ <span class="text-sm text-gray-600">By Michael Chen</span>
266
+ </div>
267
+ </div>
268
+ </div>
269
+
270
+ <!-- Guide Card 3 -->
271
+ <div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-300 hover:shadow-lg">
272
+ <img src="https://images.unsplash.com/photo-1523348837708-15d4a09cfac2?ixlib=rb-4.0.3" alt="Composting" class="w-full h-48 object-cover">
273
+ <div class="p-6">
274
+ <div class="flex items-center mb-3">
275
+ <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full mr-2">Advanced</span>
276
+ <span class="text-gray-500 text-sm"><i class="far fa-clock mr-1"></i> 20 min read</span>
277
+ </div>
278
+ <h3 class="text-xl font-bold text-gray-800 mb-2">The Complete Guide to Composting</h3>
279
+ <p class="text-gray-600 mb-4">Turn your kitchen scraps into garden gold with our comprehensive composting guide.</p>
280
+ <div class="flex items-center">
281
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Author" class="w-8 h-8 rounded-full mr-2">
282
+ <span class="text-sm text-gray-600">By Emily Rodriguez</span>
283
+ </div>
284
+ </div>
285
+ </div>
286
+ </div>
287
+ </div>
288
+ </section>
289
+
290
+ <!-- Tools & Equipment -->
291
+ <section id="tools" class="py-16 bg-white">
292
+ <div class="container mx-auto px-4">
293
+ <div class="text-center mb-12">
294
+ <h2 class="text-3xl font-bold text-green-800 mb-4">Essential Gardening Tools</h2>
295
+ <p class="text-gray-600 max-w-2xl mx-auto">Quality tools make gardening easier and more enjoyable</p>
296
+ </div>
297
+
298
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
299
+ <!-- Tool 1 -->
300
+ <div class="bg-green-50 rounded-lg p-6 text-center">
301
+ <div class="floating-icon mb-4">
302
+ <i class="fas fa-trowel text-4xl text-green-600"></i>
303
+ </div>
304
+ <h3 class="font-bold text-lg text-gray-800 mb-2">Hand Trowel</h3>
305
+ <p class="text-gray-600 text-sm">Perfect for planting, transplanting and potting</p>
306
+ </div>
307
+
308
+ <!-- Tool 2 -->
309
+ <div class="bg-green-50 rounded-lg p-6 text-center">
310
+ <div class="floating-icon mb-4">
311
+ <i class="fas fa-cut text-4xl text-green-600"></i>
312
+ </div>
313
+ <h3 class="font-bold text-lg text-gray-800 mb-2">Pruners</h3>
314
+ <p class="text-gray-600 text-sm">Keep your plants healthy with clean cuts</p>
315
+ </div>
316
+
317
+ <!-- Tool 3 -->
318
+ <div class="bg-green-50 rounded-lg p-6 text-center">
319
+ <div class="floating-icon mb-4">
320
+ <i class="fas fa-faucet text-4xl text-green-600"></i>
321
+ </div>
322
+ <h3 class="font-bold text-lg text-gray-800 mb-2">Watering Can</h3>
323
+ <p class="text-gray-600 text-sm">Gentle watering for delicate plants</p>
324
+ </div>
325
+
326
+ <!-- Tool 4 -->
327
+ <div class="bg-green-50 rounded-lg p-6 text-center">
328
+ <div class="floating-icon mb-4">
329
+ <i class="fas fa-gloves text-4xl text-green-600"></i>
330
+ </div>
331
+ <h3 class="font-bold text-lg text-gray-800 mb-2">Gardening Gloves</h3>
332
+ <p class="text-gray-600 text-sm">Protect your hands while you work</p>
333
+ </div>
334
+ </div>
335
+
336
+ <div class="mt-12 bg-green-100 rounded-xl p-8 md:p-12 flex flex-col md:flex-row items-center">
337
+ <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
338
+ <h3 class="text-2xl font-bold text-green-800 mb-4">Need Help Choosing Tools?</h3>
339
+ <p class="text-gray-700 mb-6">Our expert team can help you select the perfect tools for your gardening needs and budget.</p>
340
+ <button class="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-full font-medium transition duration-300">
341
+ Chat With an Expert
342
+ </button>
343
+ </div>
344
+ <div class="md:w-1/2">
345
+ <img src="https://images.unsplash.com/photo-1582373630419-0fe7ce7e0e6f?ixlib=rb-4.0.3" alt="Gardening Tools" class="w-full rounded-lg shadow-md">
346
+ </div>
347
+ </div>
348
+ </div>
349
+ </section>
350
+
351
+ <!-- Community Section -->
352
+ <section id="community" class="py-16 bg-green-50">
353
+ <div class="container mx-auto px-4">
354
+ <div class="text-center mb-12">
355
+ <h2 class="text-3xl font-bold text-green-800 mb-4">Join Our Gardening Community</h2>
356
+ <p class="text-gray-600 max-w-2xl mx-auto">Connect with fellow plant lovers, share tips, and get inspired</p>
357
+ </div>
358
+
359
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
360
+ <!-- Community Feature 1 -->
361
+ <div class="bg-white p-6 rounded-xl shadow-md text-center">
362
+ <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
363
+ <i class="fas fa-comments text-green-600 text-2xl"></i>
364
+ </div>
365
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Discussion Forums</h3>
366
+ <p class="text-gray-600">Ask questions and share your gardening experiences with our active community.</p>
367
+ </div>
368
+
369
+ <!-- Community Feature 2 -->
370
+ <div class="bg-white p-6 rounded-xl shadow-md text-center">
371
+ <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
372
+ <i class="fas fa-calendar-check text-green-600 text-2xl"></i>
373
+ </div>
374
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Local Events</h3>
375
+ <p class="text-gray-600">Find plant swaps, workshops, and garden tours in your area.</p>
376
+ </div>
377
+
378
+ <!-- Community Feature 3 -->
379
+ <div class="bg-white p-6 rounded-xl shadow-md text-center">
380
+ <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
381
+ <i class="fas fa-trophy text-green-600 text-2xl"></i>
382
+ </div>
383
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Monthly Challenges</h3>
384
+ <p class="text-gray-600">Participate in fun gardening challenges and win prizes.</p>
385
+ </div>
386
+ </div>
387
+
388
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
389
+ <div class="md:flex">
390
+ <div class="md:w-1/2 p-8 md:p-12">
391
+ <h3 class="text-2xl font-bold text-green-800 mb-4">Ready to Grow With Us?</h3>
392
+ <p class="text-gray-600 mb-6">Join thousands of gardeners sharing knowledge, inspiration, and their love for plants.</p>
393
+
394
+ <form class="space-y-4">
395
+ <div>
396
+ <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name</label>
397
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500">
398
+ </div>
399
+ <div>
400
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
401
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500">
402
+ </div>
403
+ <div>
404
+ <label for="experience" class="block text-sm font-medium text-gray-700 mb-1">Gardening Experience</label>
405
+ <select id="experience" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500">
406
+ <option>Beginner</option>
407
+ <option>Intermediate</option>
408
+ <option>Advanced</option>
409
+ </select>
410
+ </div>
411
+ <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-lg font-medium transition duration-300">
412
+ Join Community
413
+ </button>
414
+ </form>
415
+ </div>
416
+ <div class="md:w-1/2 bg-green-100 flex items-center justify-center p-8">
417
+ <div class="relative">
418
+ <img src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?ixlib=rb-4.0.3" alt="Community" class="rounded-lg shadow-md w-full max-w-md">
419
+ <div class="absolute -bottom-4 -right-4 bg-white p-4 rounded-lg shadow-md">
420
+ <div class="flex items-center">
421
+ <div class="flex -space-x-2">
422
+ <img src="https://randomuser.me/api/portraits/women/12.jpg" class="w-10 h-10 rounded-full border-2 border-white">
423
+ <img src="https://randomuser.me/api/portraits/men/24.jpg" class="w-10 h-10 rounded-full border-2 border-white">
424
+ <img src="https://randomuser.me/api/portraits/women/33.jpg" class="w-10 h-10 rounded-full border-2 border-white">
425
+ </div>
426
+ <div class="ml-3">
427
+ <p class="text-sm font-medium text-gray-800">1,200+ Members</p>
428
+ <div class="flex items-center">
429
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
430
+ <span class="text-xs text-gray-600">4.9 (120 reviews)</span>
431
+ </div>
432
+ </div>
433
+ </div>
434
+ </div>
435
+ </div>
436
+ </div>
437
+ </div>
438
+ </div>
439
+ </div>
440
+ </section>
441
+
442
+ <!-- Newsletter -->
443
+ <section class="py-16 bg-green-600 text-white">
444
+ <div class="container mx-auto px-4 text-center">
445
+ <div class="max-w-2xl mx-auto">
446
+ <h2 class="text-3xl font-bold mb-4">Get Gardening Tips Delivered</h2>
447
+ <p class="text-lg mb-8">Subscribe to our newsletter for seasonal advice, exclusive content, and special offers.</p>
448
+
449
+ <form class="flex flex-col sm:flex-row gap-2 max-w-lg mx-auto">
450
+ <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-lg text-gray-800 focus:outline-none focus:ring-2 focus:ring-green-300">
451
+ <button type="submit" class="bg-green-800 hover:bg-green-900 px-6 py-3 rounded-lg font-medium transition duration-300">
452
+ Subscribe
453
+ </button>
454
+ </form>
455
+
456
+ <p class="text-sm mt-4 text-green-100">We respect your privacy. Unsubscribe at any time.</p>
457
+ </div>
458
+ </div>
459
+ </section>
460
+
461
+ <!-- Footer -->
462
+ <footer class="bg-green-900 text-white pt-12 pb-6">
463
+ <div class="container mx-auto px-4">
464
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
465
+ <div>
466
+ <div class="flex items-center space-x-2 mb-4">
467
+ <i class="fas fa-leaf text-2xl text-green-300"></i>
468
+ <h3 class="text-xl font-bold">GreenThumb</h3>
469
+ </div>
470
+ <p class="text-green-200 mb-4">Helping you grow beautiful, healthy gardens since 2010.</p>
471
+ <div class="flex space-x-4">
472
+ <a href="#" class="text-green-200 hover:text-white"><i class="fab fa-facebook-f"></i></a>
473
+ <a href="#" class="text-green-200 hover:text-white"><i class="fab fa-instagram"></i></a>
474
+ <a href="#" class="text-green-200 hover:text-white"><i class="fab fa-pinterest-p"></i></a>
475
+ <a href="#" class="text-green-200 hover:text-white"><i class="fab fa-youtube"></i></a>
476
+ </div>
477
+ </div>
478
+
479
+ <div>
480
+ <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
481
+ <ul class="space-y-2">
482
+ <li><a href="#" class="text-green-200 hover:text-white">Home</a></li>
483
+ <li><a href="#plants" class="text-green-200 hover:text-white">Plants</a></li>
484
+ <li><a href="#guides" class="text-green-200 hover:text-white">Guides</a></li>
485
+ <li><a href="#tools" class="text-green-200 hover:text-white">Tools</a></li>
486
+ <li><a href="#community" class="text-green-200 hover:text-white">Community</a></li>
487
+ </ul>
488
+ </div>
489
+
490
+ <div>
491
+ <h4 class="text-lg font-semibold mb-4">Support</h4>
492
+ <ul class="space-y-2">
493
+ <li><a href="#" class="text-green-200 hover:text-white">Contact Us</a></li>
494
+ <li><a href="#" class="text-green-200 hover:text-white">FAQs</a></li>
495
+ <li><a href="#" class="text-green-200 hover:text-white">Shipping Policy</a></li>
496
+ <li><a href="#" class="text-green-200 hover:text-white">Returns & Refunds</a></li>
497
+ <li><a href="#" class="text-green-200 hover:text-white">Privacy Policy</a></li>
498
+ </ul>
499
+ </div>
500
+
501
+ <div>
502
+ <h4 class="text-lg font-semibold mb-4">Contact</h4>
503
+ <address class="not-italic text-green-200">
504
+ <p class="mb-2">123 Garden Lane</p>
505
+ <p class="mb-2">Greenville, CA 90210</p>
506
+ <p class="mb-2">Phone: (555) 123-4567</p>
507
+ <p>Email: [email protected]</p>
508
+ </address>
509
+ </div>
510
+ </div>
511
+
512
+ <div class="pt-6 border-t border-green-800 text-center text-green-300 text-sm">
513
+ <p>&copy; 2023 GreenThumb Gardening. All rights reserved.</p>
514
+ </div>
515
+ </div>
516
+ </footer>
517
+
518
+ <!-- Back to Top Button -->
519
+ <button id="backToTop" class="fixed bottom-6 right-6 bg-green-600 text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center opacity-0 invisible transition-all duration-300">
520
+ <i class="fas fa-arrow-up"></i>
521
+ </button>
522
+
523
+ <script>
524
+ // Back to Top Button
525
+ const backToTopButton = document.getElementById('backToTop');
526
+
527
+ window.addEventListener('scroll', () => {
528
+ if (window.pageYOffset > 300) {
529
+ backToTopButton.classList.remove('opacity-0', 'invisible');
530
+ backToTopButton.classList.add('opacity-100', 'visible');
531
+ } else {
532
+ backToTopButton.classList.remove('opacity-100', 'visible');
533
+ backToTopButton.classList.add('opacity-0', 'invisible');
534
+ }
535
+ });
536
+
537
+ backToTopButton.addEventListener('click', () => {
538
+ window.scrollTo({
539
+ top: 0,
540
+ behavior: 'smooth'
541
+ });
542
+ });
543
+
544
+ // Mobile Menu Toggle (would need more implementation)
545
+ const mobileMenuButton = document.querySelector('button[aria-label="Mobile menu"]');
546
+ // This would need additional HTML and CSS for the mobile menu
547
+
548
+ // Plant Card Favorite Button
549
+ document.querySelectorAll('.plant-card button').forEach(button => {
550
+ button.addEventListener('click', (e) => {
551
+ e.stopPropagation();
552
+ const icon = button.querySelector('i');
553
+ if (icon.classList.contains('far')) {
554
+ icon.classList.remove('far');
555
+ icon.classList.add('fas', 'text-red-500');
556
+ } else {
557
+ icon.classList.remove('fas', 'text-red-500');
558
+ icon.classList.add('far');
559
+ }
560
+ });
561
+ });
562
+
563
+ // Form Submission
564
+ document.querySelectorAll('form').forEach(form => {
565
+ form.addEventListener('submit', (e) => {
566
+ e.preventDefault();
567
+ // In a real implementation, you would handle form submission here
568
+ alert('Thank you for your submission!');
569
+ });
570
+ });
571
+
572
+ // Tooltips
573
+ document.querySelectorAll('.tooltip').forEach(element => {
574
+ element.addEventListener('mouseenter', () => {
575
+ const tooltip = element.querySelector('.tooltiptext');
576
+ tooltip.style.visibility = 'visible';
577
+ tooltip.style.opacity = '1';
578
+ });
579
+ element.addEventListener('mouseleave', () => {
580
+ const tooltip = element.querySelector('.tooltiptext');
581
+ tooltip.style.visibility = 'hidden';
582
+ tooltip.style.opacity = '0';
583
+ });
584
+ });
585
+ </script>
586
+ <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=likesimo75/garden" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
587
+ </html>