Hugging Face's logo

Spaces:
Protonpro
/
protonpro
Running

App Files Community
Protonpro commited on
Commit
776613c
·
verified ·
1 Parent(s): 0a4b5b3

create for me an act now page for nareto conservancy (www.naretoconservancy.org) an ngo that deals with enviromental conservation and community empowerment in kenya - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +275 -18
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Protonpro
3
- emoji: 🔥
4
- colorFrom: pink
5
- colorTo: green
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: protonpro
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: yellow
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,276 @@
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>Act Now | Nareto Conservancy</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <style>
14
+ .hero-gradient {
15
+ background: linear-gradient(135deg, rgba(16, 124, 16, 0.9) 0%, rgba(5, 78, 55, 0.9) 100%);
16
+ }
17
+ .btn-hover-effect:hover {
18
+ transform: translateY(-3px);
19
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
20
+ }
21
+ .btn-hover-effect {
22
+ transition: all 0.3s ease;
23
+ }
24
+ </style>
25
+ </head>
26
+ <body class="font-sans antialiased">
27
+ <!-- Navigation -->
28
+ <nav class="bg-white shadow-md sticky top-0 z-50">
29
+ <div class="container mx-auto px-6 py-3">
30
+ <div class="flex justify-between items-center">
31
+ <a href="#" class="flex items-center space-x-2">
32
+ <img src="http://static.photos/nature/200x200/42" alt="Nareto Conservancy Logo" class="h-12 w-12 rounded-full">
33
+ <span class="text-xl font-bold text-green-800">Nareto Conservancy</span>
34
+ </a>
35
+ <div class="hidden md:flex items-center space-x-8">
36
+ <a href="#" class="text-green-800 hover:text-green-600">Home</a>
37
+ <a href="#" class="text-green-800 hover:text-green-600">About</a>
38
+ <a href="#" class="text-green-800 hover:text-green-600">Programs</a>
39
+ <a href="#" class="text-green-800 hover:text-green-600">Impact</a>
40
+ <a href="#" class="bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 btn-hover-effect">Donate</a>
41
+ </div>
42
+ <button class="md:hidden focus:outline-none">
43
+ <i data-feather="menu" class="text-green-800 w-6 h-6"></i>
44
+ </button>
45
+ </div>
46
+ </div>
47
+ </nav>
48
+
49
+ <!-- Hero Section -->
50
+ <section class="hero-gradient text-white py-20">
51
+ <div class="container mx-auto px-6 text-center" data-aos="fade-up">
52
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Act Now for Kenya's Future</h1>
53
+ <p class="text-xl md:text-2xl mb-10 max-w-3xl mx-auto">
54
+ Join Nareto Conservancy in our mission to protect Kenya's environment and empower communities through sustainable solutions.
55
+ </p>
56
+ <div class="flex flex-col md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-4">
57
+ <a href="#" class="bg-white text-green-700 px-8 py-4 rounded-md font-bold hover:bg-gray-100 btn-hover-effect">Donate Now</a>
58
+ <a href="#" class="border-2 border-white text-white px-8 py-4 rounded-md font-bold hover:bg-white hover:text-green-700 btn-hover-effect">Join Our Cause</a>
59
+ </div>
60
+ </div>
61
+ </section>
62
+
63
+ <!-- Call to Action -->
64
+ <section class="py-16 bg-gray-50">
65
+ <div class="container mx-auto px-6">
66
+ <div class="text-center mb-12" data-aos="fade-up">
67
+ <h2 class="text-3xl font-bold text-green-800 mb-4">Your Action Makes a Difference</h2>
68
+ <p class="text-gray-600 max-w-2xl mx-auto">
69
+ Every contribution helps us protect Kenya's biodiversity and support local communities through education, sustainable agriculture, and wildlife conservation.
70
+ </p>
71
+ </div>
72
+ <div class="grid md:grid-cols-3 gap-8" data-aos="fade-up" data-aos-delay="100">
73
+ <div class="bg-white p-8 rounded-lg shadow-md text-center">
74
+ <div class="bg-green-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6">
75
+ <i data-feather="droplet" class="text-green-600 w-10 h-10"></i>
76
+ </div>
77
+ <h3 class="text-xl font-bold text-green-800 mb-3">Water Conservation</h3>
78
+ <p class="text-gray-600">
79
+ Help us implement sustainable water solutions for communities and wildlife in arid regions of Kenya.
80
+ </p>
81
+ <a href="#" class="mt-4 inline-block text-green-600 hover:text-green-800 font-medium">Learn More →</a>
82
+ </div>
83
+ <div class="bg-white p-8 rounded-lg shadow-md text-center">
84
+ <div class="bg-green-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6">
85
+ <i data-feather="users" class="text-green-600 w-10 h-10"></i>
86
+ </div>
87
+ <h3 class="text-xl font-bold text-green-800 mb-3">Community Empowerment</h3>
88
+ <p class="text-gray-600">
89
+ Support our programs that educate and equip local communities with sustainable livelihood skills.
90
+ </p>
91
+ <a href="#" class="mt-4 inline-block text-green-600 hover:text-green-800 font-medium">Learn More →</a>
92
+ </div>
93
+ <div class="bg-white p-8 rounded-lg shadow-md text-center">
94
+ <div class="bg-green-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6">
95
+ <i data-feather="tree" class="text-green-600 w-10 h-10"></i>
96
+ </div>
97
+ <h3 class="text-xl font-bold text-green-800 mb-3">Reforestation</h3>
98
+ <p class="text-gray-600">
99
+ Contribute to our tree-planting initiatives that restore Kenya's forests and combat climate change.
100
+ </p>
101
+ <a href="#" class="mt-4 inline-block text-green-600 hover:text-green-800 font-medium">Learn More →</a>
102
+ </div>
103
+ </div>
104
+ </div>
105
+ </section>
106
+
107
+ <!-- Impact Stories -->
108
+ <section class="py-16 bg-white">
109
+ <div class="container mx-auto px-6">
110
+ <div class="text-center mb-12" data-aos="fade-up">
111
+ <h2 class="text-3xl font-bold text-green-800 mb-4">Our Impact in Kenya</h2>
112
+ <p class="text-gray-600 max-w-2xl mx-auto">
113
+ See how your support is transforming lives and landscapes across Kenya.
114
+ </p>
115
+ </div>
116
+ <div class="grid md:grid-cols-2 gap-8 items-center mb-12">
117
+ <div class="order-2 md:order-1" data-aos="fade-right">
118
+ <img src="http://static.photos/people/1024x576/23" alt="Community members" class="rounded-lg shadow-lg w-full">
119
+ </div>
120
+ <div class="order-1 md:order-2" data-aos="fade-left">
121
+ <h3 class="text-2xl font-bold text-green-800 mb-4">Empowering Maasai Women</h3>
122
+ <p class="text-gray-600 mb-4">
123
+ Through our beadwork cooperative, we've helped 150 Maasai women gain financial independence while preserving their cultural heritage.
124
+ </p>
125
+ <ul class="space-y-3 mb-6">
126
+ <li class="flex items-start">
127
+ <i data-feather="check-circle" class="text-green-600 mr-2 mt-1"></i>
128
+ <span>150% increase in household income</span>
129
+ </li>
130
+ <li class="flex items-start">
131
+ <i data-feather="check-circle" class="text-green-600 mr-2 mt-1"></i>
132
+ <span>Education for 75 children sponsored</span>
133
+ </li>
134
+ <li class="flex items-start">
135
+ <i data-feather="check-circle" class="text-green-600 mr-2 mt-1"></i>
136
+ <span>Preservation of traditional crafts</span>
137
+ </li>
138
+ </ul>
139
+ <a href="#" class="inline-block bg-green-600 text-white px-6 py-3 rounded-md hover:bg-green-700 btn-hover-effect">Read More Stories</a>
140
+ </div>
141
+ </div>
142
+ <div class="grid md:grid-cols-2 gap-8 items-center">
143
+ <div data-aos="fade-right">
144
+ <h3 class="text-2xl font-bold text-green-800 mb-4">Wildlife Corridors Restored</h3>
145
+ <p class="text-gray-600 mb-4">
146
+ Our collaboration with local communities has created safe passages for elephants and other wildlife between protected areas.
147
+ </p>
148
+ <ul class="space-y-3 mb-6">
149
+ <li class="flex items-start">
150
+ <i data-feather="check-circle" class="text-green-600 mr-2 mt-1"></i>
151
+ <span>35km of wildlife corridors established</span>
152
+ </li>
153
+ <li class="flex items-start">
154
+ <i data-feather="check-circle" class="text-green-600 mr-2 mt-1"></i>
155
+ <span>80% reduction in human-wildlife conflict</span>
156
+ </li>
157
+ <li class="flex items-start">
158
+ <i data-feather="check-circle" class="text-green-600 mr-2 mt-1"></i>
159
+ <span>15 new conservation jobs created</span>
160
+ </li>
161
+ </ul>
162
+ <a href="#" class="inline-block bg-green-600 text-white px-6 py-3 rounded-md hover:bg-green-700 btn-hover-effect">Our Conservation Work</a>
163
+ </div>
164
+ <div data-aos="fade-left">
165
+ <img src="http://static.photos/nature/1024x576/45" alt="Wildlife corridor" class="rounded-lg shadow-lg w-full">
166
+ </div>
167
+ </div>
168
+ </div>
169
+ </section>
170
+
171
+ <!-- Donation Section -->
172
+ <section class="py-16 bg-green-700 text-white">
173
+ <div class="container mx-auto px-6">
174
+ <div class="max-w-4xl mx-auto text-center" data-aos="fade-up">
175
+ <h2 class="text-3xl font-bold mb-6">Join Our Movement</h2>
176
+ <p class="text-xl mb-8">
177
+ Your donation directly supports our environmental conservation and community empowerment programs across Kenya.
178
+ </p>
179
+ <div class="flex flex-col md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-4">
180
+ <button class="bg-white text-green-700 px-8 py-4 rounded-md font-bold hover:bg-gray-100 btn-hover-effect">Donate Monthly</button>
181
+ <button class="bg-green-800 text-white px-8 py-4 rounded-md font-bold hover:bg-green-900 btn-hover-effect">One-Time Donation</button>
182
+ </div>
183
+ <div class="mt-8 grid md:grid-cols-3 gap-6">
184
+ <div class="bg-green-600 p-4 rounded-lg">
185
+ <div class="text-2xl font-bold mb-2">$25</div>
186
+ <p>Provides school supplies for a child</p>
187
+ </div>
188
+ <div class="bg-green-600 p-4 rounded-lg">
189
+ <div class="text-2xl font-bold mb-2">$50</div>
190
+ <p>Plants 10 native tree seedlings</p>
191
+ </div>
192
+ <div class="bg-green-600 p-4 rounded-lg">
193
+ <div class="text-2xl font-bold mb-2">$100</div>
194
+ <p>Supports a woman's business startup</p>
195
+ </div>
196
+ </div>
197
+ </div>
198
+ </div>
199
+ </section>
200
+
201
+ <!-- Newsletter -->
202
+ <section class="py-16 bg-gray-50">
203
+ <div class="container mx-auto px-6 max-w-4xl text-center" data-aos="fade-up">
204
+ <h2 class="text-3xl font-bold text-green-800 mb-4">Stay Connected</h2>
205
+ <p class="text-gray-600 mb-8">
206
+ Subscribe to our newsletter for updates on our projects, success stories, and how you can get involved.
207
+ </p>
208
+ <form class="flex flex-col md:flex-row gap-4">
209
+ <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-green-500">
210
+ <button type="submit" class="bg-green-600 text-white px-6 py-3 rounded-md font-bold hover:bg-green-700 btn-hover-effect">Subscribe</button>
211
+ </form>
212
+ </div>
213
+ </section>
214
+
215
+ <!-- Footer -->
216
+ <footer class="bg-gray-800 text-white py-12">
217
+ <div class="container mx-auto px-6">
218
+ <div class="grid md:grid-cols-4 gap-8">
219
+ <div>
220
+ <h3 class="text-xl font-bold mb-4">Nareto Conservancy</h3>
221
+ <p class="text-gray-400">
222
+ Protecting Kenya's environment and empowering communities through sustainable solutions since 2010.
223
+ </p>
224
+ <div class="flex space-x-4 mt-4">
225
+ <a href="#" class="text-gray-400 hover:text-white"><i data-feather="facebook"></i></a>
226
+ <a href="#" class="text-gray-400 hover:text-white"><i data-feather="twitter"></i></a>
227
+ <a href="#" class="text-gray-400 hover:text-white"><i data-feather="instagram"></i></a>
228
+ <a href="#" class="text-gray-400 hover:text-white"><i data-feather="linkedin"></i></a>
229
+ </div>
230
+ </div>
231
+ <div>
232
+ <h3 class="text-xl font-bold mb-4">Quick Links</h3>
233
+ <ul class="space-y-2">
234
+ <li><a href="#" class="text-gray-400 hover:text-white">Home</a></li>
235
+ <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li>
236
+ <li><a href="#" class="text-gray-400 hover:text-white">Our Programs</a></li>
237
+ <li><a href="#" class="text-gray-400 hover:text-white">Get Involved</a></li>
238
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact Us</a></li>
239
+ </ul>
240
+ </div>
241
+ <div>
242
+ <h3 class="text-xl font-bold mb-4">Contact</h3>
243
+ <address class="not-italic text-gray-400">
244
+ <p class="mb-2">P.O. Box 12345</p>
245
+ <p class="mb-2">Nairobi, Kenya</p>
246
+ <p class="mb-2">Email: info@naretoconservancy.org</p>
247
+ <p>Phone: +254 700 123 456</p>
248
+ </address>
249
+ </div>
250
+ <div>
251
+ <h3 class="text-xl font-bold mb-4">Legal</h3>
252
+ <ul class="space-y-2">
253
+ <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li>
254
+ <li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li>
255
+ <li><a href="#" class="text-gray-400 hover:text-white">Financial Reports</a></li>
256
+ </ul>
257
+ </div>
258
+ </div>
259
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
260
+ <p>&copy; 2023 Nareto Conservancy. All rights reserved.</p>
261
+ </div>
262
+ </div>
263
+ </footer>
264
+
265
+ <script>
266
+ AOS.init({
267
+ duration: 800,
268
+ easing: 'ease-in-out',
269
+ once: true
270
+ });
271
+ </script>
272
+ <script>
273
+ feather.replace();
274
+ </script>
275
+ </body>
276
  </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ create for me an act now page for nareto conservancy (www.naretoconservancy.org) an ngo that deals with enviromental conservation and community empowerment in kenya