Hugging Face's logo

Spaces:
Syled
/
undefined
Running

App Files Community
Syled commited on
Commit
c23fa11
·
verified ·
1 Parent(s): f7627f2

now, create the programs page

Browse files
Files changed (3) hide show
  1. README.md +9 -5
  2. index.html +378 -18
  3. programs.html +410 -0
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: 👀
4
- colorFrom: purple
5
- colorTo: indigo
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: undefined
3
+ colorFrom: gray
4
+ colorTo: pink
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
index.html CHANGED
@@ -1,19 +1,379 @@
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>AgriGrow Nation - Modern Agriculture Solutions</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script>
9
+ tailwind.config = {
10
+ theme: {
11
+ extend: {
12
+ colors: {
13
+ primary: {
14
+ 50: '#f0fdf4',
15
+ 100: '#dcfce7',
16
+ 200: '#bbf7d0',
17
+ 300: '#86efac',
18
+ 400: '#4ade80',
19
+ 500: '#22c55e',
20
+ 600: '#16a34a',
21
+ 700: '#15803d',
22
+ 800: '#166534',
23
+ 900: '#14532d',
24
+ },
25
+ secondary: {
26
+ 50: '#fefce8',
27
+ 100: '#fef9c3',
28
+ 200: '#fef08a',
29
+ 300: '#fde047',
30
+ 400: '#facc15',
31
+ 500: '#eab308',
32
+ 600: '#ca8a04',
33
+ 700: '#a16207',
34
+ 800: '#854d0e',
35
+ 900: '#713f12',
36
+ }
37
+ }
38
+ }
39
+ }
40
+ }
41
+ </script>
42
+ <script src="https://unpkg.com/feather-icons"></script>
43
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
44
+ <style>
45
+ .hero-gradient {
46
+ background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(250, 204, 21, 0.05) 100%);
47
+ }
48
+ .feature-card:hover {
49
+ transform: translateY(-5px);
50
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
51
+ }
52
+ </style>
53
+ </head>
54
+ <body class="font-['Poppins'] bg-white text-gray-800">
55
+ <!-- Navigation -->
56
+ <nav class="bg-white shadow-sm sticky top-0 z-50">
57
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
58
+ <div class="flex justify-between h-16">
59
+ <div class="flex items-center">
60
+ <div class="flex-shrink-0 flex items-center">
61
+ <img class="h-8 w-auto" src="http://static.photos/agriculture/200x200/5" alt="AgriGrow Logo">
62
+ <span class="ml-2 text-xl font-bold text-primary-600">AgriGrow Nation</span>
63
+ </div>
64
+ </div>
65
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
66
+ <a href="#" class="text-primary-600 border-b-2 border-primary-500 px-3 py-2 text-sm font-medium">Home</a>
67
+ <a href="programs.html" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium">Programs</a>
68
+ <a href="#" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium">Resources</a>
69
+ <a href="#" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium">About</a>
70
+ <a href="#" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium">Contact</a>
71
+ </div>
72
+ <div class="flex items-center">
73
+ <a href="#" class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-md text-sm font-medium">Farmer Portal</a>
74
+ <button class="md:hidden ml-4">
75
+ <i data-feather="menu"></i>
76
+ </button>
77
+ </div>
78
+ </div>
79
+ </div>
80
+ </nav>
81
+
82
+ <!-- Hero Section -->
83
+ <section class="hero-gradient">
84
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-28">
85
+ <div class="md:flex md:items-center md:justify-between">
86
+ <div class="md:w-1/2 mb-10 md:mb-0">
87
+ <h1 class="text-4xl md:text-5xl font-bold leading-tight text-gray-900 mb-4">
88
+ Growing <span class="text-primary-600">Sustainable</span> Agriculture
89
+ </h1>
90
+ <p class="text-lg text-gray-600 mb-8 max-w-lg">
91
+ Empowering farmers with innovative solutions, financial support, and cutting-edge technology to cultivate a greener future for our nation.
92
+ </p>
93
+ <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
94
+ <a href="#" class="bg-primary-500 hover:bg-primary-600 text-white px-6 py-3 rounded-md text-center font-medium">
95
+ Explore Programs
96
+ </a>
97
+ <a href="#" class="border border-primary-500 text-primary-500 hover:bg-primary-50 px-6 py-3 rounded-md text-center font-medium">
98
+ Meet Our Experts
99
+ </a>
100
+ </div>
101
+ </div>
102
+ <div class="md:w-1/2 flex justify-center">
103
+ <img src="http://static.photos/agriculture/640x360/10" alt="Farmers working" class="rounded-lg shadow-xl w-full max-w-md">
104
+ </div>
105
+ </div>
106
+ </div>
107
+ </section>
108
+
109
+ <!-- Stats Section -->
110
+ <section class="bg-primary-700 text-white py-12">
111
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
112
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center">
113
+ <div class="p-4">
114
+ <div class="text-4xl font-bold mb-2">5,000+</div>
115
+ <div class="text-primary-100">Farmers Supported</div>
116
+ </div>
117
+ <div class="p-4">
118
+ <div class="text-4xl font-bold mb-2">200K+</div>
119
+ <div class="text-primary-100">Acres Cultivated</div>
120
+ </div>
121
+ <div class="p-4">
122
+ <div class="text-4xl font-bold mb-2">$50M+</div>
123
+ <div class="text-primary-100">Invested in Farms</div>
124
+ </div>
125
+ <div class="p-4">
126
+ <div class="text-4xl font-bold mb-2">100+</div>
127
+ <div class="text-primary-100">Agricultural Experts</div>
128
+ </div>
129
+ </div>
130
+ </div>
131
+ </section>
132
+
133
+ <!-- Features Section -->
134
+ <section class="py-20">
135
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
136
+ <div class="text-center mb-16">
137
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Our Agricultural Programs</h2>
138
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">
139
+ Comprehensive initiatives designed to support farmers at every stage of their agricultural journey.
140
+ </p>
141
+ </div>
142
+
143
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
144
+ <div class="feature-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-in-out">
145
+ <img src="http://static.photos/agriculture/640x360/1" alt="Sustainable Farming" class="w-full h-48 object-cover">
146
+ <div class="p-6">
147
+ <div class="flex items-center mb-3">
148
+ <div class="bg-primary-100 text-primary-800 p-2 rounded-full mr-3">
149
+ <i data-feather="droplet" class="w-5 h-5"></i>
150
+ </div>
151
+ <h3 class="text-xl font-semibold text-gray-900">Water Conservation</h3>
152
+ </div>
153
+ <p class="text-gray-600 mb-4">
154
+ Innovative irrigation techniques and water management systems to optimize usage and preserve resources.
155
+ </p>
156
+ <a href="#" class="text-primary-500 hover:text-primary-600 font-medium inline-flex items-center">
157
+ Learn more <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
158
+ </a>
159
+ </div>
160
+ </div>
161
+
162
+ <div class="feature-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-in-out">
163
+ <img src="http://static.photos/agriculture/640x360/2" alt="Organic Farming" class="w-full h-48 object-cover">
164
+ <div class="p-6">
165
+ <div class="flex items-center mb-3">
166
+ <div class="bg-secondary-100 text-secondary-800 p-2 rounded-full mr-3">
167
+ <i data-feather="leaf" class="w-5 h-5"></i>
168
+ </div>
169
+ <h3 class="text-xl font-semibold text-gray-900">Organic Transition</h3>
170
+ </div>
171
+ <p class="text-gray-600 mb-4">
172
+ Assistance programs to help farmers transition to organic practices with financial and technical support.
173
+ </p>
174
+ <a href="#" class="text-primary-500 hover:text-primary-600 font-medium inline-flex items-center">
175
+ Learn more <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
176
+ </a>
177
+ </div>
178
+ </div>
179
+
180
+ <div class="feature-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-in-out">
181
+ <img src="http://static.photos/technology/640x360/3" alt="Agricultural Technology" class="w-full h-48 object-cover">
182
+ <div class="p-6">
183
+ <div class="flex items-center mb-3">
184
+ <div class="bg-primary-100 text-primary-800 p-2 rounded-full mr-3">
185
+ <i data-feather="cpu" class="w-5 h-5"></i>
186
+ </div>
187
+ <h3 class="text-xl font-semibold text-gray-900">Smart Farming</h3>
188
+ </div>
189
+ <p class="text-gray-600 mb-4">
190
+ Cutting-edge technology solutions including IoT sensors, drones, and AI-powered analytics for precision agriculture.
191
+ </p>
192
+ <a href="#" class="text-primary-500 hover:text-primary-600 font-medium inline-flex items-center">
193
+ Learn more <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
194
+ </a>
195
+ </div>
196
+ </div>
197
+ </div>
198
+ </div>
199
+ </section>
200
+
201
+ <!-- Testimonials -->
202
+ <section class="bg-gray-50 py-20">
203
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
204
+ <div class="text-center mb-16">
205
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Farmer Success Stories</h2>
206
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">
207
+ Hear from our farming community about how our programs have transformed their agricultural practices.
208
+ </p>
209
+ </div>
210
+
211
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
212
+ <div class="bg-white p-6 rounded-lg shadow-sm">
213
+ <div class="flex items-center mb-4">
214
+ <img src="http://static.photos/people/200x200/1" alt="Farmer" class="w-12 h-12 rounded-full object-cover">
215
+ <div class="ml-4">
216
+ <h4 class="font-medium text-gray-900">Rahul Sharma</h4>
217
+ <p class="text-sm text-gray-500">Punjab, Wheat Farmer</p>
218
+ </div>
219
+ </div>
220
+ <p class="text-gray-600">
221
+ "The water conservation program helped reduce my irrigation costs by 40% while maintaining yield. This is revolutionary for dry regions like ours."
222
+ </p>
223
+ <div class="mt-4 flex text-secondary-400">
224
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
225
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
226
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
227
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
228
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
229
+ </div>
230
+ </div>
231
+
232
+ <div class="bg-white p-6 rounded-lg shadow-sm">
233
+ <div class="flex items-center mb-4">
234
+ <img src="http://static.photos/people/200x200/2" alt="Farmer" class="w-12 h-12 rounded-full object-cover">
235
+ <div class="ml-4">
236
+ <h4 class="font-medium text-gray-900">Priya Patel</h4>
237
+ <p class="text-sm text-gray-500">Maharashtra, Organic Farmer</p>
238
+ </div>
239
+ </div>
240
+ <p class="text-gray-600">
241
+ "The transition to organic farming was daunting, but with AgriGrow's guidance and subsidies, I've doubled my income in just two years."
242
+ </p>
243
+ <div class="mt-4 flex text-secondary-400">
244
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
245
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
246
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
247
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
248
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
249
+ </div>
250
+ </div>
251
+
252
+ <div class="bg-white p-6 rounded-lg shadow-sm">
253
+ <div class="flex items-center mb-4">
254
+ <img src="http://static.photos/people/200x200/3" alt="Farmer" class="w-12 h-12 rounded-full object-cover">
255
+ <div class="ml-4">
256
+ <h4 class="font-medium text-gray-900">Anil Kumar</h4>
257
+ <p class="text-sm text-gray-500">Andhra Pradesh, Rice Farmer</p>
258
+ </div>
259
+ </div>
260
+ <p class="text-gray-600">
261
+ "The soil health monitoring technology has been game-changing. I now use 30% less fertilizer while increasing productivity by 15%."
262
+ </p>
263
+ <div class="mt-4 flex text-secondary-400">
264
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
265
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
266
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
267
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
268
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
269
+ </div>
270
+ </div>
271
+ </div>
272
+ </div>
273
+ </section>
274
+
275
+ <!-- CTA Section -->
276
+ <section class="py-20 bg-primary-600 text-white">
277
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
278
+ <div class="md:flex md:items-center md:justify-between">
279
+ <div class="md:w-2/3 mb-8 md:mb-0">
280
+ <h2 class="text-3xl font-bold mb-4">Ready to transform your farming practices?</h2>
281
+ <p class="text-lg text-primary-100 max-w-2xl">
282
+ Join thousands of farmers who are already benefiting from our government-supported agricultural programs.
283
+ </p>
284
+ </div>
285
+ <div class="md:w-1/3">
286
+ <a href="#" class="inline-block bg-white text-primary-600 hover:bg-gray-100 px-8 py-4 rounded-md text-lg font-semibold text-center w-full md:w-auto">
287
+ Apply Now
288
+ </a>
289
+ </div>
290
+ </div>
291
+ </div>
292
+ </section>
293
+
294
+ <!-- Footer -->
295
+ <footer class="bg-gray-900 text-white pt-16 pb-8">
296
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
297
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
298
+ <div>
299
+ <h3 class="text-lg font-semibold mb-4">AgriGrow Nation</h3>
300
+ <p class="text-gray-400">
301
+ Empowering farmers with innovative agricultural solutions for a sustainable future.
302
+ </p>
303
+ <div class="flex space-x-4 mt-4">
304
+ <a href="#" class="text-gray-400 hover:text-white">
305
+ <i data-feather="facebook" class="w-5 h-5"></i>
306
+ </a>
307
+ <a href="#" class="text-gray-400 hover:text-white">
308
+ <i data-feather="twitter" class="w-5 h-5"></i>
309
+ </a>
310
+ <a href="#" class="text-gray-400 hover:text-white">
311
+ <i data-feather="instagram" class="w-5 h-5"></i>
312
+ </a>
313
+ <a href="#" class="text-gray-400 hover:text-white">
314
+ <i data-feather="youtube" class="w-5 h-5"></i>
315
+ </a>
316
+ </div>
317
+ </div>
318
+ <div>
319
+ <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
320
+ <ul class="space-y-2">
321
+ <li><a href="#" class="text-gray-400 hover:text-white">Home</a></li>
322
+ <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li>
323
+ <li><a href="programs.html" class="text-gray-400 hover:text-white">Programs</a></li>
324
+ <li><a href="#" class="text-gray-400 hover:text-white">Resources</a></li>
325
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
326
+ </ul>
327
+ </div>
328
+ <div>
329
+ <h3 class="text-lg font-semibold mb-4">Programs</h3>
330
+ <ul class="space-y-2">
331
+ <li><a href="#" class="text-gray-400 hover:text-white">Water Conservation</a></li>
332
+ <li><a href="#" class="text-gray-400 hover:text-white">Organic Farming</a></li>
333
+ <li><a href="#" class="text-gray-400 hover:text-white">Smart Technology</a></li>
334
+ <li><a href="#" class="text-gray-400 hover:text-white">Financial Support</a></li>
335
+ <li><a href="#" class="text-gray-400 hover:text-white">Training & Education</a></li>
336
+ </ul>
337
+ </div>
338
+ <div>
339
+ <h3 class="text-lg font-semibold mb-4">Contact Us</h3>
340
+ <ul class="space-y-2 text-gray-400">
341
+ <li class="flex items-start">
342
+ <i data-feather="map-pin" class="w-5 h-5 mr-2 mt-1 flex-shrink-0"></i>
343
+ <span>Ministry of Agriculture, New Delhi, India</span>
344
+ </li>
345
+ <li class="flex items-center">
346
+ <i data-feather="phone" class="w-5 h-5 mr-2"></i>
347
+ <span>+91 1800 123 4567</span>
348
+ </li>
349
+ <li class="flex items-center">
350
+ <i data-feather="mail" class="w-5 h-5 mr-2"></i>
351
+ <span>support@agrigrow.gov.in</span>
352
+ </li>
353
+ </ul>
354
+ </div>
355
+ </div>
356
+ <div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
357
+ <p class="text-gray-400 text-sm mb-4 md:mb-0">
358
+ © 2023 AgriGrow Nation. All rights reserved.
359
+ </p>
360
+ <div class="flex space-x-6">
361
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a>
362
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a>
363
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Sitemap</a>
364
+ </div>
365
+ </div>
366
+ </div>
367
+ </footer>
368
+
369
+ <script>
370
+ feather.replace();
371
+
372
+ // Mobile menu toggle functionality would go here
373
+ document.addEventListener('DOMContentLoaded', function() {
374
+ const menuButton = document.querySelector('button[aria-label="menu"]');
375
+ // Would add click handler for mobile menu toggle
376
+ });
377
+ </script>
378
+ </body>
379
  </html>
