Hugging Face's logo

Spaces:
ICExrp
/
nonprofittest
Running

App Files
xet
Community
ICExrp commited on
Commit
149e452
·
verified ·
1 Parent(s): 2b7396d

make all the pages be able to loop back to the Home page and build out the Home page - Initial Deployment

Browse files
Files changed (6) hide show
  1. README.md +7 -5
  2. about.html +258 -0
  3. cats.html +322 -0
  4. donate.html +334 -0
  5. index.html +327 -19
  6. prompts.txt +3 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Nonprofittest
3
- emoji: 🐨
4
- colorFrom: indigo
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: nonprofittest
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: pink
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
about.html ADDED
@@ -0,0 +1,258 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>About Us - PurrHope</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
+ </head>
14
+ <body class="bg-gradient-to-br from-blue-50 to-purple-50">
15
+ <!-- Navigation -->
16
+ <nav class="fixed w-full bg-white/95 backdrop-blur-sm shadow-sm z-50">
17
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
18
+ <div class="flex justify-between items-center h-16">
19
+ <div class="flex items-center">
20
+ <i data-feather="heart" class="h-8 w-8 text-purple-400 mr-2"></i>
21
+ <span class="text-2xl font-bold text-gray-800">PurrHope</span>
22
+ </div>
23
+ <div class="hidden md:block">
24
+ <div class="ml-10 flex items-baseline space-x-8">
25
+ <a href="index.html" class="text-purple-600 px-3 py-2 rounded-md text-sm font-medium">Home</a>
26
+ <a href="about.html" class="text-gray-700 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">About</a>
27
+ <a href="cats.html" class="text-gray-700 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">Our Cats</a>
28
+ <a href="donate.html" class="bg-purple-500 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-purple-600 transition-colors">Donate</a>
29
+ </div>
30
+ </div>
31
+ <button class="md:hidden" onclick="toggleMenu()">
32
+ <i data-feather="menu" class="h-6 w-6 text-gray-700"></i>
33
+ </button>
34
+ </div>
35
+ </div>
36
+ <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
37
+ <div class="px-2 pt-2 pb-3 space-y-1">
38
+ <a href="index.html" class="block px-3 py-2 text-gray-700 hover:text-purple-600">Home</a>
39
+ <a href="about.html" class="block px-3 py-2 text-purple-600">About</a>
40
+ <a href="cats.html" class="block px-3 py-2 text-gray-700 hover:text-purple-600">Our Cats</a>
41
+ <a href="donate.html" class="block px-3 py-2 text-gray-700 hover:text-purple-600">Donate</a>
42
+ </div>
43
+ </div>
44
+ </nav>
45
+
46
+ <!-- Hero Section -->
47
+ <section class="pt-16 min-h-[60vh] flex items-center">
48
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
49
+ <div class="text-center" data-aos="fade-up">
50
+ <h1 class="text-5xl lg:text-6xl font-bold text-gray-800 mb-6">
51
+ Our Story of <span class="text-purple-600">Hope</span>
52
+ </h1>
53
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
54
+ Founded in 2009, PurrHope has been dedicated to rescuing and rehoming cats in need.
55
+ What started as a small group of volunteers has grown into a thriving community organization.
56
+ </p>
57
+ </div>
58
+ </div>
59
+ </section>
60
+
61
+ <!-- Mission & Vision -->
62
+ <section class="py-20 bg-white/50">
63
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
64
+ <div class="grid lg:grid-cols-2 gap-12 items-center">
65
+ <div data-aos="fade-right">
66
+ <h2 class="text-4xl font-bold text-gray-800 mb-6">Our Mission</h2>
67
+ <p class="text-lg text-gray-600 mb-6 leading-relaxed">
68
+ To rescue, rehabilitate, and rehome cats in need while promoting responsible pet ownership
69
+ and reducing feline overpopulation through education and community outreach.
70
+ </p>
71
+ <div class="flex items-center space-x-4">
72
+ <div class="bg-purple-100 p-3 rounded-full">
73
+ <i data-feather="target" class="h-6 w-6 text-purple-600"></i>
74
+ </div>
75
+ <span class="text-gray-700 font-medium">Saving lives, one cat at a time</span>
76
+ </div>
77
+ </div>
78
+ <div data-aos="fade-left" class="bg-gradient-to-br from-purple-100 to-pink-100 rounded-3xl p-8">
79
+ <h2 class="text-4xl font-bold text-gray-800 mb-6">Our Vision</h2>
80
+ <p class="text-lg text-gray-600 mb-6 leading-relaxed">
81
+ A world where every cat has a safe, loving home and no feline is left behind due to
82
+ homelessness or neglect.
83
+ </p>
84
+ <div class="flex items-center space-x-4">
85
+ <div class="bg-white p-3 rounded-full">
86
+ <i data-feather="eye" class="h-6 w-6 text-purple-600"></i>
87
+ </div>
88
+ <span class="text-gray-700 font-medium">Creating a better future for all cats</span>
89
+ </div>
90
+ </div>
91
+ </div>
92
+ </div>
93
+ </section>
94
+
95
+ <!-- Team Section -->
96
+ <section class="py-20">
97
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
98
+ <div class="text-center mb-16" data-aos="fade-up">
99
+ <h2 class="text-4xl font-bold text-gray-800 mb-4">Meet Our Team</h2>
100
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">
101
+ Dedicated professionals and volunteers working together to make a difference
102
+ </p>
103
+ </div>
104
+ <div class="grid md:grid-cols-3 gap-8">
105
+ <div class="text-center" data-aos="fade-up" data-aos-delay="100">
106
+ <img src="http://static.photos/people/320x240/1" alt="Sarah Johnson" class="w-32 h-32 rounded-full mx-auto mb-4 object-cover">
107
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Sarah Johnson</h3>
108
+ <p class="text-purple-600 mb-2">Founder & CEO</p>
109
+ <p class="text-gray-600">Passionate about feline welfare with 15+ years of experience in animal rescue.</p>
110
+ </div>
111
+ <div class="text-center" data-aos="fade-up" data-aos-delay="200">
112
+ <img src="http://static.photos/people/320x240/2" alt="Dr. Michael Chen" class="w-32 h-32 rounded-full mx-auto mb-4 object-cover">
113
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Dr. Michael Chen</h3>
114
+ <p class="text-purple-600 mb-2">Veterinary Director</p>
115
+ <p class="text-gray-600">Ensuring every cat receives the best medical care possible.</p>
116
+ </div>
117
+ <div class="text-center" data-aos="fade-up" data-aos-delay="300">
118
+ <img src="http://static.photos/people/320x240/3" alt="Emily Rodriguez" class="w-32 h-32 rounded-full mx-auto mb-4 object-cover">
119
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Emily Rodriguez</h3>
120
+ <p class="text-purple-600 mb-2">Adoption Coordinator</p>
121
+ <p class="text-gray-600">Matching cats with their perfect forever families.</p>
122
+ </div>
123
+ </div>
124
+ </div>
125
+ </section>
126
+
127
+ <!-- Values Section -->
128
+ <section class="py-20 bg-white/50">
129
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
130
+ <div class="text-center mb-16" data-aos="fade-up">
131
+ <h2 class="text-4xl font-bold text-gray-800 mb-4">Our Core Values</h2>
132
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">
133
+ The principles that guide everything we do
134
+ </p>
135
+ </div>
136
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
137
+ <div class="bg-white rounded-2xl p-6 text-center shadow-lg" data-aos="fade-up" data-aos-delay="100">
138
+ <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
139
+ <i data-feather="heart" class="h-8 w-8 text-purple-600"></i>
140
+ </div>
141
+ <h3 class="text-lg font-bold text-gray-800 mb-2">Compassion</h3>
142
+ <p class="text-gray-600 text-sm">Treating every cat with love and kindness</p>
143
+ </div>
144
+ <div class="bg-white rounded-2xl p-6 text-center shadow-lg" data-aos="fade-up" data-aos-delay="200">
145
+ <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
146
+ <i data-feather="shield" class="h-8 w-8 text-purple-600"></i>
147
+ </div>
148
+ <h3 class="text-lg font-bold text-gray-800 mb-2">Integrity</h3>
149
+ <p class="text-gray-600 text-sm">Always doing what's right for the cats</p>
150
+ </div>
151
+ <div class="bg-white rounded-2xl p-6 text-center shadow-lg" data-aos="fade-up" data-aos-delay="300">
152
+ <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
153
+ <i data-feather="users" class="h-8 w-8 text-purple-600"></i>
154
+ </div>
155
+ <h3 class="text-lg font-bold text-gray-800 mb-2">Community</h3>
156
+ <p class="text-gray-600 text-sm">Working together to save lives</p>
157
+ </div>
158
+ <div class="bg-white rounded-2xl p-6 text-center shadow-lg" data-aos="fade-up" data-aos-delay="400">
159
+ <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
160
+ <i data-feather="zap" class="h-8 w-8 text-purple-600"></i>
161
+ </div>
162
+ <h3 class="text-lg font-bold text-gray-800 mb-2">Excellence</h3>
163
+ <p class="text-gray-600 text-sm">Striving for the highest standards</p>
164
+ </div>
165
+ </div>
166
+ </div>
167
+ </section>
168
+
169
+ <!-- Call to Action -->
170
+ <section class="py-20 bg-gradient-to-r from-purple-100 to-pink-100">
171
+ <div class="max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8" data-aos="fade-up">
172
+ <h2 class="text-4xl font-bold text-gray-800 mb-6">Join Our Mission</h2>
173
+ <p class="text-xl text-gray-600 mb-8">
174
+ Be part of our growing community dedicated to saving cats and finding them loving homes.
175
+ </p>
176
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
177
+ <a href="volunteer.html" class="bg-white text-purple-600 px-8 py-3 rounded-full font-semibold hover:bg-gray-50 transition-colors">
178
+ Become a Volunteer
179
+ </a>
180
+ <a href="donate.html" class="bg-purple-500 text-white px-8 py-3 rounded-full font-semibold hover:bg-purple-600 transition-colors">
181
+ Support Our Cause
182
+ </a>
183
+ </div>
184
+ </div>
185
+ </section>
186
+
187
+ <!-- Footer -->
188
+ <footer class="bg-gray-800 text-white py-12">
189
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
190
+ <div class="grid md:grid-cols-4 gap-8">
191
+ <div>
192
+ <div class="flex items-center mb-4">
193
+ <i data-feather="heart" class="h-8 w-8 text-purple-400 mr-2"></i>
194
+ <span class="text-2xl font-bold">PurrHope</span>
195
+ </div>
196
+ <p class="text-gray-400">
197
+ Giving every cat a chance at a loving home.
198
+ </p>
199
+ </div>
200
+ <div>
201
+ <h4 class="font-bold mb-4">Quick Links</h4>
202
+ <ul class="space-y-2 text-gray-400">
203
+ <li><a href="index.html" class="hover:text-white transition-colors">Home</a></li>
204
+ <li><a href="about.html" class="text-white">About Us</a></li>
205
+ <li><a href="cats.html" class="hover:text-white transition-colors">Our Cats</a></li>
206
+ <li><a href="donate.html" class="hover:text-white transition-colors">Donate</a></li>
207
+ </ul>
208
+ </div>
209
+ <div>
210
+ <h4 class="font-bold mb-4">Contact</h4>
211
+ <ul class="space-y-2 text-gray-400">
212
+ <li>123 Cat Street</li>
213
+ <li>Meow City, MC 12345</li>
214
+ <li>(555) 123-MEOW</li>
215
+ <li>info@purrhope.org</li>
216
+ </ul>
217
+ </div>
218
+ <div>
219
+ <h4 class="font-bold mb-4">Follow Us</h4>
220
+ <div class="flex space-x-4">
221
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
222
+ <i data-feather="facebook" class="h-6 w-6"></i>
223
+ </a>
224
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
225
+ <i data-feather="twitter" class="h-6 w-6"></i>
226
+ </a>
227
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
228
+ <i data-feather="instagram" class="h-6 w-6"></i>
229
+ </a>
230
+ </div>
231
+ </div>
232
+ </div>
233
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
234
+ <p>&copy; 2024 PurrHope. All rights reserved.</p>
235
+ </div>
236
+ </div>
237
+ </footer>
238
+
239
+ <script>
240
+ function toggleMenu() {
241
+ const menu = document.getElementById('mobile-menu');
242
+ menu.classList.toggle('hidden');
243
+ }
244
+
245
+ // Initialize AOS
246
+ AOS.init({
247
+ duration: 800,
248
+ once: true
249
+ });
250
+
251
+ // Initialize Feather Icons
252
+ feather.replace();
253
+ </script>
254
+ </body>
255
+ </html>
256
+
257
+
258
+ html
cats.html ADDED
@@ -0,0 +1,322 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Our Cats - PurrHope</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
+ </head>
14
+ <body class="bg-gradient-to-br from-blue-50 to-purple-50">
15
+ <!-- Navigation -->
16
+ <nav class="fixed w-full bg-white/95 backdrop-blur-sm shadow-sm z-50">
17
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
18
+ <div class="flex justify-between items-center h-16">
19
+ <div class="flex items-center">
20
+ <i data-feather="heart" class="h-8 w-8 text-purple-400 mr-2"></i>
21
+ <span class="text-2xl font-bold text-gray-800">PurrHope</span>
22
+ </div>
23
+ <div class="hidden md:block">
24
+ <div class="ml-10 flex items-baseline space-x-8">
25
+ <a href="index.html" class="text-purple-600 px-3 py-2 rounded-md text-sm font-medium">Home</a>
26
+ <a href="about.html" class="text-gray-700 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">About</a>
27
+ <a href="cats.html" class="text-gray-700 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">Our Cats</a>
28
+ <a href="donate.html" class="bg-purple-500 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-purple-600 transition-colors">Donate</a>
29
+ </div>
30
+ </div>
31
+ <button class="md:hidden" onclick="toggleMenu()">
32
+ <i data-feather="menu" class="h-6 w-6 text-gray-700"></i>
33
+ </button>
34
+ </div>
35
+ </div>
36
+ <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
37
+ <div class="px-2 pt-2 pb-3 space-y-1">
38
+ <a href="index.html" class="block px-3 py-2 text-gray-700 hover:text-purple-600">Home</a>
39
+ <a href="about.html" class="block px-3 py-2 text-gray-700 hover:text-purple-600">About</a>
40
+ <a href="cats.html" class="block px-3 py-2 text-purple-600">Our Cats</a>
41
+ <a href="donate.html" class="block px-3 py-2 text-gray-700 hover:text-purple-600">Donate</a>
42
+ </div>
43
+ </div>
44
+ </nav>
45
+
46
+ <!-- Hero Section -->
47
+ <section class="pt-16 min-h-[60vh] flex items-center">
48
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
49
+ <div class="text-center" data-aos="fade-up">
50
+ <h1 class="text-5xl lg:text-6xl font-bold text-gray-800 mb-6">
51
+ Meet Our <span class="text-purple-600">Adoptable Cats</span>
52
+ </h1>
53
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
54
+ All our cats are spayed/neutered, vaccinated, and ready for their forever homes.
55
+ Each adoption helps us save another life.
56
+ </p>
57
+ </div>
58
+ </div>
59
+ </section>
60
+
61
+ <!-- Filter Section -->
62
+ <section class="py-8 bg-white/50">
63
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
64
+ <div class="flex flex-wrap gap-4 justify-center" data-aos="fade-up">
65
+ <button class="bg-purple-500 text-white px-6 py-2 rounded-full hover:bg-purple-600 transition-colors">All Cats</button>
66
+ <button class="bg-white text-gray-700 px-6 py-2 rounded-full border border-gray-300 hover:border-purple-500 transition-colors">Kittens</button>
67
+ <button class="bg-white text-gray-700 px-6 py-2 rounded-full border border-gray-300 hover:border-purple-500 transition-colors">Adults</button>
68
+ <button class="bg-white text-gray-700 px-6 py-2 rounded-full border border-gray-300 hover:border-purple-500 transition-colors">Seniors</button>
69
+ <button class="bg-white text-gray-700 px-6 py-2 rounded-full border border-gray-300 hover:border-purple-500 transition-colors">Special Needs</button>
70
+ </div>
71
+ </div>
72
+ </section>
73
+
74
+ <!-- Cats Grid -->
75
+ <section class="py-20">
76
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
77
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
78
+ <!-- Cat 1 -->
79
+ <div class="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow" data-aos="fade-up" data-aos-delay="100">
80
+ <img src="http://static.photos/nature/640x360/10" alt="Whiskers" class="w-full h-48 object-cover">
81
+ <div class="p-6">
82
+ <div class="flex justify-between items-start mb-2">
83
+ <h3 class="text-xl font-bold text-gray-800">Whiskers</h3>
84
+ <span class="bg-purple-100 text-purple-600 px-3 py-1 rounded-full text-sm">Adult</span>
85
+ </div>
86
+ <p class="text-gray-600 mb-4">Friendly and affectionate, loves cuddles and playtime.</p>
87
+ <div class="flex items-center justify-between">
88
+ <span class="text-sm text-gray-500">2 years old</span>
89
+ <button class="bg-purple-500 text-white px-4 py-2 rounded-lg hover:bg-purple-600 transition-colors">
90
+ Adopt Me
91
+ </button>
92
+ </div>
93
+ </div>
94
+ </div>
95
+
96
+ <!-- Cat 2 -->
97
+ <div class="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow" data-aos="fade-up" data-aos-delay="200">
98
+ <img src="http://static.photos/nature/640x360/11" alt="Luna" class="w-full h-48 object-cover">
99
+ <div class="p-6">
100
+ <div class="flex justify-between items-start mb-2">
101
+ <h3 class="text-xl font-bold text-gray-800">Luna</h3>
102
+ <span class="bg-pink-100 text-pink-600 px-3 py-1 rounded-full text-sm">Kitten</span>
103
+ </div>
104
+ <p class="text-gray-600 mb-4">Playful and curious, perfect for an active household.</p>
105
+ <div class="flex items-center justify-between">
106
+ <span class="text-sm text-gray-500">4 months old</span>
107
+ <button class="bg-purple-500 text-white px-4 py-2 rounded-lg hover:bg-purple-600 transition-colors">
108
+ Adopt Me
109
+ </button>
110
+ </div>
111
+ </div>
112
+ </div>
113
+
114
+ <!-- Cat 3 -->
115
+ <div class="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow" data-aos="fade-up" data-aos-delay="300">
116
+ <img src="http://static.photos/nature/640x360/12" alt="Oliver" class="w-full h-48 object-cover">
117
+ <div class="p-6">
118
+ <div class="flex justify-between items-start mb-2">
119
+ <h3 class="text-xl font-bold text-gray-800">Oliver</h3>
120
+ <span class="bg-blue-100 text-blue-600 px-3 py-1 rounded-full text-sm">Senior</span>
121
+ </div>
122
+ <p class="text-gray-600 mb-4">Calm and gentle, great companion for quiet homes.</p>
123
+ <div class="flex items-center justify-between">
124
+ <span class="text-sm text-gray-500">8 years old</span>
125
+ <button class="bg-purple-500 text-white px-4 py-2 rounded-lg hover:bg-purple-600 transition-colors">
126
+ Adopt Me
127
+ </button>
128
+ </div>
129
+ </div>
130
+ </div>
131
+
132
+ <!-- Cat 4 -->
133
+ <div class="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow" data-aos="fade-up" data-aos-delay="100">
134
+ <img src="http://static.photos/nature/640x360/13" alt="Cleo" class="w-full h-48 object-cover">
135
+ <div class="p-6">
136
+ <div class="flex justify-between items-start mb-2">
137
+ <h3 class="text-xl font-bold text-gray-800">Cleo</h3>
138
+ <span class="bg-green-100 text-green-600 px-3 py-1 rounded-full text-sm">Special Needs</span>
139
+ </div>
140
+ <p class="text-gray-600 mb-4">Sweet girl with diabetes, needs special care and lots of love.</p>
141
+ <div class="flex items-center justify-between">
142
+ <span class="text-sm text-gray-500">5 years old</span>
143
+ <button class="bg-purple-500 text-white px-4 py-2 rounded-lg hover:bg-purple-600 transition-colors">
144
+ Adopt Me
145
+ </button>
146
+ </div>
147
+ </div>
148
+ </div>
149
+
150
+ <!-- Cat 5 -->
151
+ <div class="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow" data-aos="fade-up" data-aos-delay="200">
152
+ <img src="http://static.photos/nature/640x360/14" alt="Simba" class="w-full h-48 object-cover">
153
+ <div class="p-6">
154
+ <div class="flex justify-between items-start mb-2">
155
+ <h3 class="text-xl font-bold text-gray-800">Simba</h3>
156
+ <span class="bg-purple-100 text-purple-600 px-3 py-1 rounded-full text-sm">Adult</span>
157
+ </div>
158
+ <p class="text-gray-600 mb-4">Handsome and confident, loves attention and treats.</p>
159
+ <div class="flex items-center justify-between">
160
+ <span class="text-sm text-gray-500">3 years old</span>
161
+ <button class="bg-purple-500 text-white px-4 py-2 rounded-lg hover:bg-purple-600 transition-colors">
162
+ Adopt Me
163
+ </button>
164
+ </div>
165
+ </div>
166
+ </div>
167
+
168
+ <!-- Cat 6 -->
169
+ <div class="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow" data-aos="fade-up" data-aos-delay="300">
170
+ <img src="http://static.photos/nature/640x360/15" alt="Mia" class="w-full h-48 object-cover">
171
+ <div class="p-6">
172
+ <div class="flex justify-between items-start mb-2">
173
+ <h3 class="text-xl font-bold text-gray-800">Mia</h3>
174
+ <span class="bg-pink-100 text-pink-600 px-3 py-1 rounded-full text-sm">Kitten</span>
175
+ </div>
176
+ <p class="text-gray-600 mb-4">Tiny but mighty, full of energy and purrs.</p>
177
+ <div class="flex items-center justify-between">
178
+ <span class="text-sm text-gray-500">3 months old</span>
179
+ <button class="bg-purple-500 text-white px-4 py-2 rounded-lg hover:bg-purple-600 transition-colors">
180
+ Adopt Me
181
+ </button>
182
+ </div>
183
+ </div>
184
+ </div>
185
+ </div>
186
+
187
+ <!-- Load More -->
188
+ <div class="text-center mt-12" data-aos="fade-up">
189
+ <button class="bg-white text-purple-600 px-8 py-3 rounded-full border-2 border-purple-600 hover:bg-purple-50 transition-colors font-semibold">
190
+ Load More Cats
191
+ </button>
192
+ </div>
193
+ </div>
194
+ </section>
195
+
196
+ <!-- Adoption Process -->
197
+ <section class="py-20 bg-white/50">
198
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
199
+ <div class="text-center mb-16" data-aos="fade-up">
200
+ <h2 class="text-4xl font-bold text-gray-800 mb-4">Adoption Process</h2>
201
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">
202
+ We've made our adoption process simple and straightforward
203
+ </p>
204
+ </div>
205
+ <div class="grid md:grid-cols-4 gap-8">
206
+ <div class="text-center" data-aos="fade-up" data-aos-delay="100">
207
+ <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
208
+ <span class="text-2xl font-bold text-purple-600">1</span>
209
+ </div>
210
+ <h3 class="text-lg font-bold text-gray-800 mb-2">Browse</h3>
211
+ <p class="text-gray-600">Look through our available cats and find your perfect match</p>
212
+ </div>
213
+ <div class="text-center" data-aos="fade-up" data-aos-delay="200">
214
+ <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
215
+ <span class="text-2xl font-bold text-purple-600">2</span>
216
+ </div>
217
+ <h3 class="text-lg font-bold text-gray-800 mb-2">Apply</h3>
218
+ <p class="text-gray-600">Fill out our adoption application online or in person</p>
219
+ </div>
220
+ <div class="text-center" data-aos="fade-up" data-aos-delay="300">
221
+ <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
222
+ <span class="text-2xl font-bold text-purple-600">3</span>
223
+ </div>
224
+ <h3 class="text-lg font-bold text-gray-800 mb-2">Meet & Greet</h3>
225
+ <p class="text-gray-600">Schedule a visit to meet your potential new family member</p>
226
+ </div>
227
+ <div class="text-center" data-aos="fade-up" data-aos-delay="400">
228
+ <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
229
+ <span class="text-2xl font-bold text-purple-600">4</span>
230
+ </div>
231
+ <h3 class="text-lg font-bold text-gray-800 mb-2">Take Home</h3>
232
+ <p class="text-gray-600">Complete the adoption and welcome your new cat home!</p>
233
+ </div>
234
+ </div>
235
+ </div>
236
+ </section>
237
+
238
+ <!-- Footer -->
239
+ <footer class="bg-gray-800 text-white py-12">
240
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
241
+ <div class="grid md:grid-cols-4 gap-8">
242
+ <div>
243
+ <div class="flex items-center mb-4">
244
+ <i data-feather="heart" class="h-8 w-8 text-purple-400 mr-2"></i>
245
+ <span class="text-2xl font-bold">PurrHope</span>
246
+ </div>
247
+ <p class="text-gray-400">
248
+ Giving every cat a chance at a loving home.
249
+ </p>
250
+ </div>
251
+ <div>
252
+ <h4 class="font-bold mb-4">Quick Links</h4>
253
+ <ul class="space-y-2 text-gray-400">
254
+ <li><a href="index.html" class="hover:text-white transition-colors">Home</a></li>
255
+ <li><a href="about.html" class="hover:text-white transition-colors">About Us</a></li>
256
+ <li><a href="cats.html" class="text-white">Our Cats</a></li>
257
+ <li><a href="donate.html" class="hover:text-white transition-colors">Donate</a></li>
258
+ </ul>
259
+ </div>
260
+ <div>
261
+ <h4 class="font-bold mb-4">Contact</h4>
262
+ <ul class="space-y-2 text-gray-400">
263
+ <li>123 Cat Street</li>
264
+ <li>Meow City, MC 12345</li>
265
+ <li>(555) 123-MEOW</li>
266
+ <li>info@purrhope.org</li>
267
+ </ul>
268
+ </div>
269
+ <div>
270
+ <h4 class="font-bold mb-4">Follow Us</h4>
271
+ <div class="flex space-x-4">
272
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
273
+ <i data-feather="facebook" class="h-6 w-6"></i>
274
+ </a>
275
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
276
+ <i data-feather="twitter" class="h-6 w-6"></i>
277
+ </a>
278
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
279
+ <i data-feather="instagram" class="h-6 w-6"></i>
280
+ </a>
281
+ </div>
282
+ </div>
283
+ </div>
284
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
285
+ <p>&copy; 2024 PurrHope. All rights reserved.</p>
286
+ </div>
287
+ </div>
288
+ </footer>
289
+
290
+ <script>
291
+ function toggleMenu() {
292
+ const menu = document.getElementById('mobile-menu');
293
+ menu.classList.toggle('hidden');
294
+ }
295
+
296
+ // Initialize AOS
297
+ AOS.init({
298
+ duration: 800,
299
+ once: true
300
+ });
301
+
302
+ // Initialize Feather Icons
303
+ feather.replace();
304
+
305
+ // Filter functionality
306
+ const filterButtons = document.querySelectorAll('section:nth-of-type(2) button');
307
+ filterButtons.forEach(button => {
308
+ button.addEventListener('click', function() {
309
+ filterButtons.forEach(btn => {
310
+ btn.classList.remove('bg-purple-500', 'text-white');
311
+ btn.classList.add('bg-white', 'text-gray-700');
312
+ });
313
+ this.classList.remove('bg-white', 'text-gray-700');
314
+ this.classList.add('bg-purple-500', 'text-white');
315
+ });
316
+ });
317
+ </script>
318
+ </body>
319
+ </html>
320
+
321
+
322
+ html
donate.html ADDED
@@ -0,0 +1,334 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Donate - PurrHope</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
+ </head>
14
+ <body class="bg-gradient-to-br from-blue-50 to-purple-50">
15
+ <!-- Navigation -->
16
+ <nav class="fixed w-full bg-white/95 backdrop-blur-sm shadow-sm z-50">
17
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
18
+ <div class="flex justify-between items-center h-16">
19
+ <div class="flex items-center">
20
+ <i data-feather="heart" class="h-8 w-8 text-purple-400 mr-2"></i>
21
+ <span class="text-2xl font-bold text-gray-800">PurrHope</span>
22
+ </div>
23
+ <div class="hidden md:block">
24
+ <div class="ml-10 flex items-baseline space-x-8">
25
+ <a href="index.html" class="text-purple-600 px-3 py-2 rounded-md text-sm font-medium">Home</a>
26
+ <a href="about.html" class="text-gray-700 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">About</a>
27
+ <a href="cats.html" class="text-gray-700 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">Our Cats</a>
28
+ <a href="donate.html" class="bg-purple-500 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-purple-600 transition-colors">Donate</a>
29
+ </div>
30
+ </div>
31
+ <button class="md:hidden" onclick="toggleMenu()">
32
+ <i data-feather="menu" class="h-6 w-6 text-gray-700"></i>
33
+ </button>
34
+ </div>
35
+ </div>
36
+ <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
37
+ <div class="px-2 pt-2 pb-3 space-y-1">
38
+ <a href="index.html" class="block px-3 py-2 text-gray-700 hover:text-purple-600">Home</a>
39
+ <a href="about.html" class="block px-3 py-2 text-gray-700 hover:text-purple-600">About</a>
40
+ <a href="cats.html" class="block px-3 py-2 text-gray-700 hover:text-purple-600">Our Cats</a>
41
+ <a href="donate.html" class="block px-3 py-2 text-purple-600">Donate</a>
42
+ </div>
43
+ </div>
44
+ </nav>
45
+
46
+ <!-- Hero Section -->
47
+ <section class="pt-16 min-h-[60vh] flex items-center">
48
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
49
+ <div class="text-center" data-aos="fade-up">
50
+ <h1 class="text-5xl lg:text-6xl font-bold text-gray-800 mb-6">
51
+ Make a <span class="text-purple-600">Difference</span> Today
52
+ </h1>
53
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
54
+ Your donation helps us provide food, medical care, and shelter for cats in need.
55
+ Every dollar makes a difference in saving lives.
56
+ </p>
57
+ </div>
58
+ </div>
59
+ </section>
60
+
61
+ <!-- Donation Amounts -->
62
+ <section class="py-20 bg-white/50">
63
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
64
+ <div class="text-center mb-16" data-aos="fade-up">
65
+ <h2 class="text-4xl font-bold text-gray-800 mb-4">Choose Your Impact</h2>
66
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">
67
+ Select an amount to see how your donation helps our cats
68
+ </p>
69
+ </div>
70
+ <div class="grid md:grid-cols-3 gap-8 max-w-4xl mx-auto">
71
+ <div class="bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition-shadow cursor-pointer group" data-aos="fade-up" data-aos-delay="100">
72
+ <div class="text-center">
73
+ <div class="text-4xl font-bold text-purple-600 mb-2 group-hover:scale-110 transition-transform">$25</div>
74
+ <p class="text-gray-600 mb-4">Feeds a cat for one week</p>
75
+ <div class="bg-purple-100 rounded-lg p-4">
76
+ <i data-feather="shopping-bag" class="h-8 w-8 text-purple-600 mx-auto mb-2"></i>
77
+ <p class="text-sm text-gray-700">Food & Treats</p>
78
+ </div>
79
+ </div>
80
+ </div>
81
+ <div class="bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition-shadow cursor-pointer group border-2 border-purple-500" data-aos="fade-up" data-aos-delay="200">
82
+ <div class="text-center">
83
+ <div class="text-4xl font-bold text-purple-600 mb-2 group-hover:scale-110 transition-transform">$50</div>
84
+ <p class="text-gray-600 mb-4">Vaccinates a cat</p>
85
+ <div class="bg-purple-100 rounded-lg p-4">
86
+ <i data-feather="shield" class="h-8 w-8 text-purple-600 mx-auto mb-2"></i>
87
+ <p class="text-sm text-gray-700">Medical Care</p>
88
+ </div>
89
+ </div>
90
+ </div>
91
+ <div class="bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition-shadow cursor-pointer group" data-aos="fade-up" data-aos-delay="300">
92
+ <div class="text-center">
93
+ <div class="text-4xl font-bold text-purple-600 mb-2 group-hover:scale-110 transition-transform">$100</div>
94
+ <p class="text-gray-600 mb-4">Spays/neuters a cat</p>
95
+ <div class="bg-purple-100 rounded-lg p-4">
96
+ <i data-feather="heart" class="h-8 w-8 text-purple-600 mx-auto mb-2"></i>
97
+ <p class="text-sm text-gray-700">Surgery & Care</p>
98
+ </div>
99
+ </div>
100
+ </div>
101
+ </div>
102
+ <div class="text-center mt-8" data-aos="fade-up">
103
+ <div class="inline-flex items-center space-x-4 bg-white rounded-full p-2 shadow-lg">
104
+ <input type="number" placeholder="Custom amount" class="px-4 py-2 w-32 text-center outline-none">
105
+ <button class="bg-purple-500 text-white px-6 py-2 rounded-full hover:bg-purple-600 transition-colors">
106
+ Donate Now
107
+ </button>
108
+ </div>
109
+ </div>
110
+ </div>
111
+ </section>
112
+
113
+ <!-- Donation Form -->
114
+ <section class="py-20">
115
+ <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
116
+ <div class="grid lg:grid-cols-2 gap-12">
117
+ <div data-aos="fade-right">
118
+ <h2 class="text-4xl font-bold text-gray-800 mb-6">Make Your Donation</h2>
119
+ <p class="text-lg text-gray-600 mb-8">
120
+ Your generous donation goes directly to helping cats in need. We're a 501(c)(3) organization, so your donation is tax-deductible.
121
+ </p>
122
+ <div class="space-y-4">
123
+ <div class="flex items-center space-x-3">
124
+ <i data-feather="check-circle" class="h-5 w-5 text-green-500"></i>
125
+ <span class="text-gray-700">100% of your donation goes to cat care</span>
126
+ </div>
127
+ <div class="flex items-center space-x-3">
128
+ <i data-feather="check-circle" class="h-5 w-5 text-green-500"></i>
129
+ <span class="text-gray-700">Monthly giving options available</span>
130
+ </div>
131
+ <div class="flex items-center space-x-3">
132
+ <i data-feather="check-circle" class="h-5 w-5 text-green-500"></i>
133
+ <span class="text-gray-700">Receive updates on how your donation helps</span>
134
+ </div>
135
+ </div>
136
+ </div>
137
+ <div class="bg-white rounded-2xl p-8 shadow-lg" data-aos="fade-left">
138
+ <form class="space-y-6">
139
+ <div>
140
+ <label class="block text-gray-700 font-medium mb-2">Donation Amount</label>
141
+ <div class="grid grid-cols-3 gap-3 mb-3">
142
+ <button type="button" class="border-2 border-gray-300 rounded-lg py-2 hover:border-purple-500 hover:text-purple-600 transition-colors">$25</button>
143
+ <button type="button" class="border-2 border-purple-500 bg-purple-500 text-white rounded-lg py-2 transition-colors">$50</button>
144
+ <button type="button" class="border-2 border-gray-300 rounded-lg py-2 hover:border-purple-500 hover:text-purple-600 transition-colors">$100</button>
145
+ </div>
146
+ <input type="number" placeholder="Custom amount" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-purple-500">
147
+ </div>
148
+ <div class="grid md:grid-cols-2 gap-4">
149
+ <div>
150
+ <label class="block text-gray-700 font-medium mb-2">First Name</label>
151
+ <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-purple-500">
152
+ </div>
153
+ <div>
154
+ <label class="block text-gray-700 font-medium mb-2">Last Name</label>
155
+ <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-purple-500">
156
+ </div>
157
+ </div>
158
+ <div>
159
+ <label class="block text-gray-700 font-medium mb-2">Email</label>
160
+ <input type="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-purple-500">
161
+ </div>
162
+ <div>
163
+ <label class="flex items-center space-x-3 cursor-pointer">
164
+ <input type="checkbox" class="w-5 h-5 text-purple-600 rounded">
165
+ <span class="text-gray-700">Make this a monthly donation</span>
166
+ </label>
167
+ </div>
168
+ <button type="submit" class="w-full bg-purple-500 text-white py-3 rounded-lg font-semibold hover:bg-purple-600 transition-colors">
169
+ Donate Now
170
+ </button>
171
+ </form>
172
+ </div>
173
+ </div>
174
+ </div>
175
+ </section>
176
+
177
+ <!-- Other Ways to Help -->
178
+ <section class="py-20 bg-white/50">
179
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
180
+ <div class="text-center mb-16" data-aos="fade-up">
181
+ <h2 class="text-4xl font-bold text-gray-800 mb-4">Other Ways to Help</h2>
182
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">
183
+ Your support doesn't have to be financial. There are many ways to make a difference.
184
+ </p>
185
+ </div>
186
+ <div class="grid md:grid-cols-3 gap-8">
187
+ <div class="bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition-shadow" data-aos="fade-up" data-aos-delay="100">
188
+ <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
189
+ <i data-feather="gift" class="h-8 w-8 text-purple-600"></i>
190
+ </div>
191
+ <h3 class="text-xl font-bold text-gray-800 mb-4 text-center">Supply Donations</h3>
192
+ <p class="text-gray-600 text-center mb-6">
193
+ Donate food, toys, bedding, and other supplies our cats need.
194
+ </p>
195
+ <a href="#" class="block text-center text-purple-600 hover:text-purple-700 font-medium">
196
+ View Wish List →
197
+ </a>
198
+ </div>
199
+ <div class="bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition-shadow" data-aos="fade-up" data-aos-delay="200">
200
+ <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
201
+ <i data-feather="clock" class="h-8 w-8 text-purple-600"></i>
202
+ </div>
203
+ <h3 class="text-xl font-bold text-gray-800 mb-4 text-center">Volunteer</h3>
204
+ <p class="text-gray-600 text-center mb-6">
205
+ Give your time to help care for cats and support our mission.
206
+ </p>
207
+ <a href="volunteer.html" class="block text-center text-purple-600 hover:text-purple-700 font-medium">
208
+ Learn More →
209
+ </a>
210
+ </div>
211
+ <div class="bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition-shadow" data-aos="fade-up" data-aos-delay="300">
212
+ <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
213
+ <i data-feather="share-2" class="h-8 w-8 text-purple-600"></i>
214
+ </div>
215
+ <h3 class="text-xl font-bold text-gray-800 mb-4 text-center">Spread the Word</h3>
216
+ <p class="text-gray-600 text-center mb-6">
217
+ Share our mission with friends and family on social media.
218
+ </p>
219
+ <div class="flex justify-center space-x-4">
220
+ <a href="#" class="text-purple-600 hover:text-purple-700">
221
+ <i data-feather="facebook" class="h-6 w-6"></i>
222
+ </a>
223
+ <a href="#" class="text-purple-600 hover:text-purple-700">
224
+ <i data-feather="twitter" class="h-6 w-6"></i>
225
+ </a>
226
+ <a href="#" class="text-purple-600 hover:text-purple-700">
227
+ <i data-feather="instagram" class="h-6 w-6"></i>
228
+ </a>
229
+ </div>
230
+ </div>
231
+ </div>
232
+ </div>
233
+ </section>
234
+
235
+ <!-- Thank You Message -->
236
+ <section class="py-20 bg-gradient-to-r from-purple-100 to-pink-100">
237
+ <div class="max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8" data-aos="fade-up">
238
+ <h2 class="text-4xl font-bold text-gray-800 mb-6">Thank You for Your Support!</h2>
239
+ <p class="text-xl text-gray-600 mb-8">
240
+ Your generosity helps us save lives and find loving homes for cats in need.
241
+ Every donation, no matter the size, makes a real difference.
242
+ </p>
243
+ <div class="bg-white rounded-2xl p-8 inline-block shadow-lg">
244
+ <p class="text-lg text-gray-700 italic">
245
+ "We couldn't do this work without supporters like you.
246
+ Thank you for being a hero for cats!"
247
+ </p>
248
+ <p class="text-purple-600 font-semibold mt-4">- The PurrHope Team</p>
249
+ </div>
250
+ </div>
251
+ </section>
252
+
253
+ <!-- Footer -->
254
+ <footer class="bg-gray-800 text-white py-12">
255
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
256
+ <div class="grid md:grid-cols-4 gap-8">
257
+ <div>
258
+ <div class="flex items-center mb-4">
259
+ <i data-feather="heart" class="h-8 w-8 text-purple-400 mr-2"></i>
260
+ <span class="text-2xl font-bold">PurrHope</span>
261
+ </div>
262
+ <p class="text-gray-400">
263
+ Giving every cat a chance at a loving home.
264
+ </p>
265
+ </div>
266
+ <div>
267
+ <h4 class="font-bold mb-4">Quick Links</h4>
268
+ <ul class="space-y-2 text-gray-400">
269
+ <li><a href="index.html" class="hover:text-white transition-colors">Home</a></li>
270
+ <li><a href="about.html" class="hover:text-white transition-colors">About Us</a></li>
271
+ <li><a href="cats.html" class="hover:text-white transition-colors">Our Cats</a></li>
272
+ <li><a href="donate.html" class="text-white">Donate</a></li>
273
+ </ul>
274
+ </div>
275
+ <div>
276
+ <h4 class="font-bold mb-4">Contact</h4>
277
+ <ul class="space-y-2 text-gray-400">
278
+ <li>123 Cat Street</li>
279
+ <li>Meow City, MC 12345</li>
280
+ <li>(555) 123-MEOW</li>
281
+ <li>info@purrhope.org</li>
282
+ </ul>
283
+ </div>
284
+ <div>
285
+ <h4 class="font-bold mb-4">Follow Us</h4>
286
+ <div class="flex space-x-4">
287
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
288
+ <i data-feather="facebook" class="h-6 w-6"></i>
289
+ </a>
290
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
291
+ <i data-feather="twitter" class="h-6 w-6"></i>
292
+ </a>
293
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
294
+ <i data-feather="instagram" class="h-6 w-6"></i>
295
+ </a>
296
+ </div>
297
+ </div>
298
+ </div>
299
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
300
+ <p>&copy; 2024 PurrHope. All rights reserved.</p>
301
+ </div>
302
+ </div>
303
+ </footer>
304
+
305
+ <script>
306
+ function toggleMenu() {
307
+ const menu = document.getElementById('mobile-menu');
308
+ menu.classList.toggle('hidden');
309
+ }
310
+
311
+ // Initialize AOS
312
+ AOS.init({
313
+ duration: 800,
314
+ once: true
315
+ });
316
+
317
+ // Initialize Feather Icons
318
+ feather.replace();
319
+
320
+ // Amount button functionality
321
+ const amountButtons = document.querySelectorAll('button:contains("$")');
322
+ amountButtons.forEach(button => {
323
+ button.addEventListener('click', function() {
324
+ amountButtons.forEach(btn => {
325
+ btn.classList.remove('bg-purple-500', 'text-white', 'border-purple-500');
326
+ btn.classList.add('border-gray-300');
327
+ });
328
+ this.classList.add('bg-purple-500', 'text-white', 'border-purple-500');
329
+ this.classList.remove('border-gray-300');
330
+ });
331
+ });
332
+ </script>
333
+ </body>
334
+ </html>
index.html CHANGED
@@ -1,19 +1,327 @@
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>Home - PurrHope</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
+ </head>
14
+ <body class="bg-gradient-to-br from-blue-50 to-purple-50">
15
+ <!-- Navigation -->
16
+ <nav class="fixed w-full bg-white/95 backdrop-blur-sm shadow-sm z-50">
17
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
18
+ <div class="flex justify-between items-center h-16">
19
+ <div class="flex items-center">
20
+ <i data-feather="heart" class="h-8 w-8 text-purple-400 mr-2"></i>
21
+ <span class="text-2xl font-bold text-gray-800">PurrHope</span>
22
+ </div>
23
+ <div class="hidden md:block">
24
+ <div class="ml-10 flex items-baseline space-x-8">
25
+ <a href="index.html" class="text-purple-600 px-3 py-2 rounded-md text-sm font-medium">Home</a>
26
+ <a href="about.html" class="text-gray-700 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">About</a>
27
+ <a href="cats.html" class="text-gray-700 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">Our Cats</a>
28
+ <a href="donate.html" class="bg-purple-500 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-purple-600 transition-colors">Donate</a>
29
+ </div>
30
+ </div>
31
+ <button class="md:hidden" onclick="toggleMenu()">
32
+ <i data-feather="menu" class="h-6 w-6 text-gray-700"></i>
33
+ </button>
34
+ </div>
35
+ </div>
36
+ <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
37
+ <div class="px-2 pt-2 pb-3 space-y-1">
38
+ <a href="index.html" class="block px-3 py-2 text-purple-600">Home</a>
39
+ <a href="about.html" class="block px-3 py-2 text-gray-700 hover:text-purple-600">About</a>
40
+ <a href="cats.html" class="block px-3 py-2 text-gray-700 hover:text-purple-600">Our Cats</a>
41
+ <a href="donate.html" class="block px-3 py-2 text-gray-700 hover:text-purple-600">Donate</a>
42
+ </div>
43
+ </div>
44
+ </nav>
45
+
46
+ <!-- Hero Section -->
47
+ <section class="pt-16 min-h-screen flex items-center">
48
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
49
+ <div class="grid lg:grid-cols-2 gap-12 items-center">
50
+ <div data-aos="fade-right">
51
+ <h1 class="text-5xl lg:text-6xl font-bold text-gray-800 mb-6">
52
+ Giving Every Cat a <span class="text-purple-600">Chance</span> at Love
53
+ </h1>
54
+ <p class="text-xl text-gray-600 mb-8 leading-relaxed">
55
+ PurrHope is a non-profit organization dedicated to rescuing, rehabilitating, and rehoming cats in need.
56
+ Together, we can create a world where no feline is left behind.
57
+ </p>
58
+ <div class="flex flex-col sm:flex-row gap-4">
59
+ <a href="cats.html" class="bg-purple-500 text-white px-8 py-3 rounded-full font-semibold hover:bg-purple-600 transition-colors text-center">
60
+ Meet Our Cats
61
+ </a>
62
+ <a href="donate.html" class="bg-white text-purple-600 px-8 py-3 rounded-full border-2 border-purple-500 font-semibold hover:bg-purple-50 transition-colors text-center">
63
+ Donate Now
64
+ </a>
65
+ </div>
66
+ </div>
67
+ <div data-aos="fade-left" class="relative">
68
+ <img src="http://static.photos/nature/640x360/1" alt="Happy cat" class="rounded-3xl shadow-2xl w-full">
69
+ <div class="absolute -bottom-6 -left-6 bg-white rounded-2xl p-6 shadow-lg">
70
+ <div class="flex items-center space-x-3">
71
+ <div class="bg-green-100 p-2 rounded-full">
72
+ <i data-feather="heart" class="h-6 w-6 text-green-600"></i>
73
+ </div>
74
+ <div>
75
+ <p class="text-gray-800 font-bold">500+</p>
76
+ <p class="text-gray-600 text-sm">Cats Rescued</p>
77
+ </div>
78
+ </div>
79
+ </div>
80
+ </div>
81
+ </div>
82
+ </div>
83
+ </section>
84
+
85
+ <!-- Stats Section -->
86
+ <section class="py-20 bg-white/50">
87
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
88
+ <div class="grid md:grid-cols-4 gap-8">
89
+ <div class="text-center" data-aos="fade-up" data-aos-delay="100">
90
+ <div class="text-4xl font-bold text-purple-600 mb-2">500+</div>
91
+ <p class="text-gray-600">Cats Rescued</p>
92
+ </div>
93
+ <div class="text-center" data-aos="fade-up" data-aos-delay="200">
94
+ <div class="text-4xl font-bold text-purple-600 mb-2">350+</div>
95
+ <p class="text-gray-600">Forever Homes Found</p>
96
+ </div>
97
+ <div class="text-center" data-aos="fade-up" data-aos-delay="300">
98
+ <div class="text-4xl font-bold text-purple-600 mb-2">50+</div>
99
+ <p class="text-gray-600">Active Volunteers</p>
100
+ </div>
101
+ <div class="text-center" data-aos="fade-up" data-aos-delay="400">
102
+ <div class="text-4xl font-bold text-purple-600 mb-2">15</div>
103
+ <p class="text-gray-600">Years of Service</p>
104
+ </div>
105
+ </div>
106
+ </div>
107
+ </section>
108
+
109
+ <!-- Featured Cats -->
110
+ <section class="py-20">
111
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
112
+ <div class="text-center mb-16" data-aos="fade-up">
113
+ <h2 class="text-4xl font-bold text-gray-800 mb-4">Ready for Adoption</h2>
114
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">
115
+ Meet some of our wonderful cats looking for their forever homes
116
+ </p>
117
+ </div>
118
+ <div class="grid md:grid-cols-3 gap-8">
119
+ <div class="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow" data-aos="fade-up" data-aos-delay="100">
120
+ <img src="http://static.photos/nature/640x360/20" alt="Luna" class="w-full h-48 object-cover">
121
+ <div class="p-6">
122
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Luna</h3>
123
+ <p class="text-gray-600 mb-4">Sweet and gentle, perfect for a quiet home</p>
124
+ <div class="flex justify-between items-center">
125
+ <span class="text-sm text-gray-500">2 years old</span>
126
+ <a href="cats.html" class="text-purple-600 hover:text-purple-700 font-medium">Meet Luna →</a>
127
+ </div>
128
+ </div>
129
+ </div>
130
+ <div class="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow" data-aos="fade-up" data-aos-delay="200">
131
+ <img src="http://static.photos/nature/640x360/21" alt="Milo" class="w-full h-48 object-cover">
132
+ <div class="p-6">
133
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Milo</h3>
134
+ <p class="text-gray-600 mb-4">Playful and energetic, loves children</p>
135
+ <div class="flex justify-between items-center">
136
+ <span class="text-sm text-gray-500">1 year old</span>
137
+ <a href="cats.html" class="text-purple-600 hover:text-purple-700 font-medium">Meet Milo →</a>
138
+ </div>
139
+ </div>
140
+ </div>
141
+ <div class="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow" data-aos="fade-up" data-aos-delay="300">
142
+ <img src="http://static.photos/nature/640x360/22" alt="Sophie" class="w-full h-48 object-cover">
143
+ <div class="p-6">
144
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Sophie</h3>
145
+ <p class="text-gray-600 mb-4">Independent but affectionate</p>
146
+ <div class="flex justify-between items-center">
147
+ <span class="text-sm text-gray-500">3 years old</span>
148
+ <a href="cats.html" class="text-purple-600 hover:text-purple-700 font-medium">Meet Sophie →</a>
149
+ </div>
150
+ </div>
151
+ </div>
152
+ </div>
153
+ <div class="text-center mt-12" data-aos="fade-up">
154
+ <a href="cats.html" class="bg-purple-500 text-white px-8 py-3 rounded-full font-semibold hover:bg-purple-600 transition-colors inline-block">
155
+ View All Cats
156
+ </a>
157
+ </div>
158
+ </div>
159
+ </section>
160
+
161
+ <!-- Mission Section -->
162
+ <section class="py-20 bg-white/50">
163
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
164
+ <div class="grid lg:grid-cols-2 gap-12 items-center">
165
+ <div data-aos="fade-right">
166
+ <h2 class="text-4xl font-bold text-gray-800 mb-6">Our Mission</h2>
167
+ <p class="text-lg text-gray-600 mb-8 leading-relaxed">
168
+ We rescue cats from high-kill shelters, provide them with medical care,
169
+ and work tirelessly to find them loving forever homes. Every cat deserves a chance at happiness.
170
+ </p>
171
+ <div class="space-y-4">
172
+ <div class="flex items-center space-x-3">
173
+ <i data-feather="check-circle" class="h-5 w-5 text-green-500"></i>
174
+ <span class="text-gray-700">Rescue cats from shelters and streets</span>
175
+ </div>
176
+ <div class="flex items-center space-x-3">
177
+ <i data-feather="check-circle" class="h-5 w-5 text-green-500"></i>
178
+ <span class="text-gray-700">Provide veterinary care and rehabilitation</span>
179
+ </div>
180
+ <div class="flex items-center space-x-3">
181
+ <i data-feather="check-circle" class="h-5 w-5 text-green-500"></i>
182
+ <span class="text-gray-700">Find loving forever homes</span>
183
+ </div>
184
+ </div>
185
+ </div>
186
+ <div data-aos="fade-left">
187
+ <img src="http://static.photos/nature/640x360/23" alt="Cat rescue" class="rounded-3xl shadow-2xl w-full">
188
+ </div>
189
+ </div>
190
+ </div>
191
+ </section>
192
+
193
+ <!-- How You Can Help -->
194
+ <section class="py-20">
195
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
196
+ <div class="text-center mb-16" data-aos="fade-up">
197
+ <h2 class="text-4xl font-bold text-gray-800 mb-4">How You Can Help</h2>
198
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">
199
+ There are many ways to support our mission and help cats in need
200
+ </p>
201
+ </div>
202
+ <div class="grid md:grid-cols-3 gap-8">
203
+ <div class="bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition-shadow text-center" data-aos="fade-up" data-aos-delay="100">
204
+ <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
205
+ <i data-feather="heart" class="h-8 w-8 text-purple-600"></i>
206
+ </div>
207
+ <h3 class="text-xl font-bold text-gray-800 mb-4">Donate</h3>
208
+ <p class="text-gray-600 mb-6">
209
+ Your donation helps provide food, medical care, and shelter for cats in need.
210
+ </p>
211
+ <a href="donate.html" class="text-purple-600 hover:text-purple-700 font-medium">
212
+ Donate Now →
213
+ </a>
214
+ </div>
215
+ <div class="bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition-shadow text-center" data-aos="fade-up" data-aos-delay="200">
216
+ <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
217
+ <i data-feather="users" class="h-8 w-8 text-purple-600"></i>
218
+ </div>
219
+ <h3 class="text-xl font-bold text-gray-800 mb-4">Volunteer</h3>
220
+ <p class="text-gray-600 mb-6">
221
+ Join our team and help care for cats, assist with adoptions, and more.
222
+ </p>
223
+ <a href="#" class="text-purple-600 hover:text-purple-700 font-medium">
224
+ Join Us →
225
+ </a>
226
+ </div>
227
+ <div class="bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition-shadow text-center" data-aos="fade-up" data-aos-delay="300">
228
+ <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
229
+ <i data-feather="home" class="h-8 w-8 text-purple-600"></i>
230
+ </div>
231
+ <h3 class="text-xl font-bold text-gray-800 mb-4">Adopt</h3>
232
+ <p class="text-gray-600 mb-6">
233
+ Give a cat the loving forever home they deserve.
234
+ </p>
235
+ <a href="cats.html" class="text-purple-600 hover:text-purple-700 font-medium">
236
+ Meet Our Cats →
237
+ </a>
238
+ </div>
239
+ </div>
240
+ </div>
241
+ </section>
242
+
243
+ <!-- Newsletter -->
244
+ <section class="py-20 bg-gradient-to-r from-purple-100 to-pink-100">
245
+ <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center" data-aos="fade-up">
246
+ <h2 class="text-4xl font-bold text-gray-800 mb-4">Stay Connected</h2>
247
+ <p class="text-xl text-gray-600 mb-8">
248
+ Get updates on our cats, success stories, and ways you can help.
249
+ </p>
250
+ <form class="max-w-md mx-auto flex gap-4">
251
+ <input type="email" placeholder="Your email address" class="flex-1 px-4 py-3 rounded-full border-0 focus:outline-none focus:ring-2 focus:ring-purple-500">
252
+ <button type="submit" class="bg-purple-500 text-white px-8 py-3 rounded-full font-semibold hover:bg-purple-600 transition-colors">
253
+ Subscribe
254
+ </button>
255
+ </form>
256
+ </div>
257
+ </section>
258
+
259
+ <!-- Footer -->
260
+ <footer class="bg-gray-800 text-white py-12">
261
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
262
+ <div class="grid md:grid-cols-4 gap-8">
263
+ <div>
264
+ <div class="flex items-center mb-4">
265
+ <i data-feather="heart" class="h-8 w-8 text-purple-400 mr-2"></i>
266
+ <span class="text-2xl font-bold">PurrHope</span>
267
+ </div>
268
+ <p class="text-gray-400">
269
+ Giving every cat a chance at a loving home.
270
+ </p>
271
+ </div>
272
+ <div>
273
+ <h4 class="font-bold mb-4">Quick Links</h4>
274
+ <ul class="space-y-2 text-gray-400">
275
+ <li><a href="index.html" class="text-white">Home</a></li>
276
+ <li><a href="about.html" class="hover:text-white transition-colors">About Us</a></li>
277
+ <li><a href="cats.html" class="hover:text-white transition-colors">Our Cats</a></li>
278
+ <li><a href="donate.html" class="hover:text-white transition-colors">Donate</a></li>
279
+ </ul>
280
+ </div>
281
+ <div>
282
+ <h4 class="font-bold mb-4">Contact</h4>
283
+ <ul class="space-y-2 text-gray-400">
284
+ <li>123 Cat Street</li>
285
+ <li>Meow City, MC 12345</li>
286
+ <li>(555) 123-MEOW</li>
287
+ <li>info@purrhope.org</li>
288
+ </ul>
289
+ </div>
290
+ <div>
291
+ <h4 class="font-bold mb-4">Follow Us</h4>
292
+ <div class="flex space-x-4">
293
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
294
+ <i data-feather="facebook" class="h-6 w-6"></i>
295
+ </a>
296
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
297
+ <i data-feather="twitter" class="h-6 w-6"></i>
298
+ </a>
299
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
300
+ <i data-feather="instagram" class="h-6 w-6"></i>
301
+ </a>
302
+ </div>
303
+ </div>
304
+ </div>
305
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
306
+ <p>&copy; 2024 PurrHope. All rights reserved.</p>
307
+ </div>
308
+ </div>
309
+ </footer>
310
+
311
+ <script>
312
+ function toggleMenu() {
313
+ const menu = document.getElementById('mobile-menu');
314
+ menu.classList.toggle('hidden');
315
+ }
316
+
317
+ // Initialize AOS
318
+ AOS.init({
319
+ duration: 800,
320
+ once: true
321
+ });
322
+
323
+ // Initialize Feather Icons
324
+ feather.replace();
325
+ </script>
326
+ </body>
327
+ </html>
prompts.txt ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ make me a website thats for a non profit all about Cats. Have a couple pages and make it looks very clean with lighter colors
2
+ keep all the pages youve made already but now create the home page
3
+ make all the pages be able to loop back to the Home page and build out the Home page