-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
502 lines (443 loc) · 20 KB
/
Copy pathindex.html
File metadata and controls
502 lines (443 loc) · 20 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WeClean Services | Professional Cleaning Solutions in Malawi</title>
<meta name="Author" content="Madalitso Saulos">
<meta name="description" content="WeClean Services provides trusted residential, commercial and industrial cleaning across Malawi. Book a spotless clean today.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<link rel="icon" href="/images/favion.png" type="image/x-icon">
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div id="preloader" aria-hidden="true">
<div class="preloader-inner">
<span class="preloader-drop"></span>
<p>loading...</p>
</div>
</div>
<div class="progress-bar" id="scrollProgress" aria-hidden="true"></div>
<!-- NAVIGATION -->
<header class="site-nav" id="siteNav">
<div class="nav-container">
<a href="#home" class="brand">
<span class="brand-text">WECLEAN<em> SERVICES</em></span>
</a>
<nav class="nav-links" id="navLinks">
<a href="#home" class="nav-link active-link">Home</a>
<a href="#about" class="nav-link">About Us</a>
<a href="#services" class="nav-link">Services</a>
<a href="#why-us" class="nav-link">Why Choose Us</a>
<a href="#gallery" class="nav-link">Gallery</a>
<a href="#contact" class="nav-link">Contact</a>
<a href="#contact" class="btn btn-accent nav-cta">Get a Quote</a>
</nav>
<button class="hamburger" id="hamburger" aria-label="Toggle navigation menu" aria-expanded="false">
<span></span><span></span><span></span>
</button>
</div>
</header>
<!-- HERO -->
<section class="hero" id="home">
<div class="hero-media"> <img src="/images/Window_cleaning_header.png" alt="Professional cleaner wiping a glass surface" loading="eager">
<div class="hero-overlay"></div>
</div>
<div class="bubbles" aria-hidden="true">
<span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span>
</div>
<div class="hero-content">
<p class="eyebrow reveal-up">Malawi's Trusted Cleaning Professionals</p>
<h1 class="reveal-up" style="animation-delay:.1s">Professional Cleaning Solutions You Can Trust</h1>
<p class="hero-sub reveal-up" style="animation-delay:.2s">Delivering reliable, high-quality residential, commercial, and industrial cleaning services across Malawi with professionalism, attention to detail, and exceptional customer care.</p>
<div class="hero-actions reveal-up" style="animation-delay:.3s">
<a href="#contact" class="btn btn-accent">Request Cleaning Service</a>
<a href="#services" class="btn btn-ghost">Explore Services</a>
</div>
<div class="stat-row reveal-up" style="animation-delay:.5s">
<div class="stat-card">
<span class="stat-num" data-count="500" data-suffix="+">0</span>
<span class="stat-label">Happy Clients</span>
</div>
<div class="stat-card">
<span class="stat-num" data-count="10" data-suffix="+">0</span>
<span class="stat-label">Professional Cleaners</span>
</div>
<div class="stat-card">
<span class="stat-num" data-count="5" data-suffix="+">0</span>
<span class="stat-label">Years Experience</span>
</div>
<div class="stat-card">
<span class="stat-num" data-count="100" data-suffix="%">0</span>
<span class="stat-label">Customer Satisfaction</span>
</div>
</div>
</div>
</section>
<!-- ABOUT SECTION -->
<section class="about" id="about">
<div class="container split">
<div class="split-media reveal-left">
<img src="/images/Why-image.png" alt="WeClean Services team preparing for a job" loading="lazy" style="opacity:.9; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
<div class="media-badge">
<strong>5+</strong>
<span>Years of Excellence</span>
</div>
</div>
<div class="split-copy reveal-right">
<p class="eyebrow">About Us</p>
<h2>Creating Spotless, Healthier Spaces Across Malawi</h2>
<p class="lead">WeClean Services is a professional cleaning company dedicated to delivering exceptional cleaning solutions for residential, commercial, and industrial clients across Malawi. We combine modern cleaning techniques, skilled personnel, and high-quality products to provide reliable, efficient, and environmentally responsible cleaning services.
<br><br>
Our commitment is to create healthier, safer, and more comfortable spaces through attention to detail, professionalism, and consistent service excellence. We believe a clean environment promotes productivity, wellbeing, and peace of mind, which is why we go beyond cleaning to create spaces where people can live, work, and thrive.
</p>
<div class="feature-grid">
<div class="feature-pill"><span>✓</span> Professional Team</div>
<div class="feature-pill"><span>✓</span> Eco-Friendly Products</div>
<div class="feature-pill"><span>✓</span> Reliable Service</div>
<div class="feature-pill"><span>✓</span> Affordable Solutions</div>
<div class="feature-pill"><span>✓</span> Quality Guaranteed</div>
<div class="feature-pill"><span>✓</span> Customer Satisfaction</div>
</div>
</div>
</section>
<!-- SERVICES -->
<section class="services" id="services">
<div class="container">
<p class="eyebrow center">What We Offer</p>
<h2 class="center">Cleaning services built around your space</h2>
<p class="section-sub center">
Whether it is a home, office, facility, or industrial environment, we ensure every space receives the highest standard of care and cleanliness. From a single office to a full production floor, our teams are trained and equipped for every environment.
</p>
<div class="service-grid">
<article class="service-card reveal-up">
<div class="service-icon">
<i data-lucide="house"></i>
</div>
<h3>Residential Cleaning</h3>
<ul>
<li>Houses</li>
<li>Apartments</li>
<li>Deep cleaning</li>
<li>Kitchen & bathroom cleaning</li>
</ul>
</article>
<article class="service-card reveal-up" style="animation-delay:.1s">
<div class="service-icon">
<i data-lucide="building-2"></i>
</div>
<h3>Office Cleaning</h3>
<ul>
<li>Corporate offices</li>
<li>Meeting rooms</li>
<li>Workspaces</li>
</ul>
</article>
<article class="service-card reveal-up" style="animation-delay:.2s">
<div class="service-icon">
<i data-lucide="factory"></i>
</div>
<h3>Industrial Cleaning</h3>
<ul>
<li> Factories</li>
<li> Warehouses</li>
<li> Production areas</li>
</ul>
</article>
<article class="service-card reveal-up" style="animation-delay:.3s">
<div class="service-icon">
<i data-lucide="sparkles"></i>
</div>
<h3>Specialized Cleaning</h3>
<ul>
<li>Carpet cleaning</li>
<li>Window cleaning</li>
<li>Post-construction cleaning</li>
</ul>
</article>
</div>
</div>
</section>
<!-- WHY CHOOSE US -->
<section class="why-us" id="why-us">
<img class="why-bg" src="/images/image_5.png" alt="" aria-hidden="true" loading="lazy">
<div class="why-overlay"></div>
<div class="container">
<p class="eyebrow">Why WeClean?</p>
<h2>The difference is in the detail</h2>
<div class="why-grid">
<div class="why-card reveal-up"><span>✔</span><h4>Experienced Professionals</h4></div>
<div class="why-card reveal-up" style="animation-delay:.08s"><span>✔</span><h4>High Cleaning Standards</h4></div>
<div class="why-card reveal-up" style="animation-delay:.16s"><span>✔</span><h4>Affordable Pricing</h4></div>
<div class="why-card reveal-up" style="animation-delay:.24s"><span>✔</span><h4>Reliable & Privacy Maintained</h4></div>
<div class="why-card reveal-up" style="animation-delay:.32s"><span>✔</span><h4>Customer Satisfaction</h4></div>
<div class="why-card reveal-up" style="animation-delay:.4s"><span>✔</span><h4>Safe Cleaning Products</h4></div>
</div>
</div>
</section>
<!-- PROCESS -->
<section class="process" id="process">
<div class="container">
<p class="eyebrow center">How It Works</p>
<h2 class="center">Our Five-Step Process for Spotless Results</h2>
<div class="timeline">
<div class="timeline-step reveal-up">
<span class="timeline-num">01</span>
<h4>Book Service</h4>
<p>Reach out through our form or phone line and tell us what you need cleaned.</p>
</div>
<div class="timeline-step reveal-up" style="animation-delay:.1s">
<span class="timeline-num">02</span>
<h4>Professional Inspection</h4>
<p>Our team assesses the space and scopes the right plan and products.</p>
</div>
<div class="timeline-step reveal-up" style="animation-delay:.2s">
<span class="timeline-num">03</span>
<h4>Cleaning Process</h4>
<p>Trained cleaners get to work using safe, effective techniques.</p>
</div>
<div class="timeline-step reveal-up" style="animation-delay:.3s">
<span class="timeline-num">04</span>
<h4>Quality Check</h4>
<p>A supervisor reviews every room against our standards checklist.</p>
</div>
<div class="timeline-step reveal-up" style="animation-delay:.4s">
<span class="timeline-num">05</span>
<h4>Satisfied Customer</h4>
<p>You walk into a fresh, spotless space — guaranteed.</p>
</div>
</div>
</div>
</section>
<!-- GALLERY -->
<section class="gallery" id="gallery">
<div class="container">
<p class="eyebrow center">Our Work</p>
<h2 class="center">See the WeClean <span class="highlight-service">Services</span> standard</h2>
<div class="gallery-grid">
<button class="gallery-item reveal-up" data-full="https://images.unsplash.com/photo-1581578731548-c64695cc6952?auto=format&fit=crop&w=1400&q=80">
<img src="/images/image_3.png" alt="Professional cleaner at work" loading="lazy">
<span class="gallery-tag">Professional home Cleaning</span>
</button>
<button class="gallery-item reveal-up" style="animation-delay:.05s" data-full="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?auto=format&fit=crop&w=1400&q=80">
<img src="/images/images_4.jpg" alt="Clean modern office space" loading="lazy">
<span class="gallery-tag">Premium Office Cleaning</span>
</button>
<button class="gallery-item reveal-up" style="animation-delay:.1s" data-full="https://images.unsplash.com/photo-1563453392212-326f5e854473?auto=format&fit=crop&w=1400&q=80">
<img src="/images/Hybrid Work Conference Room Design - 24 Conference Room Design Ideas and Inspiration Guide.jpg" alt="Cleaning supplies and equipment" loading="lazy">
<span class="gallery-tag">Conference Room Cleaning</span>
</button>
<button class="gallery-item reveal-up" style="animation-delay:.15s" data-full="https://images.unsplash.com/photo-1585421514738-01798e348b17?auto=format&fit=crop&w=1400&q=80">
<img src="/images/Image_1.png" alt="Sparkling clean kitchen surface" loading="lazy">
<span class="gallery-tag">Deep Cleaning</span>
</button>
<button class="gallery-item reveal-up" style="animation-delay:.2s" data-full="https://images.unsplash.com/photo-1527515637462-cff94eecc1ac?auto=format&fit=crop&w=1400&q=80">
<img src="/images/About_Us_image.png" alt="Cleaning team preparing for job" loading="lazy">
<span class="gallery-tag">Our Team</span>
</button>
<button class="gallery-item reveal-up" style="animation-delay:.25s" data-full="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1400&q=80">
<img src="/images/image_7.png" alt="Industrial warehouse interior" loading="lazy">
<span class="gallery-tag">Standard Industrial Cleaning</span>
</button>
</div>
</div>
</section>
<div class="lightbox" id="lightbox" aria-hidden="true">
<button class="lightbox-close" id="lightboxClose" aria-label="Close image">×</button>
<img src="" alt="" id="lightboxImg">
</div>
<!-- TESTIMONIALS -->
<section class="testimonials" id="testimonials">
<div class="container">
<p class="eyebrow center">Our Clients Stories</p>
<h2 class="center">What our clients say</h2>
<div class="testimonial-slider">
<div class="testimonial-track" id="testimonialTrack">
<div class="testimonial-card">
<div class="stars">★★★★★</div>
<p>"WeClean Services transformed our office environment. Their team is professional and reliable."</p>
<div class="testimonial-author">
<div class="avatar">BC</div>
<div>
<strong>Business Client</strong>
<span>Blantyre</span>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="stars">★★★★★</div>
<p>"Our warehouse floors have never looked this good. Fast, thorough, and affordable."</p>
<div class="testimonial-author">
<div class="avatar">TM</div>
<div>
<strong>Factory Manager</strong>
<span>Limbe</span>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="stars">★★★★★</div>
<p>"They deep-cleaned our home before a family event. Every corner was spotless."</p>
<div class="testimonial-author">
<div class="avatar">NP</div>
<div>
<strong>Home owner</strong>
<span>Zomba</span>
</div>
</div>
</div>
</div>
<div class="testimonial-dots" id="testimonialDots"></div>
</div>
</div>
</section>
<!-- CONTACT -->
<section class="contact" id="contact">
<div class="container split">
<div class="contact-info reveal-left">
<p class="eyebrow">Get In Touch</p>
<h2>Ready for a Spotless Space? Let's Make It Happen.</h2>
<p class="section-sub">Tell us about your space and we'll get back to you with a plan and a quote.</p>
<div class="info-item">
<i data-lucide="map-pin"></i>
<div><strong>Location</strong><p>Blantyre, Malawi, Opposite Queen Elizabeth Central Hospital</p></div>
</div>
<div class="info-item">
<i data-lucide="phone"></i>
<div><strong>Phone</strong><p>+265 884 537 197</p></div>
</div>
<div class="info-item">
<i data-lucide="mail"></i>
<div><strong>Email</strong><p>info@wecleanservices.com</p></div>
</div>
<div class="info-item">
<i data-lucide="clock"></i>
<div>
<strong>Opening Hours</strong>
<p>Monday - Friday: 8:00 AM - 6:00 PM</p>
<p>Saturday: 9:00 AM - 12:00 PM</p>
</div>
</div>
<div class="map-heading">
<i data-lucide="map"></i>
<h3>Find Us on the Map</h3>
</div>
<p class="map-text">
Visit our office opposite Queen Elizabeth Central Hospital, Moyo House, Blantyre.
</p>
<div class="map-wrapper">
<div class="map-container">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3839.0053896963495!2d35.01583727423637!3d-15.803669823181814!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x18d84595a31488db%3A0xab2645c826c5bfa!2sQueen%20Elizabeth%20Central%20Hospital%20-%20Moyo%20house!5e0!3m2!1sen!2smw!4v1784327074843!5m2!1sen!2smw"
width="100%"
height="100%"
style="border:0;"
allowfullscreen=""
loading="lazy"
referrerpolicy="strict-origin-when-cross-origin"
title="Google Map - Queen Elizabeth Central Hospital, Moyo house"
aria-label="Map showing location of Queen Elizabeth Central Hospital - Moyo house">
</iframe>
</div>
</div>
</div>
<!-- FORM -->
<form class="contact-form reveal-right" id="contactForm" action="php/contact.php" method="POST" novalidate>
<div class="form-row">
<label for="fullName">Full Name</label>
<input type="text" id="fullName" name="fullName" placeholder="Your full name" required>
<span class="form-error" data-for="fullName"></span>
</div>
<div class="form-row">
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="you@example.com" required>
<span class="form-error" data-for="email"></span>
</div>
<div class="form-row">
<label for="phone">Phone Number</label>
<input type="tel" id="phone" name="phone" placeholder="+265 XXX XXX XXX" required>
<span class="form-error" data-for="phone"></span>
</div>
<div class="form-row">
<label for="service">Service Required</label>
<select id="service" name="service" required>
<option value="" disabled selected>Select a service</option>
<option value="Residential Cleaning">Residential Cleaning</option>
<option value="Office Cleaning">Office Cleaning</option>
<option value="Industrial Cleaning">Industrial Cleaning</option>
<option value="Specialized Cleaning">Specialized Cleaning</option>
</select>
<span class="form-error" data-for="service"></span>
</div>
<div class="form-row">
<label for="message">Message</label>
<textarea id="message" name="message" rows="4" placeholder="Tell us about the space and when you need us"></textarea>
<span class="form-error" data-for="message"></span>
</div>
<button type="submit" class="btn btn-accent form-submit">
<span class="btn-label">Send Request</span>
<span class="btn-spinner" aria-hidden="true"></span>
</button>
<p class="form-status" id="formStatus" role="status" aria-live="polite"></p>
</form>
</div>
</section>
<!-- FOOTER -->
<footer class="site-footer">
<div class="container footer-grid">
<div class="footer-brand">
<span class="brand-text light">WeClean <em>Services</em></span>
<p>Professional cleaning solutions for homes, offices, industries and institutions across Malawi.</p>
<div class="social-icons">
<a href="#" aria-label="Facebook">
<i class="fa-brands fa-facebook-f"></i>
</a>
<a href="#" aria-label="Instagram">
<i class="fa-brands fa-instagram"></i>
</a>
<a href="#" aria-label="WhatsApp">
<i class="fa-brands fa-whatsapp"></i>
</a>
<a href="#" aria-label="LinkedIn">
<i class="fa-brands fa-linkedin-in"></i>
</a>
</div>
</div>
<div class="footer-links">
<h5>Quick Links</h5>
<a href="#home">Home</a>
<a href="#about">About Us</a>
<a href="#why-us">Why Choose Us</a>
<a href="#gallery">Gallery</a>
<a href="#contact">Contact</a>
</div>
<div class="footer-links">
<h5>Services</h5>
<a href="#services">Residential Cleaning</a>
<a href="#services">Office Cleaning</a>
<a href="#services">Industrial Cleaning</a>
<a href="#services">Specialized Cleaning</a>
</div>
<div class="footer-contact">
<h5>Contact</h5>
<p>Blantyre, Malawi</p>
<p>+265 884 537 197</p>
<p>info@wecleanservices.com</p>
</div>
</div>
<div class="footer-bottom">
<p>© 2026 WeClean Services Malawi. Professional Cleaning Solutions.</p>
</div>
</footer>
<button class="back-to-top" id="backToTop" aria-label="Back to top">↑</button>
<script src="/script.js" defer></script>
<script src="https://unpkg.com/lucide@latest"></script>
<script>
lucide.createIcons();
</script>
</body>
</html>