programs.html ADDED
@@ -0,0 +1,410 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Agricultural Programs | GreenThumb Nexus</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script>
9
+ tailwind.config = {
10
+ theme: {
11
+ extend: {
12
+ colors: {
13
+ primary: {
14
+ 50: '#f0fdf4',
15
+ 100: '#dcfce7',
16
+ 200: '#bbf7d0',
17
+ 300: '#86efac',
18
+ 400: '#4ade80',
19
+ 500: '#22c55e',
20
+ 600: '#16a34a',
21
+ 700: '#15803d',
22
+ 800: '#166534',
23
+ 900: '#14532d',
24
+ },
25
+ secondary: {
26
+ 50: '#fefce8',
27
+ 100: '#fef9c3',
28
+ 200: '#fef08a',
29
+ 300: '#fde047',
30
+ 400: '#facc15',
31
+ 500: '#eab308',
32
+ 600: '#ca8a04',
33
+ 700: '#a16207',
34
+ 800: '#854d0e',
35
+ 900: '#713f12',
36
+ }
37
+ }
38
+ }
39
+ }
40
+ }
41
+ </script>
42
+ <script src="https://unpkg.com/feather-icons"></script>
43
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
44
+ <style>
45
+ .program-card:hover {
46
+ transform: translateY(-5px);
47
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
48
+ }
49
+ .gradient-bg {
50
+ background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(250, 204, 21, 0.05) 100%);
51
+ }
52
+ </style>
53
+ </head>
54
+ <body class="font-['Poppins'] bg-white text-gray-800">
55
+ <!-- Navigation -->
56
+ <nav class="bg-white shadow-sm sticky top-0 z-50">
57
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
58
+ <div class="flex justify-between h-16">
59
+ <div class="flex items-center">
60
+ <div class="flex-shrink-0 flex items-center">
61
+ <img class="h-8 w-auto" src="http://static.photos/agriculture/200x200/5" alt="GreenThumb Logo">
62
+ <span class="ml-2 text-xl font-bold text-primary-600">GreenThumb Nexus</span>
63
+ </div>
64
+ </div>
65
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
66
+ <a href="index.html" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium">Home</a>
67
+ <a href="programs.html" class="text-primary-600 border-b-2 border-primary-500 px-3 py-2 text-sm font-medium">Programs</a>
68
+ <a href="#" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium">Resources</a>
69
+ <a href="#" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium">About</a>
70
+ <a href="#" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium">Contact</a>
71
+ </div>
72
+ <div class="flex items-center">
73
+ <a href="#" class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-md text-sm font-medium">Farmer Portal</a>
74
+ <button class="md:hidden ml-4">
75
+ <i data-feather="menu"></i>
76
+ </button>
77
+ </div>
78
+ </div>
79
+ </div>
80
+ </nav>
81
+
82
+ <!-- Hero Section -->
83
+ <section class="gradient-bg">
84
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
85
+ <div class="text-center">
86
+ <h1 class="text-4xl md:text-5xl font-bold leading-tight text-gray-900 mb-4">
87
+ Our Agricultural <span class="text-primary-600">Programs</span>
88
+ </h1>
89
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">
90
+ Comprehensive initiatives designed to empower farmers with the tools, knowledge, and support needed for sustainable agricultural success.
91
+ </p>
92
+ </div>
93
+ </div>
94
+ </section>
95
+
96
+ <!-- Programs Section -->
97
+ <section class="py-16">
98
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
99
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
100
+ <!-- Program 1 -->
101
+ <div class="program-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-in-out">
102
+ <div class="bg-primary-500 text-white p-6">
103
+ <div class="flex items-center justify-center w-12 h-12 bg-white text-primary-500 rounded-full mb-4">
104
+ <i data-feather="droplet" class="w-6 h-6"></i>
105
+ </div>
106
+ <h3 class="text-xl font-semibold mb-2">Water Wise Initiative</h3>
107
+ <p class="text-primary-100">Maximize yield with minimal water usage</p>
108
+ </div>
109
+ <div class="p-6">
110
+ <ul class="space-y-3 text-gray-600 mb-6">
111
+ <li class="flex items-start">
112
+ <i data-feather="check" class="w-5 h-5 text-primary-500 mr-2 mt-0.5 flex-shrink-0"></i>
113
+ <span>Drip irrigation subsidies</span>
114
+ </li>
115
+ <li class="flex items-start">
116
+ <i data-feather="check" class="w-5 h-5 text-primary-500 mr-2 mt-0.5 flex-shrink-0"></i>
117
+ <span>Soil moisture monitoring systems</span>
118
+ </li>
119
+ <li class="flex items-start">
120
+ <i data-feather="check" class="w-5 h-5 text-primary-500 mr-2 mt-0.5 flex-shrink-0"></i>
121
+ <span>Rainwater harvesting training</span>
122
+ </li>
123
+ </ul>
124
+ <a href="#" class="text-primary-500 hover:text-primary-600 font-medium inline-flex items-center">
125
+ Program Details <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
126
+ </a>
127
+ </div>
128
+ </div>
129
+
130
+ <!-- Program 2 -->
131
+ <div class="program-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-in-out">
132
+ <div class="bg-secondary-500 text-white p-6">
133
+ <div class="flex items-center justify-center w-12 h-12 bg-white text-secondary-500 rounded-full mb-4">
134
+ <i data-feather="leaf" class="w-6 h-6"></i>
135
+ </div>
136
+ <h3 class="text-xl font-semibold mb-2">Organic Transition Program</h3>
137
+ <p class="text-secondary-100">From conventional to certified organic</p>
138
+ </div>
139
+ <div class="p-6">
140
+ <ul class="space-y-3 text-gray-600 mb-6">
141
+ <li class="flex items-start">
142
+ <i data-feather="check" class="w-5 h-5 text-secondary-500 mr-2 mt-0.5 flex-shrink-0"></i>
143
+ <span>3-year certification support</span>
144
+ </li>
145
+ <li class="flex items-start">
146
+ <i data-feather="check" class="w-5 h-5 text-secondary-500 mr-2 mt-0.5 flex-shrink-0"></i>
147
+ <span>Premium market access</span>
148
+ </li>
149
+ <li class="flex items-start">
150
+ <i data-feather="check" class="w-5 h-5 text-secondary-500 mr-2 mt-0.5 flex-shrink-0"></i>
151
+ <span>Biological pest control training</span>
152
+ </li>
153
+ </ul>
154
+ <a href="#" class="text-secondary-500 hover:text-secondary-600 font-medium inline-flex items-center">
155
+ Program Details <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
156
+ </a>
157
+ </div>
158
+ </div>
159
+
160
+ <!-- Program 3 -->
161
+ <div class="program-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-in-out">
162
+ <div class="bg-primary-700 text-white p-6">
163
+ <div class="flex items-center justify-center w-12 h-12 bg-white text-primary-700 rounded-full mb-4">
164
+ <i data-feather="cpu" class="w-6 h-6"></i>
165
+ </div>
166
+ <h3 class="text-xl font-semibold mb-2">TechFarm Initiative</h3>
167
+ <p class="text-primary-200">Precision agriculture for the modern farmer</p>
168
+ </div>
169
+ <div class="p-6">
170
+ <ul class="space-y-3 text-gray-600 mb-6">
171
+ <li class="flex items-start">
172
+ <i data-feather="check" class="w-5 h-5 text-primary-600 mr-2 mt-0.5 flex-shrink-0"></i>
173
+ <span>Drone technology subsidies</span>
174
+ </li>
175
+ <li class="flex items-start">
176
+ <i data-feather="check" class="w-5 h-5 text-primary-600 mr-2 mt-0.5 flex-shrink-0"></i>
177
+ <span>IoT sensor networks</span>
178
+ </li>
179
+ <li class="flex items-start">
180
+ <i data-feather="check" class="w-5 h-5 text-primary-600 mr-2 mt-0.5 flex-shrink-0"></i>
181
+ <span>AI-powered crop analytics</span>
182
+ </li>
183
+ </ul>
184
+ <a href="#" class="text-primary-500 hover:text-primary-600 font-medium inline-flex items-center">
185
+ Program Details <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
186
+ </a>
187
+ </div>
188
+ </div>
189
+
190
+ <!-- Program 4 -->
191
+ <div class="program-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-in-out">
192
+ <div class="bg-green-600 text-white p-6">
193
+ <div class="flex items-center justify-center w-12 h-12 bg-white text-green-600 rounded-full mb-4">
194
+ <i data-feather="dollar-sign" class="w-6 h-6"></i>
195
+ </div>
196
+ <h3 class="text-xl font-semibold mb-2">Farm Credit Boost</h3>
197
+ <p class="text-green-100">Financial solutions for agricultural growth</p>
198
+ </div>
199
+ <div class="p-6">
200
+ <ul class="space-y-3 text-gray-600 mb-6">
201
+ <li class="flex items-start">
202
+ <i data-feather="check" class="w-5 h-5 text-green-500 mr-2 mt-0.5 flex-shrink-0"></i>
203
+ <span>Low-interest equipment loans</span>
204
+ </li>
205
+ <li class="flex items-start">
206
+ <i data-feather="check" class="w-5 h-5 text-green-500 mr-2 mt-0.5 flex-shrink-0"></i>
207
+ <span>Crop insurance subsidies</span>
208
+ </li>
209
+ <li class="flex items-start">
210
+ <i data-feather="check" class="w-5 h-5 text-green-500 mr-2 mt-0.5 flex-shrink-0"></i>
211
+ <span>Harvest advance payments</span>
212
+ </li>
213
+ </ul>
214
+ <a href="#" class="text-green-500 hover:text-green-600 font-medium inline-flex items-center">
215
+ Program Details <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
216
+ </a>
217
+ </div>
218
+ </div>
219
+
220
+ <!-- Program 5 -->
221
+ <div class="program-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-in-out">
222
+ <div class="bg-amber-600 text-white p-6">
223
+ <div class="flex items-center justify-center w-12 h-12 bg-white text-amber-600 rounded-full mb-4">
224
+ <i data-feather="book" class="w-6 h-6"></i>
225
+ </div>
226
+ <h3 class="text-xl font-semibold mb-2">Agri-Education Network</h3>
227
+ <p class="text-amber-100">Knowledge for sustainable farming</p>
228
+ </div>
229
+ <div class="p-6">
230
+ <ul class="space-y-3 text-gray-600 mb-6">
231
+ <li class="flex items-start">
232
+ <i data-feather="check" class="w-5 h-5 text-amber-500 mr-2 mt-0.5 flex-shrink-0"></i>
233
+ <span>Mobile training units</span>
234
+ </li>
235
+ <li class="flex items-start">
236
+ <i data-feather="check" class="w-5 h-5 text-amber-500 mr-2 mt-0.5 flex-shrink-0"></i>
237
+ <span>Farmer-to-farmer mentorship</span>
238
+ </li>
239
+ <li class="flex items-start">
240
+ <i data-feather="check" class="w-5 h-5 text-amber-500 mr-2 mt-0.5 flex-shrink-0"></i>
241
+ <span>Digital resource library</span>
242
+ </li>
243
+ </ul>
244
+ <a href="#" class="text-amber-500 hover:text-amber-600 font-medium inline-flex items-center">
245
+ Program Details <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
246
+ </a>
247
+ </div>
248
+ </div>
249
+
250
+ <!-- Program 6 -->
251
+ <div class="program-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-in-out">
252
+ <div class="bg-blue-600 text-white p-6">
253
+ <div class="flex items-center justify-center w-12 h-12 bg-white text-blue-600 rounded-full mb-4">
254
+ <i data-feather="truck" class="w-6 h-6"></i>
255
+ </div>
256
+ <h3 class="text-xl font-semibold mb-2">Market Access Program</h3>
257
+ <p class="text-blue-100">Connect your harvest to buyers</p>
258
+ </div>
259
+ <div class="p-6">
260
+ <ul class="space-y-3 text-gray-600 mb-6">
261
+ <li class="flex items-start">
262
+ <i data-feather="check" class="w-5 h-5 text-blue-500 mr-2 mt-0.5 flex-shrink-0"></i>
263
+ <span>Cold chain infrastructure</span>
264
+ </li>
265
+ <li class="flex items-start">
266
+ <i data-feather="check" class="w-5 h-5 text-blue-500 mr-2 mt-0.5 flex-shrink-0"></i>
267
+ <span>Direct-to-retail partnerships</span>
268
+ </li>
269
+ <li class="flex items-start">
270
+ <i data-feather="check" class="w-5 h-5 text-blue-500 mr-2 mt-0.5 flex-shrink-0"></i>
271
+ <span>Export facilitation</span>
272
+ </li>
273
+ </ul>
274
+ <a href="#" class="text-blue-500 hover:text-blue-600 font-medium inline-flex items-center">
275
+ Program Details <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
276
+ </a>
277
+ </div>
278
+ </div>
279
+ </div>
280
+ </div>
281
+ </section>
282
+
283
+ <!-- How to Apply Section -->
284
+ <section class="py-20 bg-gray-50">
285
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
286
+ <div class="text-center mb-16">
287
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">How to Apply</h2>
288
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">
289
+ Our simple application process makes it easy to access the programs you need.
290
+ </p>
291
+ </div>
292
+
293
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
294
+ <div class="text-center">
295
+ <div class="w-16 h-16 bg-primary-100 text-primary-600 rounded-full flex items-center justify-center mx-auto mb-4">
296
+ <i data-feather="file-text" class="w-8 h-8"></i>
297
+ </div>
298
+ <h3 class="text-xl font-semibold text-gray-900 mb-2">1. Check Eligibility</h3>
299
+ <p class="text-gray-600">
300
+ Review program requirements to ensure you qualify before applying.
301
+ </p>
302
+ </div>
303
+ <div class="text-center">
304
+ <div class="w-16 h-16 bg-primary-100 text-primary-600 rounded-full flex items-center justify-center mx-auto mb-4">
305
+ <i data-feather="edit" class="w-8 h-8"></i>
306
+ </div>
307
+ <h3 class="text-xl font-semibold text-gray-900 mb-2">2. Complete Application</h3>
308
+ <p class="text-gray-600">
309
+ Fill out the online form with your details and program preferences.
310
+ </p>
311
+ </div>
312
+ <div class="text-center">
313
+ <div class="w-16 h-16 bg-primary-100 text-primary-600 rounded-full flex items-center justify-center mx-auto mb-4">
314
+ <i data-feather="check-circle" class="w-8 h-8"></i>
315
+ </div>
316
+ <h3 class="text-xl font-semibold text-gray-900 mb-2">3. Get Approved</h3>
317
+ <p class="text-gray-600">
318
+ Receive confirmation and begin accessing program benefits.
319
+ </p>
320
+ </div>
321
+ </div>
322
+
323
+ <div class="mt-12 text-center">
324
+ <a href="#" class="inline-block bg-primary-500 hover:bg-primary-600 text-white px-8 py-4 rounded-md text-lg font-semibold">
325
+ Start Your Application
326
+ </a>
327
+ </div>
328
+ </div>
329
+ </section>
330
+
331
+ <!-- Footer -->
332
+ <footer class="bg-gray-900 text-white pt-16 pb-8">
333
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
334
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
335
+ <div>
336
+ <h3 class="text-lg font-semibold mb-4">GreenThumb Nexus</h3>
337
+ <p class="text-gray-400">
338
+ Empowering farmers with innovative agricultural solutions for a sustainable future.
339
+ </p>
340
+ <div class="flex space-x-4 mt-4">
341
+ <a href="#" class="text-gray-400 hover:text-white">
342
+ <i data-feather="facebook" class="w-5 h-5"></i>
343
+ </a>
344
+ <a href="#" class="text-gray-400 hover:text-white">
345
+ <i data-feather="twitter" class="w-5 h-5"></i>
346
+ </a>
347
+ <a href="#" class="text-gray-400 hover:text-white">
348
+ <i data-feather="instagram" class="w-5 h-5"></i>
349
+ </a>
350
+ <a href="#" class="text-gray-400 hover:text-white">
351
+ <i data-feather="youtube" class="w-5 h-5"></i>
352
+ </a>
353
+ </div>
354
+ </div>
355
+ <div>
356
+ <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
357
+ <ul class="space-y-2">
358
+ <li><a href="index.html" class="text-gray-400 hover:text-white">Home</a></li>
359
+ <li><a href="programs.html" class="text-gray-400 hover:text-white">Programs</a></li>
360
+ <li><a href="#" class="text-gray-400 hover:text-white">Resources</a></li>
361
+ <li><a href="#" class="text-gray-400 hover:text-white">About</a></li>
362
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
363
+ </ul>
364
+ </div>
365
+ <div>
366
+ <h3 class="text-lg font-semibold mb-4">Programs</h3>
367
+ <ul class="space-y-2">
368
+ <li><a href="#" class="text-gray-400 hover:text-white">Water Wise Initiative</a></li>
369
+ <li><a href="#" class="text-gray-400 hover:text-white">Organic Transition</a></li>
370
+ <li><a href="#" class="text-gray-400 hover:text-white">TechFarm Initiative</a></li>
371
+ <li><a href="#" class="text-gray-400 hover:text-white">Farm Credit Boost</a></li>
372
+ <li><a href="#" class="text-gray-400 hover:text-white">Market Access</a></li>
373
+ </ul>
374
+ </div>
375
+ <div>
376
+ <h3 class="text-lg font-semibold mb-4">Contact Us</h3>
377
+ <ul class="space-y-2 text-gray-400">
378
+ <li class="flex items-start">
379
+ <i data-feather="map-pin" class="w-5 h-5 mr-2 mt-1 flex-shrink-0"></i>
380
+ <span>Ministry of Agriculture, New Delhi, India</span>
381
+ </li>
382
+ <li class="flex items-center">
383
+ <i data-feather="phone" class="w-5 h-5 mr-2"></i>
384
+ <span>+91 1800 123 4567</span>
385
+ </li>
386
+ <li class="flex items-center">
387
+ <i data-feather="mail" class="w-5 h-5 mr-2"></i>
388
+ <span>support@greenthumb.gov.in</span>
389
+ </li>
390
+ </ul>
391
+ </div>
392
+ </div>
393
+ <div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
394
+ <p class="text-gray-400 text-sm mb-4 md:mb-0">
395
+ © 2023 GreenThumb Nexus. All rights reserved.
396
+ </p>
397
+ <div class="flex space-x-6">
398
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a>
399
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a>
400
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Sitemap</a>
401
+ </div>
402
+ </div>
403
+ </div>
404
+ </footer>
405
+
406
+ <script>
407
+ feather.replace();
408
+ </script>
409
+ </body>
410
+ </html>