Hugging Face's logo

Spaces:
mindwavead
/
ghjngh
Running

App Files Community
mindwavead commited on
Commit
74aa2cf
·
verified ·
1 Parent(s): b5e3906

undefined - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +5 -3
  2. index.html +455 -18
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ghjngh
3
- emoji: ⚡
4
  colorFrom: purple
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: ghjngh
3
+ emoji: 🐳
4
  colorFrom: purple
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
index.html CHANGED
@@ -1,19 +1,456 @@
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
+ <meta name="description" content="GreenFlow - Eco-friendly refill stations for cleaning products and office supplies in Multan. Reduce waste, save costs, and build a sustainable workplace.">
7
+ <meta name="keywords" content="eco-friendly refill, sustainable office, cleaning product refill, Multan green business, plastic-free office">
8
+ <title>GreenFlow - Sustainable Refills for a Cleaner Tomorrow</title>
9
+ <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🍃</text></svg>">
10
+ <script src="https://cdn.tailwindcss.com"></script>
11
+ <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&display=swap" rel="stylesheet">
12
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
13
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
14
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
15
+ <script src="https://unpkg.com/feather-icons"></script>
16
+ <style>
17
+ body {
18
+ font-family: 'Nunito', sans-serif;
19
+ scroll-behavior: smooth;
20
+ }
21
+ .hero-bg {
22
+ background: linear-gradient(135deg, #e0f7e0 0%, #c8e6c9 100%);
23
+ }
24
+ .loading-screen {
25
+ position: fixed;
26
+ top: 0;
27
+ left: 0;
28
+ width: 100%;
29
+ height: 100%;
30
+ background: #f0fff0;
31
+ display: flex;
32
+ justify-content: center;
33
+ align-items: center;
34
+ z-index: 9999;
35
+ transition: opacity 0.5s, visibility 0.5s;
36
+ }
37
+ .loading-hidden {
38
+ opacity: 0;
39
+ visibility: hidden;
40
+ }
41
+ .counter {
42
+ font-size: 2.5rem;
43
+ font-weight: 700;
44
+ }
45
+ </style>
46
+ </head>
47
+ <body class="bg-white text-gray-800">
48
+ <!-- Loading Screen -->
49
+ <div id="loadingScreen" class="loading-screen">
50
+ <div class="text-center">
51
+ <div class="text-5xl mb-4">🍃</div>
52
+ <div class="text-xl font-semibold text-green-700">GreenFlow</div>
53
+ </div>
54
+ </div>
55
+
56
+ <!-- Navbar -->
57
+ <nav class="sticky top-0 z-50 bg-white shadow-md py-4 px-6 flex justify-between items-center">
58
+ <div class="flex items-center">
59
+ <span class="text-2xl font-bold text-green-700">GreenFlow</span>
60
+ </div>
61
+ <div class="hidden md:flex space-x-8">
62
+ <a href="#about" class="hover:text-green-600 transition">About</a>
63
+ <a href="#services" class="hover:text-green-600 transition">Services</a>
64
+ <a href="#how-it-works" class="hover:text-green-600 transition">How It Works</a>
65
+ <a href="#benefits" class="hover:text-green-600 transition">Benefits</a>
66
+ <a href="#contact" class="hover:text-green-600 transition">Contact</a>
67
+ </div>
68
+ <button class="md:hidden text-green-700">
69
+ <i data-feather="menu"></i>
70
+ </button>
71
+ </nav>
72
+
73
+ <!-- Hero Section -->
74
+ <section class="hero-bg py-20 px-6 text-center">
75
+ <div class="max-w-3xl mx-auto" data-aos="fade-up">
76
+ <h1 class="text-4xl md:text-5xl font-bold mb-4 text-green-800">GreenFlow – Sustainable Refills for a Cleaner Tomorrow</h1>
77
+ <p class="text-lg md:text-xl mb-8 text-gray-700">Helping offices in Multan save costs, reduce waste, and go green.</p>
78
+ <a href="#contact" class="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-8 rounded-full transition duration-300">Get Started</a>
79
+ </div>
80
+ </section>
81
+
82
+ <!-- About Us -->
83
+ <section id="about" class="py-16 px-6 bg-gray-50">
84
+ <div class="max-w-6xl mx-auto" data-aos="fade-up">
85
+ <h2 class="text-3xl font-bold mb-12 text-center text-green-800">About GreenFlow</h2>
86
+ <div class="grid md:grid-cols-2 gap-12 items-center">
87
+ <div>
88
+ <h3 class="text-xl font-semibold mb-4 text-green-700">Our Mission</h3>
89
+ <p class="mb-6">To provide eco-friendly, waste-reducing solutions that help businesses operate sustainably while reducing their environmental footprint.</p>
90
+
91
+ <h3 class="text-xl font-semibold mb-4 text-green-700">Our Vision</h3>
92
+ <p>Cleaner workplaces and sustainable cities through innovative refill systems that make going green accessible and affordable.</p>
93
+ </div>
94
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-full h-64 md:h-96 flex items-center justify-center text-gray-500">
95
+ Image Placeholder
96
+ </div>
97
+ </div>
98
+ </div>
99
+ </section>
100
+
101
+ <!-- Services -->
102
+ <section id="services" class="py-16 px-6">
103
+ <div class="max-w-6xl mx-auto" data-aos="fade-up">
104
+ <h2 class="text-3xl font-bold mb-12 text-center text-green-800">Our Services</h2>
105
+ <div class="grid md:grid-cols-3 gap-8">
106
+ <div class="bg-white p-6 rounded-xl shadow-md border border-green-100 text-center" data-aos="fade-up" data-aos-delay="100">
107
+ <div class="text-green-600 mb-4 inline-block">
108
+ <i data-feather="droplet" class="w-12 h-12"></i>
109
+ </div>
110
+ <h3 class="text-xl font-semibold mb-3">Refill Stations</h3>
111
+ <p>Installation of eco-stations for dishwashing liquid, handwash, multipurpose cleaners, and more.</p>
112
+ </div>
113
+
114
+ <div class="bg-white p-6 rounded-xl shadow-md border border-green-100 text-center" data-aos="fade-up" data-aos-delay="200">
115
+ <div class="text-green-600 mb-4 inline-block">
116
+ <i data-feather="package" class="w-12 h-12"></i>
117
+ </div>
118
+ <h3 class="text-xl font-semibold mb-3">Bulk Supplies</h3>
119
+ <p>Eco-friendly bulk cleaning and office supplies delivered directly to your office.</p>
120
+ </div>
121
+
122
+ <div class="bg-white p-6 rounded-xl shadow-md border border-green-100 text-center" data-aos="fade-up" data-aos-delay="300">
123
+ <div class="text-green-600 mb-4 inline-block">
124
+ <i data-feather="settings" class="w-12 h-12"></i>
125
+ </div>
126
+ <h3 class="text-xl font-semibold mb-3">Consulting</h3>
127
+ <p>Sustainability consulting and maintenance services to keep your green initiatives running smoothly.</p>
128
+ </div>
129
+ </div>
130
+ </div>
131
+ </section>
132
+
133
+ <!-- How It Works -->
134
+ <section id="how-it-works" class="py-16 px-6 bg-gray-50">
135
+ <div class="max-w-6xl mx-auto" data-aos="fade-up">
136
+ <h2 class="text-3xl font-bold mb-12 text-center text-green-800">How It Works</h2>
137
+ <div class="grid md:grid-cols-3 gap-8">
138
+ <div class="text-center" data-aos="fade-up" data-aos-delay="100">
139
+ <div class="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center mx-auto mb-4">
140
+ <span class="text-green-700 font-bold text-xl">1</span>
141
+ </div>
142
+ <h3 class="text-xl font-semibold mb-3">Sign Up</h3>
143
+ <p>Offices register for our refill solutions tailored to their needs.</p>
144
+ </div>
145
+
146
+ <div class="text-center" data-aos="fade-up" data-aos-delay="200">
147
+ <div class="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center mx-auto mb-4">
148
+ <span class="text-green-700 font-bold text-xl">2</span>
149
+ </div>
150
+ <h3 class="text-xl font-semibold mb-3">Installation</h3>
151
+ <p>We install eco-friendly refill stations at your workplace.</p>
152
+ </div>
153
+
154
+ <div class="text-center" data-aos="fade-up" data-aos-delay="300">
155
+ <div class="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center mx-auto mb-4">
156
+ <span class="text-green-700 font-bold text-xl">3</span>
157
+ </div>
158
+ <h3 class="text-xl font-semibold mb-3">Regular Refills</h3>
159
+ <p>Ongoing refills reduce waste and keep your supplies fresh.</p>
160
+ </div>
161
+ </div>
162
+ </div>
163
+ </section>
164
+
165
+ <!-- Benefits -->
166
+ <section id="benefits" class="py-16 px-6">
167
+ <div class="max-w-6xl mx-auto" data-aos="fade-up">
168
+ <h2 class="text-3xl font-bold mb-12 text-center text-green-800">Why Choose GreenFlow?</h2>
169
+ <div class="grid md:grid-cols-3 gap-8">
170
+ <div class="bg-white p-6 rounded-xl shadow-md border border-green-100 text-center" data-aos="fade-up" data-aos-delay="100">
171
+ <div class="text-green-600 mb-4 inline-block">
172
+ <i data-feather="dollar-sign" class="w-12 h-12"></i>
173
+ </div>
174
+ <h3 class="text-xl font-semibold mb-3">Save Money</h3>
175
+ <p>Reduce procurement costs with our bulk refill solutions.</p>
176
+ </div>
177
+
178
+ <div class="bg-white p-6 rounded-xl shadow-md border border-green-100 text-center" data-aos="fade-up" data-aos-delay="200">
179
+ <div class="text-green-600 mb-4 inline-block">
180
+ <i data-feather="trash-2" class="w-12 h-12"></i>
181
+ </div>
182
+ <h3 class="text-xl font-semibold mb-3">Reduce Waste</h3>
183
+ <p>Minimize single-use plastic waste with our refill system.</p>
184
+ </div>
185
+
186
+ <div class="bg-white p-6 rounded-xl shadow-md border border-green-100 text-center" data-aos="fade-up" data-aos-delay="300">
187
+ <div class="text-green-600 mb-4 inline-block">
188
+ <i data-feather="award" class="w-12 h-12"></i>
189
+ </div>
190
+ <h3 class="text-xl font-semibold mb-3">Brand Image</h3>
191
+ <p>Enhance your company's sustainable reputation.</p>
192
+ </div>
193
+ </div>
194
+ </div>
195
+ </section>
196
+
197
+ <!-- Impact Section -->
198
+ <section class="py-16 px-6 bg-green-50">
199
+ <div class="max-w-6xl mx-auto text-center" data-aos="fade-up">
200
+ <h2 class="text-3xl font-bold mb-12 text-green-800">Our Environmental Impact</h2>
201
+ <div class="grid md:grid-cols-3 gap-8">
202
+ <div>
203
+ <div class="counter text-green-700" data-target="15000">0</div>
204
+ <p>Liters of Plastic Saved</p>
205
+ </div>
206
+ <div>
207
+ <div class="counter text-green-700" data-target="42">0</div>
208
+ <p>Offices Served</p>
209
+ </div>
210
+ <div>
211
+ <div class="counter text-green-700" data-target="8500">0</div>
212
+ <p>kg CO₂ Reduced</p>
213
+ </div>
214
+ </div>
215
+ </div>
216
+ </section>
217
+
218
+ <!-- Testimonials -->
219
+ <section class="py-16 px-6">
220
+ <div class="max-w-4xl mx-auto" data-aos="fade-up">
221
+ <h2 class="text-3xl font-bold mb-12 text-center text-green-800">What Our Clients Say</h2>
222
+ <div class="space-y-8">
223
+ <div class="bg-gray-50 p-6 rounded-xl border border-green-100">
224
+ <p class="italic mb-4">"GreenFlow has transformed how we manage office supplies. We've cut costs by 30% and significantly reduced our plastic waste!"</p>
225
+ <p class="font-semibold">- Ahmed R., Office Manager</p>
226
+ </div>
227
+ <div class="bg-gray-50 p-6 rounded-xl border border-green-100">
228
+ <p class="italic mb-4">"The installation was seamless and the ongoing service is exceptional. Our employees love the new eco-friendly stations."</p>
229
+ <p class="font-semibold">- Fatima K., HR Director</p>
230
+ </div>
231
+ </div>
232
+ </div>
233
+ </section>
234
+
235
+ <!-- FAQ -->
236
+ <section class="py-16 px-6 bg-gray-50">
237
+ <div class="max-w-4xl mx-auto" data-aos="fade-up">
238
+ <h2 class="text-3xl font-bold mb-12 text-center text-green-800">Frequently Asked Questions</h2>
239
+ <div class="space-y-4">
240
+ <div class="border-b border-green-200 pb-4">
241
+ <button class="flex justify-between items-center w-full text-left font-semibold text-lg text-green-700 focus:outline-none">
242
+ <span>How do your refill stations work?</span>
243
+ <i data-feather="chevron-down" class="w-5 h-5"></i>
244
+ </button>
245
+ <div class="mt-2 hidden">
246
+ <p>Our stations are installed at your workplace and connected to our supply system. We regularly refill them with eco-friendly products based on your usage.</p>
247
+ </div>
248
+ </div>
249
+ <div class="border-b border-green-200 pb-4">
250
+ <button class="flex justify-between items-center w-full text-left font-semibold text-lg text-green-700 focus:outline-none">
251
+ <span>What products do you offer?</span>
252
+ <i data-feather="chevron-down" class="w-5 h-5"></i>
253
+ </button>
254
+ <div class="mt-2 hidden">
255
+ <p>We provide refills for dishwashing liquid, hand sanitizers, multipurpose cleaners, and other essential office cleaning supplies.</p>
256
+ </div>
257
+ </div>
258
+ <div class="border-b border-green-200 pb-4">
259
+ <button class="flex justify-between items-center w-full text-left font-semibold text-lg text-green-700 focus:outline-none">
260
+ <span>How often do you refill?</span>
261
+ <i data-feather="chevron-down" class="w-5 h-5"></i>
262
+ </button>
263
+ <div class="mt-2 hidden">
264
+ <p>Refill frequency depends on your usage but typically ranges from weekly to monthly. We monitor levels to ensure you never run out.</p>
265
+ </div>
266
+ </div>
267
+ </div>
268
+ </div>
269
+ </section>
270
+
271
+ <!-- Contact -->
272
+ <section id="contact" class="py-16 px-6">
273
+ <div class="max-w-6xl mx-auto" data-aos="fade-up">
274
+ <h2 class="text-3xl font-bold mb-12 text-center text-green-800">Get In Touch</h2>
275
+ <div class="grid md:grid-cols-2 gap-12">
276
+ <div>
277
+ <form class="space-y-6 bg-white p-8 rounded-xl shadow-lg">
278
+ <div>
279
+ <label class="block mb-2 font-medium text-gray-700">Full Name</label>
280
+ <input type="text" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 focus:outline-none transition" placeholder="John Doe">
281
+ </div>
282
+ <div>
283
+ <label class="block mb-2 font-medium text-gray-700">Email Address</label>
284
+ <input type="email" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 focus:outline-none transition" placeholder="john@example.com">
285
+ </div>
286
+ <div>
287
+ <label class="block mb-2 font-medium text-gray-700">Phone Number</label>
288
+ <input type="tel" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 focus:outline-none transition" placeholder="+92 300 1234567">
289
+ </div>
290
+ <div>
291
+ <label class="block mb-2 font-medium text-gray-700">Company (Optional)</label>
292
+ <input type="text" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 focus:outline-none transition" placeholder="Your Company">
293
+ </div>
294
+ <div>
295
+ <label class="block mb-2 font-medium text-gray-700">Message</label>
296
+ <textarea rows="5" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 focus:outline-none transition" placeholder="How can we help you?"></textarea>
297
+ </div>
298
+ <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300 transform hover:-translate-y-1">Send Message</button>
299
+ </form>
300
+ </div>
301
+ <div>
302
+ <h3 class="text-2xl font-semibold mb-6 text-green-700">Contact Information</h3>
303
+ <ul class="space-y-4 mb-8">
304
+ <li class="flex items-start">
305
+ <i data-feather="map-pin" class="w-5 h-5 mr-3 text-green-600 mt-1"></i>
306
+ <span>123 Green Street, Multan, Pakistan</span>
307
+ </li>
308
+ <li class="flex items-center">
309
+ <i data-feather="phone" class="w-5 h-5 mr-3 text-green-600"></i>
310
+ <span>+92 300 1234567</span>
311
+ </li>
312
+ <li class="flex items-center">
313
+ <i data-feather="mail" class="w-5 h-5 mr-3 text-green-600"></i>
314
+ <span>info@greenflow.pk</span>
315
+ </li>
316
+ <li class="flex items-center">
317
+ <i data-feather="clock" class="w-5 h-5 mr-3 text-green-600"></i>
318
+ <span>Mon-Fri: 9AM - 6PM</span>
319
+ </li>
320
+ </ul>
321
+ <div class="mb-8">
322
+ <h4 class="font-semibold text-lg mb-4 text-green-700">Find Us</h4>
323
+ <div class="bg-gray-200 rounded-xl overflow-hidden h-64">
324
+ <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d112842.03569151234!2d71.37865785820315!3d30.196640900000003!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x393b31e0a59dce77%3A0x9ab8c7baf0af09f7!2sMultan%2C%20Punjab%2C%20Pakistan!5e0!3m2!1sen!2s!4v1650000000000!5m2!1sen!2s" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
325
+ </div>
326
+ </div>
327
+ <div>
328
+ <h4 class="font-semibold text-lg mb-4 text-green-700">Follow Us</h4>
329
+ <div class="flex space-x-4">
330
+ <a href="#" class="bg-green-100 p-3 rounded-full text-green-600 hover:bg-green-200 transition">
331
+ <i data-feather="facebook" class="w-5 h-5"></i>
332
+ </a>
333
+ <a href="#" class="bg-green-100 p-3 rounded-full text-green-600 hover:bg-green-200 transition">
334
+ <i data-feather="twitter" class="w-5 h-5"></i>
335
+ </a>
336
+ <a href="#" class="bg-green-100 p-3 rounded-full text-green-600 hover:bg-green-200 transition">
337
+ <i data-feather="instagram" class="w-5 h-5"></i>
338
+ </a>
339
+ <a href="#" class="bg-green-100 p-3 rounded-full text-green-600 hover:bg-green-200 transition">
340
+ <i data-feather="linkedin" class="w-5 h-5"></i>
341
+ </a>
342
+ </div>
343
+ </div>
344
+ </div>
345
+ </div>
346
+ </div>
347
+ </section>
348
+
349
+ <!-- Footer -->
350
+ <footer class="bg-green-800 text-white py-12 px-6">
351
+ <div class="max-w-6xl mx-auto">
352
+ <div class="grid md:grid-cols-4 gap-8">
353
+ <div>
354
+ <h3 class="text-xl font-bold mb-4">GreenFlow</h3>
355
+ <p class="text-green-200">Sustainable refill solutions for a cleaner tomorrow in Multan.</p>
356
+ </div>
357
+ <div>
358
+ <h4 class="font-semibold mb-4">Quick Links</h4>
359
+ <ul class="space-y-2 text-green-200">
360
+ <li><a href="#about" class="hover:text-white transition">About</a></li>
361
+ <li><a href="#services" class="hover:text-white transition">Services</a></li>
362
+ <li><a href="#contact" class="hover:text-white transition">Contact</a></li>
363
+ </ul>
364
+ </div>
365
+ <div>
366
+ <h4 class="font-semibold mb-4">Services</h4>
367
+ <ul class="space-y-2 text-green-200">
368
+ <li>Refill Stations</li>
369
+ <li>Bulk Supplies</li>
370
+ <li>Consulting</li>
371
+ </ul>
372
+ </div>
373
+ <div>
374
+ <h4 class="font-semibold mb-4">Contact</h4>
375
+ <address class="not-italic text-green-200">
376
+ 123 Green Street<br>
377
+ Multan, Pakistan<br>
378
+ +92 300 1234567<br>
379
+ info@greenflow.pk
380
+ </address>
381
+ </div>
382
+ </div>
383
+ <div class="border-t border-green-700 mt-8 pt-8 text-center text-green-300">
384
+ <p>&copy; 2023 GreenFlow. All rights reserved.</p>
385
+ </div>
386
+ </div>
387
+ </footer>
388
+
389
+ <script>
390
+ // Loading screen
391
+ window.addEventListener('load', function() {
392
+ setTimeout(function() {
393
+ document.getElementById('loadingScreen').classList.add('loading-hidden');
394
+ }, 1000);
395
+ });
396
+
397
+ // Initialize AOS
398
+ AOS.init({
399
+ duration: 800,
400
+ easing: 'ease-in-out'
401
+ });
402
+
403
+ // Initialize Feather Icons
404
+ feather.replace();
405
+
406
+ // Counter animation
407
+ function animateCounter(element, target) {
408
+ let count = 0;
409
+ const increment = target / 100;
410
+ const timer = setInterval(() => {
411
+ count += increment;
412
+ if (count >= target) {
413
+ element.innerText = target.toLocaleString();
414
+ clearInterval(timer);
415
+ } else {
416
+ element.innerText = Math.ceil(count).toLocaleString();
417
+ }
418
+ }, 20);
419
+ }
420
+
421
+ // Run counters when in view
422
+ const counters = document.querySelectorAll('.counter');
423
+ const observer = new IntersectionObserver((entries) => {
424
+ entries.forEach(entry => {
425
+ if (entry.isIntersecting) {
426
+ const counter = entry.target;
427
+ const target = parseInt(counter.getAttribute('data-target'));
428
+ animateCounter(counter, target);
429
+ observer.unobserve(counter);
430
+ }
431
+ });
432
+ }, { threshold: 0.5 });
433
+
434
+ counters.forEach(counter => {
435
+ observer.observe(counter);
436
+ });
437
+
438
+ // FAQ Accordion
439
+ document.querySelectorAll('button[aria-expanded]').forEach(button => {
440
+ button.addEventListener('click', () => {
441
+ const expanded = button.getAttribute('aria-expanded') === 'true';
442
+ button.setAttribute('aria-expanded', !expanded);
443
+ const content = button.nextElementSibling;
444
+ content.classList.toggle('hidden');
445
+ const icon = button.querySelector('i');
446
+ if (expanded) {
447
+ icon.setAttribute('data-feather', 'chevron-down');
448
+ } else {
449
+ icon.setAttribute('data-feather', 'chevron-up');
450
+ }
451
+ feather.replace();
452
+ });
453
+ });
454
+ </script>
455
+ </body>
456
  </html>
prompts.txt ADDED
File without changes