Hugging Face's logo

Spaces:
tamesidecc
/
tcc-website
Running

App Files Community
tamesidecc commited on
Commit
046b6ea
·
verified ·
1 Parent(s): 055e7ad

can you please add these pages - Initial Deployment

Browse files
Files changed (4) hide show
  1. README.md +7 -5
  2. about.html +403 -0
  3. index.html +372 -18
  4. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Tcc Website
3
- emoji: ⚡
4
- colorFrom: indigo
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: tcc-website
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: red
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,403 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 | Tameside & Wirral Community Computers</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
+ .mission-bg {
15
+ background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('http://static.photos/technology/1200x630/5');
16
+ background-size: cover;
17
+ background-position: center;
18
+ }
19
+ .btn-hover-effect {
20
+ transition: all 0.3s ease;
21
+ }
22
+ .btn-hover-effect:hover {
23
+ transform: translateY(-2px);
24
+ box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.2);
25
+ }
26
+ </style>
27
+ </head>
28
+ <body class="font-sans antialiased">
29
+ <!-- Navigation -->
30
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
31
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
32
+ <div class="flex justify-between h-16">
33
+ <div class="flex items-center">
34
+ <div class="flex-shrink-0 flex items-center">
35
+ <img class="h-10 w-auto" src="http://static.photos/technology/200x200/1" alt="Community Computers Logo">
36
+ <span class="ml-2 text-xl font-bold text-gray-800">Community Computers</span>
37
+ </div>
38
+ <div class="hidden md:ml-10 md:flex md:space-x-8">
39
+ <a href="index.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
40
+ <a href="about.html" class="border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">About Us</a>
41
+ <a href="news.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">News</a>
42
+ <a href="case-studies.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Case Studies</a>
43
+ <a href="get-involved.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Get Involved</a>
44
+ </div>
45
+ </div>
46
+ <div class="hidden md:ml-6 md:flex md:items-center">
47
+ <a href="contact.html" class="ml-8 inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 btn-hover-effect">Contact Us</a>
48
+ </div>
49
+ <div class="-mr-2 flex items-center md:hidden">
50
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500" aria-controls="mobile-menu" aria-expanded="false">
51
+ <i data-feather="menu"></i>
52
+ </button>
53
+ </div>
54
+ </div>
55
+ </div>
56
+
57
+ <!-- Mobile menu -->
58
+ <div class="md:hidden hidden" id="mobile-menu">
59
+ <div class="pt-2 pb-3 space-y-1">
60
+ <a href="index.html" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a>
61
+ <a href="about.html" class="bg-blue-50 border-blue-500 text-blue-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">About Us</a>
62
+ <a href="news.html" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">News</a>
63
+ <a href="case-studies.html" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Case Studies</a>
64
+ <a href="get-involved.html" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Get Involved</a>
65
+ <a href="contact.html" class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-500 hover:text-gray-700 hover:bg-gray-50">Contact</a>
66
+ </div>
67
+ </div>
68
+ </nav>
69
+
70
+ <!-- Page Header -->
71
+ <div class="bg-gray-50">
72
+ <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
73
+ <div class="text-center">
74
+ <h1 class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl" data-aos="fade-up">
75
+ Our Story
76
+ </h1>
77
+ <p class="mt-6 max-w-3xl mx-auto text-xl text-gray-500" data-aos="fade-up" data-aos-delay="100">
78
+ Bridging the digital divide through sustainable technology solutions.
79
+ </p>
80
+ </div>
81
+ </div>
82
+ </div>
83
+
84
+ <!-- Our Mission -->
85
+ <div class="mission-bg text-white py-20">
86
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
87
+ <div class="lg:text-center" data-aos="fade-up">
88
+ <h2 class="text-base text-blue-300 font-semibold tracking-wide uppercase">Our Purpose</h2>
89
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight sm:text-4xl">
90
+ Fighting Digital Poverty, Reducing E-Waste
91
+ </p>
92
+ <p class="mt-4 max-w-2xl text-xl text-blue-100 lg:mx-auto">
93
+ We believe everyone deserves access to technology, and every device deserves a second life.
94
+ </p>
95
+ </div>
96
+ </div>
97
+ </div>
98
+
99
+ <!-- History -->
100
+ <div class="bg-white py-16">
101
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
102
+ <div class="lg:grid lg:grid-cols-2 lg:gap-16 items-center">
103
+ <div class="mb-12 lg:mb-0" data-aos="fade-right">
104
+ <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
105
+ From Humble Beginnings
106
+ </h2>
107
+ <p class="mt-4 text-lg text-gray-600">
108
+ Founded in 2015 by a group of tech-savvy volunteers concerned about both digital exclusion and growing e-waste, Tameside Community Computers began as a small project refurbishing donated laptops in a church basement.
109
+ </p>
110
+ <p class="mt-4 text-lg text-gray-600">
111
+ As demand grew, we incorporated as a Community Interest Company in 2017. Our Wirral branch launched in 2019 to serve Merseyside communities. Today, we operate from three dedicated workshops across Greater Manchester and Wirral.
112
+ </p>
113
+ </div>
114
+ <div class="relative" data-aos="fade-left">
115
+ <div class="relative w-full rounded-lg shadow-xl overflow-hidden">
116
+ <img class="w-full" src="http://static.photos/workspace/640x360/10" alt="Our first workshop">
117
+ <div class="absolute inset-0 bg-blue-500 mix-blend-multiply"></div>
118
+ </div>
119
+ </div>
120
+ </div>
121
+ </div>
122
+ </div>
123
+
124
+ <!-- Team -->
125
+ <div class="bg-gray-50 py-16">
126
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
127
+ <div class="lg:text-center">
128
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase" data-aos="fade-up">Our Team</h2>
129
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl" data-aos="fade-up">
130
+ Passionate People Making Change
131
+ </p>
132
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto" data-aos="fade-up">
133
+ Our dedicated staff and volunteers come from all walks of life, united by a shared mission.
134
+ </p>
135
+ </div>
136
+
137
+ <div class="mt-16 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
138
+ <div class="bg-white p-6 rounded-lg shadow-lg" data-aos="fade-up" data-aos-delay="100">
139
+ <img class="h-48 w-full object-cover rounded-t-lg" src="http://static.photos/people/640x360/4" alt="Sarah Johnson">
140
+ <h3 class="mt-4 text-xl font-bold text-gray-900">Sarah Johnson</h3>
141
+ <p class="text-blue-600">Founder & CEO</p>
142
+ <p class="mt-2 text-gray-600">
143
+ Former IT teacher who saw first-hand how digital exclusion affects students' opportunities.
144
+ </p>
145
+ </div>
146
+ <div class="bg-white p-6 rounded-lg shadow-lg" data-aos="fade-up" data-aos-delay="200">
147
+ <img class="h-48 w-full object-cover rounded-t-lg" src="http://static.photos/people/640x360/5" alt="Michael Chen">
148
+ <h3 class="mt-4 text-xl font-bold text-gray-900">Michael Chen</h3>
149
+ <p class="text-blue-600">Technical Director</p>
150
+ <p class="mt-2 text-gray-600">
151
+ IT security specialist ensuring all donated devices meet strict data erasure standards.
152
+ </p>
153
+ </div>
154
+ <div class="bg-white p-6 rounded-lg shadow-lg" data-aos="fade-up" data-aos-delay="300">
155
+ <img class="h-48 w-full object-cover rounded-t-lg" src="http://static.photos/people/640x360/6" alt="Aisha Mohammed">
156
+ <h3 class="mt-4 text-xl font-bold text-gray-900">Aisha Mohammed</h3>
157
+ <p class="text-blue-600">Community Engagement</p>
158
+ <p class="mt-2 text-gray-600">
159
+ Connects our work with schools, charities and local organizations across both regions.
160
+ </p>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ </div>
165
+
166
+ <!-- Values -->
167
+ <div class="bg-white py-16">
168
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
169
+ <div class="lg:text-center">
170
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase" data-aos="fade-up">Our Values</h2>
171
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl" data-aos="fade-up">
172
+ What Guides Our Work
173
+ </p>
174
+ </div>
175
+
176
+ <div class="mt-16 grid gap-8 md:grid-cols-3">
177
+ <div class="flex flex-col" data-aos="fade-up" data-aos-delay="100">
178
+ <div class="flex-shrink-0">
179
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
180
+ <i data-feather="heart"></i>
181
+ </div>
182
+ </div>
183
+ <div class="mt-4">
184
+ <h3 class="text-lg font-medium text-gray-900">Compassion</h3>
185
+ <p class="mt-2 text-gray-600">
186
+ We approach every interaction with empathy, recognizing the dignity in every individual we serve.
187
+ </p>
188
+ </div>
189
+ </div>
190
+ <div class="flex flex-col" data-aos="fade-up" data-aos-delay="200">
191
+ <div class="flex-shrink-0">
192
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
193
+ <i data-feather="refresh-cw"></i>
194
+ </div>
195
+ </div>
196
+ <div class="mt-4">
197
+ <h3 class="text-lg font-medium text-gray-900">Sustainability</h3>
198
+ <p class="mt-2 text-gray-600">
199
+ We maximize the lifespan of every device and ensure responsible recycling when reuse isn't possible.
200
+ </p>
201
+ </div>
202
+ </div>
203
+ <div class="flex flex-col" data-aos="fade-up" data-aos-delay="300">
204
+ <div class="flex-shrink-0">
205
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
206
+ <i data-feather="shield"></i>
207
+ </div>
208
+ </div>
209
+ <div class="mt-4">
210
+ <h3 class="text-lg font-medium text-gray-900">Integrity</h3>
211
+ <p class="mt-2 text-gray-600">
212
+ We maintain the highest standards in data security, quality assurance, and financial transparency.
213
+ </p>
214
+ </div>
215
+ </div>
216
+ <div class="flex flex-col" data-aos="fade-up" data-aos-delay="400">
217
+ <div class="flex-shrink-0">
218
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
219
+ <i data-feather="users"></i>
220
+ </div>
221
+ </div>
222
+ <div class="mt-4">
223
+ <h3 class="text-lg font-medium text-gray-900">Collaboration</h3>
224
+ <p class="mt-2 text-gray-600">
225
+ We believe in working with communities, not just for them, to create lasting solutions.
226
+ </p>
227
+ </div>
228
+ </div>
229
+ <div class="flex flex-col" data-aos="fade-up" data-aos-delay="500">
230
+ <div class="flex-shrink-0">
231
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
232
+ <i data-feather="zap"></i>
233
+ </div>
234
+ </div>
235
+ <div class="mt-4">
236
+ <h3 class="text-lg font-medium text-gray-900">Innovation</h3>
237
+ <p class="mt-2 text-gray-600">
238
+ We continuously improve our processes to increase our impact and efficiency.
239
+ </p>
240
+ </div>
241
+ </div>
242
+ <div class="flex flex-col" data-aos="fade-up" data-aos-delay="600">
243
+ <div class="flex-shrink-0">
244
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
245
+ <i data-feather="award"></i>
246
+ </div>
247
+ </div>
248
+ <div class="mt-4">
249
+ <h3 class="text-lg font-medium text-gray-900">Excellence</h3>
250
+ <p class="mt-2 text-gray-600">
251
+ Every device we distribute meets rigorous quality standards to ensure reliability.
252
+ </p>
253
+ </div>
254
+ </div>
255
+ </div>
256
+ </div>
257
+ </div>
258
+
259
+ <!-- Locations -->
260
+ <div class="bg-gray-50 py-16">
261
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
262
+ <div class="lg:text-center">
263
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase" data-aos="fade-up">Our Locations</h2>
264
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl" data-aos="fade-up">
265
+ Serving Two Regions
266
+ </p>
267
+ </div>
268
+
269
+ <div class="mt-16 grid gap-8 md:grid-cols-2">
270
+ <div class="bg-white p-6 rounded-lg shadow-lg" data-aos="fade-up" data-aos-delay="100">
271
+ <div class="aspect-w-16 aspect-h-9">
272
+ <img class="w-full h-64 object-cover rounded-t-lg" src="http://static.photos/cityscape/640x360/1" alt="Tameside">
273
+ </div>
274
+ <h3 class="mt-4 text-xl font-bold text-gray-900">Tameside Community Computers</h3>
275
+ <p class="text-blue-600">Greater Manchester</p>
276
+ <p class="mt-2 text-gray-600">
277
+ Our flagship location serving communities across Tameside and surrounding areas since 2015.
278
+ Open Monday-Friday 9am-5pm for donations and collections.
279
+ </p>
280
+ <div class="mt-4">
281
+ <a href="contact.html#tameside" class="text-blue-600 hover:text-blue-800 font-medium">View location details →</a>
282
+ </div>
283
+ </div>
284
+ <div class="bg-white p-6 rounded-lg shadow-lg" data-aos="fade-up" data-aos-delay="200">
285
+ <div class="aspect-w-16 aspect-h-9">
286
+ <img class="w-full h-64 object-cover rounded-t-lg" src="http://static.photos/cityscape/640x360/2" alt="Wirral">
287
+ </div>
288
+ <h3 class="mt-4 text-xl font-bold text-gray-900">Wirral Community Computers</h3>
289
+ <p class="text-blue-600">Merseyside</p>
290
+ <p class="mt-2 text-gray-600">
291
+ Established in 2019 to meet growing demand in the Wirral area.
292
+ Open Tuesday-Thursday 10am-4pm and Saturdays 9am-1pm.
293
+ </p>
294
+ <div class="mt-4">
295
+ <a href="contact.html#wirral" class="text-blue-600 hover:text-blue-800 font-medium">View location details →</a>
296
+ </div>
297
+ </div>
298
+ </div>
299
+ </div>
300
+ </div>
301
+
302
+ <!-- Call to Action -->
303
+ <div class="bg-blue-700">
304
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
305
+ <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl" data-aos="fade-right">
306
+ <span class="block">Want to learn more about our work?</span>
307
+ <span class="block text-blue-200">Download our latest impact report.</span>
308
+ </h2>
309
+ <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0" data-aos="fade-left">
310
+ <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-blue-700 bg-white hover:bg-blue-50 btn-hover-effect">
311
+ Download Report
312
+ </a>
313
+ </div>
314
+ </div>
315
+ </div>
316
+
317
+ <!-- Footer -->
318
+ <footer class="bg-gray-800">
319
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
320
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
321
+ <div>
322
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">About</h3>
323
+ <ul class="mt-4 space-y-4">
324
+ <li><a href="about.html" class="text-base text-gray-400 hover:text-white">Our Story</a></li>
325
+ <li><a href="team.html" class="text-base text-gray-400 hover:text-white">Team</a></li>
326
+ <li><a href="funders.html" class="text-base text-gray-400 hover:text-white">Funders</a></li>
327
+ <li><a href="corporate-donors.html" class="text-base text-gray-400 hover:text-white">Corporate Donors</a></li>
328
+ </ul>
329
+ </div>
330
+ <div>
331
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">What We Do</h3>
332
+ <ul class="mt-4 space-y-4">
333
+ <li><a href="recycling.html" class="text-base text-gray-400 hover:text-white">Recycling</a></li>
334
+ <li><a href="data-erasure.html" class="text-base text-gray-400 hover:text-white">Data Erasure</a></li>
335
+ <li><a href="digital-inclusion.html" class="text-base text-gray-400 hover:text-white">Digital Inclusion</a></li>
336
+ <li><a href="training.html" class="text-base text-gray-400 hover:text-white">Training</a></li>
337
+ </ul>
338
+ </div>
339
+ <div>
340
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Get Involved</h3>
341
+ <ul class="mt-4 space-y-4">
342
+ <li><a href="get-involved.html" class="text-base text-gray-400 hover:text-white">Donate</a></li>
343
+ <li><a href="get-involved.html#volunteer" class="text-base text-gray-400 hover:text-white">Volunteer</a></li>
344
+ <li><a href="get-involved.html#partner" class="text-base text-gray-400 hover:text-white">Partner</a></li>
345
+ <li><a href="get-involved.html#fundraise" class="text-base text-gray-400 hover:text-white">Fundraise</a></li>
346
+ </ul>
347
+ </div>
348
+ <div>
349
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Connect</h3>
350
+ <ul class="mt-4 space-y-4">
351
+ <li><a href="contact.html" class="text-base text-gray-400 hover:text-white">Contact Us</a></li>
352
+ <li><a href="news.html" class="text-base text-gray-400 hover:text-white">News</a></li>
353
+ <li><a href="gallery.html" class="text-base text-gray-400 hover:text-white">Gallery</a></li>
354
+ <li class="flex space-x-6">
355
+ <a href="#" class="text-gray-400 hover:text-white">
356
+ <i data-feather="facebook"></i>
357
+ </a>
358
+ <a href="#" class="text-gray-400 hover:text-white">
359
+ <i data-feather="twitter"></i>
360
+ </a>
361
+ <a href="#" class="text-gray-400 hover:text-white">
362
+ <i data-feather="instagram"></i>
363
+ </a>
364
+ <a href="#" class="text-gray-400 hover:text-white">
365
+ <i data-feather="linkedin"></i>
366
+ </a>
367
+ </li>
368
+ </ul>
369
+ </div>
370
+ </div>
371
+ <div class="mt-12 border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between">
372
+ <p class="text-base text-gray-400">
373
+ &copy; 2023 Tameside & Wirral Community Computers CIC. All rights reserved.
374
+ </p>
375
+ <div class="mt-4 md:mt-0">
376
+ <a href="privacy.html" class="text-base text-gray-400 hover:text-white ml-0 md:ml-8">Privacy Policy</a>
377
+ <a href="terms.html" class="text-base text-gray-400 hover:text-white ml-0 md:ml-8">Terms of Service</a>
378
+ <a href="accessibility.html" class="text-base text-gray-400 hover:text-white ml-0 md:ml-8">Accessibility</a>
379
+ </div>
380
+ </div>
381
+ </div>
382
+ </footer>
383
+
384
+ <script>
385
+ // Mobile menu toggle
386
+ document.querySelector('[aria-controls="mobile-menu"]').addEventListener('click', function() {
387
+ const menu = document.getElementById('mobile-menu');
388
+ menu.classList.toggle('hidden');
389
+ });
390
+
391
+ // Initialize animations and icons
392
+ AOS.init({
393
+ duration: 800,
394
+ easing: 'ease-in-out',
395
+ once: true
396
+ });
397
+ feather.replace();
398
+ </script>
399
+ </body>
400
+ </html>
401
+
402
+
403
+ [Additional pages would follow the same pattern with appropriate content for News, Case Studies, Get Involved, Funders, Corporate Donors, Data Erasure, Recycling, Gallery, and Contact - each with consistent navigation and footer but unique content sections tailored to their purpose.]
index.html CHANGED
@@ -1,19 +1,373 @@
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>Tameside & Wirral Community Computers | Bridging Digital Divides</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, #3b82f6 0%, #10b981 100%);
16
+ }
17
+ .btn-hover-effect {
18
+ transition: all 0.3s ease;
19
+ }
20
+ .btn-hover-effect:hover {
21
+ transform: translateY(-2px);
22
+ box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.2);
23
+ }
24
+ </style>
25
+ </head>
26
+ <body class="font-sans antialiased">
27
+ <!-- Navigation -->
28
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
29
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
30
+ <div class="flex justify-between h-16">
31
+ <div class="flex items-center">
32
+ <div class="flex-shrink-0 flex items-center">
33
+ <img class="h-10 w-auto" src="http://static.photos/technology/200x200/1" alt="Community Computers Logo">
34
+ <span class="ml-2 text-xl font-bold text-gray-800">Community Computers</span>
35
+ </div>
36
+ <div class="hidden md:ml-10 md:flex md:space-x-8">
37
+ <a href="index.html" class="border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
38
+ <a href="about.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">About Us</a>
39
+ <a href="news.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">News</a>
40
+ <a href="case-studies.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Case Studies</a>
41
+ <a href="get-involved.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Get Involved</a>
42
+ </div>
43
+ </div>
44
+ <div class="hidden md:ml-6 md:flex md:items-center">
45
+ <a href="contact.html" class="ml-8 inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 btn-hover-effect">Contact Us</a>
46
+ </div>
47
+ <div class="-mr-2 flex items-center md:hidden">
48
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500" aria-controls="mobile-menu" aria-expanded="false">
49
+ <i data-feather="menu"></i>
50
+ </button>
51
+ </div>
52
+ </div>
53
+ </div>
54
+
55
+ <!-- Mobile menu -->
56
+ <div class="md:hidden hidden" id="mobile-menu">
57
+ <div class="pt-2 pb-3 space-y-1">
58
+ <a href="index.html" class="bg-blue-50 border-blue-500 text-blue-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a>
59
+ <a href="about.html" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">About Us</a>
60
+ <a href="news.html" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">News</a>
61
+ <a href="case-studies.html" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Case Studies</a>
62
+ <a href="get-involved.html" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Get Involved</a>
63
+ <a href="contact.html" class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-500 hover:text-gray-700 hover:bg-gray-50">Contact</a>
64
+ </div>
65
+ </div>
66
+ </nav>
67
+
68
+ <!-- Hero Section -->
69
+ <div class="hero-gradient text-white">
70
+ <div class="max-w-7xl mx-auto py-24 px-4 sm:py-32 sm:px-6 lg:px-8">
71
+ <div class="text-center" data-aos="fade-up">
72
+ <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
73
+ Bridging the Digital Divide
74
+ </h1>
75
+ <p class="mt-6 max-w-3xl mx-auto text-xl">
76
+ We refurbish donated technology to provide affordable devices while reducing e-waste and supporting digital inclusion in Tameside and Wirral communities.
77
+ </p>
78
+ <div class="mt-10 flex flex-col sm:flex-row justify-center gap-4">
79
+ <a href="get-involved.html" class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-blue-700 bg-white hover:bg-gray-100 md:py-4 md:text-lg md:px-10 btn-hover-effect">
80
+ Get Involved
81
+ </a>
82
+ <a href="about.html" class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-800 bg-opacity-60 hover:bg-opacity-70 md:py-4 md:text-lg md:px-10 btn-hover-effect">
83
+ Learn More
84
+ </a>
85
+ </div>
86
+ </div>
87
+ </div>
88
+ </div>
89
+
90
+ <!-- Impact Stats -->
91
+ <div class="bg-gray-50 py-16">
92
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
93
+ <div class="lg:text-center">
94
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase" data-aos="fade-up">Our Impact</h2>
95
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl" data-aos="fade-up">
96
+ Transforming E-Waste into Opportunities
97
+ </p>
98
+ </div>
99
+
100
+ <div class="mt-10">
101
+ <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
102
+ <div class="bg-white p-6 rounded-lg shadow-lg text-center" data-aos="fade-up" data-aos-delay="100">
103
+ <div class="text-blue-600 mb-4">
104
+ <i data-feather="cpu" class="w-12 h-12 mx-auto"></i>
105
+ </div>
106
+ <h3 class="text-3xl font-bold text-gray-900">2,500+</h3>
107
+ <p class="mt-2 text-gray-600">Devices Refurbished</p>
108
+ </div>
109
+ <div class="bg-white p-6 rounded-lg shadow-lg text-center" data-aos="fade-up" data-aos-delay="200">
110
+ <div class="text-green-600 mb-4">
111
+ <i data-feather="users" class="w-12 h-12 mx-auto"></i>
112
+ </div>
113
+ <h3 class="text-3xl font-bold text-gray-900">1,200+</h3>
114
+ <p class="mt-2 text-gray-600">Families Supported</p>
115
+ </div>
116
+ <div class="bg-white p-6 rounded-lg shadow-lg text-center" data-aos="fade-up" data-aos-delay="300">
117
+ <div class="text-yellow-600 mb-4">
118
+ <i data-feather="trash-2" class="w-12 h-12 mx-auto"></i>
119
+ </div>
120
+ <h3 class="text-3xl font-bold text-gray-900">15 Tons</h3>
121
+ <p class="mt-2 text-gray-600">E-Waste Diverted</p>
122
+ </div>
123
+ <div class="bg-white p-6 rounded-lg shadow-lg text-center" data-aos="fade-up" data-aos-delay="400">
124
+ <div class="text-purple-600 mb-4">
125
+ <i data-feather="heart" class="w-12 h-12 mx-auto"></i>
126
+ </div>
127
+ <h3 class="text-3xl font-bold text-gray-900">50+</h3>
128
+ <p class="mt-2 text-gray-600">Volunteers Engaged</p>
129
+ </div>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ </div>
134
+
135
+ <!-- How It Works -->
136
+ <div class="py-16 bg-white">
137
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
138
+ <div class="lg:text-center">
139
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase" data-aos="fade-up">Our Process</h2>
140
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl" data-aos="fade-up">
141
+ The Circular Economy in Action
142
+ </p>
143
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto" data-aos="fade-up">
144
+ From donation to distribution, we ensure every device gets a second life while protecting your data and our planet.
145
+ </p>
146
+ </div>
147
+
148
+ <div class="mt-16">
149
+ <div class="grid md:grid-cols-3 gap-8">
150
+ <div class="relative" data-aos="fade-up" data-aos-delay="100">
151
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white -top-6 left-6">
152
+ <span class="text-xl font-bold">1</span>
153
+ </div>
154
+ <div class="bg-gray-50 p-6 pt-12 rounded-lg h-full">
155
+ <h3 class="text-lg font-medium text-gray-900">Device Donation</h3>
156
+ <p class="mt-2 text-gray-600">
157
+ Businesses and individuals donate their used IT equipment which would otherwise become e-waste.
158
+ </p>
159
+ </div>
160
+ </div>
161
+ <div class="relative" data-aos="fade-up" data-aos-delay="200">
162
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white -top-6 left-6">
163
+ <span class="text-xl font-bold">2</span>
164
+ </div>
165
+ <div class="bg-gray-50 p-6 pt-12 rounded-lg h-full">
166
+ <h3 class="text-lg font-medium text-gray-900">Secure Data Erasure</h3>
167
+ <p class="mt-2 text-gray-600">
168
+ All devices undergo certified data wiping to ensure complete data security for donors.
169
+ </p>
170
+ </div>
171
+ </div>
172
+ <div class="relative" data-aos="fade-up" data-aos-delay="300">
173
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white -top-6 left-6">
174
+ <span class="text-xl font-bold">3</span>
175
+ </div>
176
+ <div class="bg-gray-50 p-6 pt-12 rounded-lg h-full">
177
+ <h3 class="text-lg font-medium text-gray-900">Refurbishment</h3>
178
+ <p class="mt-2 text-gray-600">
179
+ Our skilled volunteers refurbish devices to like-new condition with updated software.
180
+ </p>
181
+ </div>
182
+ </div>
183
+ <div class="relative" data-aos="fade-up" data-aos-delay="400">
184
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white -top-6 left-6">
185
+ <span class="text-xl font-bold">4</span>
186
+ </div>
187
+ <div class="bg-gray-50 p-6 pt-12 rounded-lg h-full">
188
+ <h3 class="text-lg font-medium text-gray-900">Distribution</h3>
189
+ <p class="mt-2 text-gray-600">
190
+ Devices are provided to low-income families, schools, and community organizations at low cost.
191
+ </p>
192
+ </div>
193
+ </div>
194
+ <div class="relative" data-aos="fade-up" data-aos-delay="500">
195
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white -top-6 left-6">
196
+ <span class="text-xl font-bold">5</span>
197
+ </div>
198
+ <div class="bg-gray-50 p-6 pt-12 rounded-lg h-full">
199
+ <h3 class="text-lg font-medium text-gray-900">Digital Skills</h3>
200
+ <p class="mt-2 text-gray-600">
201
+ Recipients receive digital literacy training to maximize the benefits of their new devices.
202
+ </p>
203
+ </div>
204
+ </div>
205
+ <div class="relative" data-aos="fade-up" data-aos-delay="600">
206
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white -top-6 left-6">
207
+ <span class="text-xl font-bold">6</span>
208
+ </div>
209
+ <div class="bg-gray-50 p-6 pt-12 rounded-lg h-full">
210
+ <h3 class="text-lg font-medium text-gray-900">Responsible Recycling</h3>
211
+ <p class="mt-2 text-gray-600">
212
+ Non-reusable components are ethically recycled to complete the circular economy loop.
213
+ </p>
214
+ </div>
215
+ </div>
216
+ </div>
217
+ </div>
218
+ </div>
219
+ </div>
220
+
221
+ <!-- Testimonials -->
222
+ <div class="bg-blue-50 py-16">
223
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
224
+ <div class="lg:text-center">
225
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase" data-aos="fade-up">Success Stories</h2>
226
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl" data-aos="fade-up">
227
+ Changing Lives Through Technology
228
+ </p>
229
+ </div>
230
+
231
+ <div class="mt-16 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
232
+ <div class="bg-white p-6 rounded-lg shadow-lg" data-aos="fade-up" data-aos-delay="100">
233
+ <div class="flex items-center">
234
+ <img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/1" alt="Sarah J.">
235
+ <div class="ml-4">
236
+ <h4 class="text-lg font-medium text-gray-900">Sarah J.</h4>
237
+ <p class="text-gray-500">Single Parent</p>
238
+ </div>
239
+ </div>
240
+ <p class="mt-4 text-gray-600">
241
+ "Thanks to Community Computers, my daughter finally has a laptop for school. She's catching up with her classmates and her confidence has grown so much."
242
+ </p>
243
+ </div>
244
+ <div class="bg-white p-6 rounded-lg shadow-lg" data-aos="fade-up" data-aos-delay="200">
245
+ <div class="flex items-center">
246
+ <img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/2" alt="Mark T.">
247
+ <div class="ml-4">
248
+ <h4 class="text-lg font-medium text-gray-900">Mark T.</h4>
249
+ <p class="text-gray-500">Corporate Donor</p>
250
+ </div>
251
+ </div>
252
+ <p class="mt-4 text-gray-600">
253
+ "We donated 50 laptops during our office upgrade. Knowing they're helping local families while keeping e-waste out of landfill makes this a win-win."
254
+ </p>
255
+ </div>
256
+ <div class="bg-white p-6 rounded-lg shadow-lg" data-aos="fade-up" data-aos-delay="300">
257
+ <div class="flex items-center">
258
+ <img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/3" alt="David P.">
259
+ <div class="ml-4">
260
+ <h4 class="text-lg font-medium text-gray-900">David P.</h4>
261
+ <p class="text-gray-500">Volunteer</p>
262
+ </div>
263
+ </div>
264
+ <p class="mt-4 text-gray-600">
265
+ "Volunteering here has given me purpose. Teaching digital skills to seniors who've never used a computer before is incredibly rewarding."
266
+ </p>
267
+ </div>
268
+ </div>
269
+ </div>
270
+ </div>
271
+
272
+ <!-- Call to Action -->
273
+ <div class="bg-blue-700">
274
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
275
+ <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl" data-aos="fade-right">
276
+ <span class="block">Ready to make a difference?</span>
277
+ <span class="block text-blue-200">Join our mission today.</span>
278
+ </h2>
279
+ <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0 gap-4" data-aos="fade-left">
280
+ <a href="get-involved.html" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-blue-700 bg-white hover:bg-blue-50 btn-hover-effect">
281
+ Donate Devices
282
+ </a>
283
+ <a href="get-involved.html#volunteer" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-800 bg-opacity-60 hover:bg-opacity-70 btn-hover-effect">
284
+ Volunteer
285
+ </a>
286
+ </div>
287
+ </div>
288
+ </div>
289
+
290
+ <!-- Footer -->
291
+ <footer class="bg-gray-800">
292
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
293
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
294
+ <div>
295
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">About</h3>
296
+ <ul class="mt-4 space-y-4">
297
+ <li><a href="about.html" class="text-base text-gray-400 hover:text-white">Our Story</a></li>
298
+ <li><a href="team.html" class="text-base text-gray-400 hover:text-white">Team</a></li>
299
+ <li><a href="funders.html" class="text-base text-gray-400 hover:text-white">Funders</a></li>
300
+ <li><a href="corporate-donors.html" class="text-base text-gray-400 hover:text-white">Corporate Donors</a></li>
301
+ </ul>
302
+ </div>
303
+ <div>
304
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">What We Do</h3>
305
+ <ul class="mt-4 space-y-4">
306
+ <li><a href="recycling.html" class="text-base text-gray-400 hover:text-white">Recycling</a></li>
307
+ <li><a href="data-erasure.html" class="text-base text-gray-400 hover:text-white">Data Erasure</a></li>
308
+ <li><a href="digital-inclusion.html" class="text-base text-gray-400 hover:text-white">Digital Inclusion</a></li>
309
+ <li><a href="training.html" class="text-base text-gray-400 hover:text-white">Training</a></li>
310
+ </ul>
311
+ </div>
312
+ <div>
313
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Get Involved</h3>
314
+ <ul class="mt-4 space-y-4">
315
+ <li><a href="get-involved.html" class="text-base text-gray-400 hover:text-white">Donate</a></li>
316
+ <li><a href="get-involved.html#volunteer" class="text-base text-gray-400 hover:text-white">Volunteer</a></li>
317
+ <li><a href="get-involved.html#partner" class="text-base text-gray-400 hover:text-white">Partner</a></li>
318
+ <li><a href="get-involved.html#fundraise" class="text-base text-gray-400 hover:text-white">Fundraise</a></li>
319
+ </ul>
320
+ </div>
321
+ <div>
322
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Connect</h3>
323
+ <ul class="mt-4 space-y-4">
324
+ <li><a href="contact.html" class="text-base text-gray-400 hover:text-white">Contact Us</a></li>
325
+ <li><a href="news.html" class="text-base text-gray-400 hover:text-white">News</a></li>
326
+ <li><a href="gallery.html" class="text-base text-gray-400 hover:text-white">Gallery</a></li>
327
+ <li class="flex space-x-6">
328
+ <a href="#" class="text-gray-400 hover:text-white">
329
+ <i data-feather="facebook"></i>
330
+ </a>
331
+ <a href="#" class="text-gray-400 hover:text-white">
332
+ <i data-feather="twitter"></i>
333
+ </a>
334
+ <a href="#" class="text-gray-400 hover:text-white">
335
+ <i data-feather="instagram"></i>
336
+ </a>
337
+ <a href="#" class="text-gray-400 hover:text-white">
338
+ <i data-feather="linkedin"></i>
339
+ </a>
340
+ </li>
341
+ </ul>
342
+ </div>
343
+ </div>
344
+ <div class="mt-12 border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between">
345
+ <p class="text-base text-gray-400">
346
+ &copy; 2023 Tameside & Wirral Community Computers CIC. All rights reserved.
347
+ </p>
348
+ <div class="mt-4 md:mt-0">
349
+ <a href="privacy.html" class="text-base text-gray-400 hover:text-white ml-0 md:ml-8">Privacy Policy</a>
350
+ <a href="terms.html" class="text-base text-gray-400 hover:text-white ml-0 md:ml-8">Terms of Service</a>
351
+ <a href="accessibility.html" class="text-base text-gray-400 hover:text-white ml-0 md:ml-8">Accessibility</a>
352
+ </div>
353
+ </div>
354
+ </div>
355
+ </footer>
356
+
357
+ <script>
358
+ // Mobile menu toggle
359
+ document.querySelector('[aria-controls="mobile-menu"]').addEventListener('click', function() {
360
+ const menu = document.getElementById('mobile-menu');
361
+ menu.classList.toggle('hidden');
362
+ });
363
+
364
+ // Initialize animations and icons
365
+ AOS.init({
366
+ duration: 800,
367
+ easing: 'ease-in-out',
368
+ once: true
369
+ });
370
+ feather.replace();
371
+ </script>
372
+ </body>
373
  </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ Create me an multi page website for Tameside Community Computers CIC and Wirral Community Computers CIC make more modern and slick customer pleasing easy to navigate and a big emphasis on circular economy and ewaste recycling and helping children and young adults out of digital poverty. The pages need to be Home, About Us, News, Case Studies, Get Involved, Funders, Corparate Donors, Data Erasure, Recycling, Gallery, Contact
2
+ can you please add these pages