98:I[903690,["/chat-static/_next/static/immutable/chunks/10wpt-vzxn5i1.js","/chat-static/_next/static/immutable/chunks/0lyxw0nk-7-p_.js","/chat-static/_next/static/immutable/chunks/0s13a2j9-r_7z.js","/chat-static/_next/static/immutable/chunks/05z0jc31ylkrk.js","/chat-static/_next/static/immutable/chunks/2836u6jwf9bgv.js","/chat-static/_next/static/immutable/chunks/3ktygcwrvju41.js","/chat-static/_next/static/immutable/chunks/3npdfuq6kuky8.js","/chat-static/_next/static/immutable/chunks/3xgcz543a20n9.js","/chat-static/_next/static/immutable/chunks/2ks2dvr47nqsg.js","/chat-static/_next/static/immutable/chunks/0wp9iyt7gqj9c.js","/chat-static/_next/static/immutable/chunks/03w_e6mqufrhn.js","/chat-static/_next/static/immutable/chunks/3su8b9kn4mbaa.js","/chat-static/_next/static/immutable/chunks/2sp-yda0t06bm.js","/chat-static/_next/static/immutable/chunks/06-mpaxkl_qww.js","/chat-static/_next/static/immutable/chunks/2v1ytxhjawdqw.js","/chat-static/_next/static/immutable/chunks/3vhx3fg583u19.js","/chat-static/_next/static/immutable/chunks/3bon2sery8l35.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/179p_vj82jpro.js","/chat-static/_next/static/immutable/chunks/38ug3n50sd79m.js","/chat-static/_next/static/immutable/chunks/1r_xlti2nupgd.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/0ggiln07qpg3x.js","/chat-static/_next/static/immutable/chunks/0v6za4mu6mmch.js","/chat-static/_next/static/immutable/chunks/362eoze68z3tj.js","/chat-static/_next/static/immutable/chunks/30xbirk075f9u.js","/chat-static/_next/static/immutable/chunks/2s3rmbgvk5alc.js","/chat-static/_next/static/immutable/chunks/2ihe2cde8-h-m.js","/chat-static/_next/static/immutable/chunks/34pqinj9axzi3.js","/chat-static/_next/static/immutable/chunks/24oxen36r-7_-.js","/chat-static/_next/static/immutable/chunks/21nzp1fdul4xe.js","/chat-static/_next/static/immutable/chunks/2r3778mxx4zx3.js","/chat-static/_next/static/immutable/chunks/2aqaq-qj4jd04.js","/chat-static/_next/static/immutable/chunks/27kqtemkm6wc0.js","/chat-static/_next/static/immutable/chunks/1gwh2_shftvhf.js","/chat-static/_next/static/immutable/chunks/44eivch4u9izl.js","/chat-static/_next/static/immutable/chunks/04a8jfjv6v0qb.js","/chat-static/_next/static/immutable/chunks/2p_xpxyq5ao8y.js","/chat-static/_next/static/immutable/chunks/1etiboqt-76vo.js","/chat-static/_next/static/immutable/chunks/3e-gletsn4gk-.js","/chat-static/_next/static/immutable/chunks/3pcbg8le2lieu.js","/chat-static/_next/static/immutable/chunks/1txla5ky9w8bd.js","/chat-static/_next/static/immutable/chunks/0o-tvqrw-60f9.js","/chat-static/_next/static/immutable/chunks/0m6-nsexj373o.js","/chat-static/_next/static/immutable/chunks/00j6vehxg467o.js","/chat-static/_next/static/immutable/chunks/1elbuzr4anjh-.js","/chat-static/_next/static/immutable/chunks/0mn-dmkxxrk86.js","/chat-static/_next/static/immutable/chunks/2rhujd4vukzvn.js","/chat-static/_next/static/immutable/chunks/0lv1ltlo3ra7i.js","/chat-static/_next/static/immutable/chunks/01enxheexz0xq.js","/chat-static/_next/static/immutable/chunks/1z5yxk28vv9k_.js","/chat-static/_next/static/immutable/chunks/1sp09rcaj9_la.js","/chat-static/_next/static/immutable/chunks/408m_6lxo2us-.js"],"ExplicitChatIdProvider"] 99:I[838238,["/chat-static/_next/static/immutable/chunks/10wpt-vzxn5i1.js","/chat-static/_next/static/immutable/chunks/0lyxw0nk-7-p_.js","/chat-static/_next/static/immutable/chunks/0s13a2j9-r_7z.js","/chat-static/_next/static/immutable/chunks/05z0jc31ylkrk.js","/chat-static/_next/static/immutable/chunks/2836u6jwf9bgv.js","/chat-static/_next/static/immutable/chunks/3ktygcwrvju41.js","/chat-static/_next/static/immutable/chunks/3npdfuq6kuky8.js","/chat-static/_next/static/immutable/chunks/3xgcz543a20n9.js","/chat-static/_next/static/immutable/chunks/2ks2dvr47nqsg.js","/chat-static/_next/static/immutable/chunks/0wp9iyt7gqj9c.js","/chat-static/_next/static/immutable/chunks/03w_e6mqufrhn.js","/chat-static/_next/static/immutable/chunks/3su8b9kn4mbaa.js","/chat-static/_next/static/immutable/chunks/2sp-yda0t06bm.js","/chat-static/_next/static/immutable/chunks/06-mpaxkl_qww.js","/chat-static/_next/static/immutable/chunks/2v1ytxhjawdqw.js","/chat-static/_next/static/immutable/chunks/3vhx3fg583u19.js","/chat-static/_next/static/immutable/chunks/3bon2sery8l35.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/179p_vj82jpro.js","/chat-static/_next/static/immutable/chunks/38ug3n50sd79m.js","/chat-static/_next/static/immutable/chunks/1r_xlti2nupgd.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/0ggiln07qpg3x.js","/chat-static/_next/static/immutable/chunks/0v6za4mu6mmch.js","/chat-static/_next/static/immutable/chunks/362eoze68z3tj.js","/chat-static/_next/static/immutable/chunks/30xbirk075f9u.js","/chat-static/_next/static/immutable/chunks/2s3rmbgvk5alc.js","/chat-static/_next/static/immutable/chunks/2ihe2cde8-h-m.js","/chat-static/_next/static/immutable/chunks/34pqinj9axzi3.js","/chat-static/_next/static/immutable/chunks/24oxen36r-7_-.js","/chat-static/_next/static/immutable/chunks/21nzp1fdul4xe.js","/chat-static/_next/static/immutable/chunks/2r3778mxx4zx3.js","/chat-static/_next/static/immutable/chunks/2aqaq-qj4jd04.js","/chat-static/_next/static/immutable/chunks/27kqtemkm6wc0.js","/chat-static/_next/static/immutable/chunks/1gwh2_shftvhf.js","/chat-static/_next/static/immutable/chunks/44eivch4u9izl.js","/chat-static/_next/static/immutable/chunks/04a8jfjv6v0qb.js","/chat-static/_next/static/immutable/chunks/2p_xpxyq5ao8y.js","/chat-static/_next/static/immutable/chunks/1etiboqt-76vo.js","/chat-static/_next/static/immutable/chunks/3e-gletsn4gk-.js","/chat-static/_next/static/immutable/chunks/3pcbg8le2lieu.js","/chat-static/_next/static/immutable/chunks/1txla5ky9w8bd.js","/chat-static/_next/static/immutable/chunks/0o-tvqrw-60f9.js","/chat-static/_next/static/immutable/chunks/0m6-nsexj373o.js","/chat-static/_next/static/immutable/chunks/00j6vehxg467o.js","/chat-static/_next/static/immutable/chunks/1elbuzr4anjh-.js","/chat-static/_next/static/immutable/chunks/0mn-dmkxxrk86.js","/chat-static/_next/static/immutable/chunks/2rhujd4vukzvn.js","/chat-static/_next/static/immutable/chunks/0lv1ltlo3ra7i.js","/chat-static/_next/static/immutable/chunks/01enxheexz0xq.js","/chat-static/_next/static/immutable/chunks/1z5yxk28vv9k_.js","/chat-static/_next/static/immutable/chunks/1sp09rcaj9_la.js","/chat-static/_next/static/immutable/chunks/408m_6lxo2us-.js"],"SWRDataProvider"] 9b:[] 9c:[["b_FTCwDqD4FbD",null],["b_n1ErSagwRzL",null],["b_f1qpHyzFsZj",null],["b_XDrmchhhCB6",null]] 9d:[["b_FTCwDqD4FbD",{"templateVersionId":null,"templateCanonId":null}],["b_n1ErSagwRzL",{"templateVersionId":null,"templateCanonId":null}],["b_f1qpHyzFsZj",{"templateVersionId":null,"templateCanonId":null}],["b_XDrmchhhCB6",{"templateVersionId":null,"templateCanonId":null}]] 9e:[["b_6rFWQV1lj8E","$D2025-05-02T09:33:49.887Z"],["b_kB3rM6qRFrB","$D2025-05-02T11:33:33.248Z"],["b_N6HCVLiTDz3","$D2025-05-02T12:35:27.349Z"],["b_QOLkszRfg74","$D2025-05-02T12:56:16.221Z"],["b_otyRafSykWx","$D2025-05-02T13:06:31.100Z"],["b_uSTB6WY2jny","$D2025-05-02T13:14:21.731Z"],["b_Io1eHrzADlO","$D2025-05-02T13:19:59.891Z"],["b_1IwDz6yHe8a","$D2025-05-02T13:23:38.636Z"],["b_K0kk3zWpHmN","$D2025-05-02T13:31:36.365Z"],["b_Ri9SOmfBRN8","$D2025-05-02T15:12:52.932Z"],["b_bzzsbYtgmjf","$D2025-05-02T15:43:34.542Z"],["b_d6u7dCWbW69","$D2025-05-02T15:49:24.917Z"],["b_r9GUeLhqZx4","$D2025-05-05T08:54:01.231Z"],["b_hoiM0AJezVd","$D2025-05-05T09:14:08.262Z"],["b_XUNMiEJmrEC","$D2025-05-05T09:29:36.257Z"],["b_DmYvd3nhR4c","$D2025-05-05T10:42:12.550Z"],["b_ha5gspRu2eF","$D2025-05-05T11:04:55.071Z"],["b_rEGjIGek6gZ","$D2025-05-05T11:24:38.662Z"],["b_1uFIVXdKHb1","$D2025-05-05T11:59:12.355Z"],["b_D7XuFocoge2","$D2025-05-05T12:49:34.207Z"],["b_f21faco5A1y","$D2025-05-06T08:28:19.902Z"],["b_gHcwOFhuVo5","$D2025-05-06T09:35:42.812Z"],["b_10XTA3LtsYm","$D2025-05-06T10:26:22.480Z"],["b_AhlLgukJurf","$D2025-05-06T12:46:24.981Z"],["b_3CUH1OpmU3k","$D2025-05-06T13:39:07.393Z"],["b_eW1BLJ0qYcY","$D2025-05-06T17:00:15.287Z"],["b_XEYLzirTKF5","$D2025-05-07T09:13:19.663Z"],["b_JOv8Z7k7q2U","$D2025-05-07T09:21:19.080Z"],["b_AiShFh0XxOs","$D2025-05-07T11:38:51.054Z"],["b_Gta1ARykYiG","$D2025-05-07T12:03:40.476Z"],["b_GJJwfJmO1VH","$D2025-05-07T12:07:36.775Z"],["b_PalBvzpfPrl","$D2025-05-07T12:25:20.255Z"],["b_JG1Msji12p3","$D2025-05-07T13:07:44.562Z"],["b_GnVR4QIxpSd","$D2025-05-07T15:27:26.570Z"],["b_WADy2bD1xp0","$D2025-07-16T13:24:20.349Z"],["b_AJcGGiNRO1p","$D2025-07-17T13:31:57.627Z"],["b_6Aywy6u9VDv","$D2025-09-03T10:21:00.635Z"],["b_yRs0sY6SUz5","$D2025-09-06T09:35:10.719Z"],["b_ykZtxTsZCpG","$D2025-09-06T09:39:20.780Z"],["b_0HW7wRfh46U","$D2025-09-06T09:49:28.625Z"],["b_4lS5XUP6Hmd","$D2025-09-06T09:49:58.192Z"],["b_g6pbVppV9UT","$D2025-09-06T10:11:52.693Z"],["b_mshpgyaplw8","$D2025-11-10T09:06:09.677Z"],["b_BBJHMJgyC4I","$D2025-11-10T15:55:35.267Z"],["b_4S1XVisIDRg","$D2025-11-11T23:12:56.649Z"],["b_zrhbFsWyvav","$D2025-11-11T23:25:55.420Z"],["b_g5pqxspoBh2","$D2025-11-12T00:08:56.144Z"],["b_3pOm8yBqbcK","$D2025-11-19T05:58:47.726Z"],["b_ZyMWMjJdqKC","$D2026-02-27T18:22:05.977Z"],["b_dktIlA3ZgYw","$D2026-02-28T03:12:55.947Z"],["b_lKukk53tpK0","$D2026-02-28T03:12:59.655Z"],["b_Ss4Z3451k43","$D2026-03-04T18:46:40.657Z"],["b_tdABEudDva2","$D2026-03-04T18:46:46.376Z"],["b_7DZCZXVeRXE","$D2026-03-04T19:53:51.821Z"],["b_1Bf62G20nOA","$D2026-03-04T19:53:55.760Z"],["b_FTCwDqD4FbD","$D2026-03-09T10:02:41.446Z"],["b_n1ErSagwRzL","$D2026-03-09T10:02:48.071Z"],["b_f1qpHyzFsZj","$D2026-03-11T15:00:07.986Z"],["b_XDrmchhhCB6","$D2026-03-11T15:09:05.346Z"]] 9f:[["b_FTCwDqD4FbD",false],["b_n1ErSagwRzL",false],["b_f1qpHyzFsZj",false],["b_XDrmchhhCB6",false]] a0:[["b_FTCwDqD4FbD","$undefined"],["b_n1ErSagwRzL",{"git":null,"deploymentId":"dpl_5su9Tx1sgtoefWMKXaDY3p8P17y1"}],["b_f1qpHyzFsZj",{"deploymentId":"dpl_FBWoC8PdgCRWTGjX8omAR22hKc7v"}],["b_XDrmchhhCB6",{"deploymentId":"dpl_EB5eCPoZpDQmP9VDwtqZQphjMYvq"}]] a1:[["b_FTCwDqD4FbD",null],["b_n1ErSagwRzL",null],["b_f1qpHyzFsZj",null],["b_XDrmchhhCB6",null]] a2:[["b_FTCwDqD4FbD",true],["b_n1ErSagwRzL",true],["b_f1qpHyzFsZj",true],["b_XDrmchhhCB6",true]] a3:[["b_FTCwDqD4FbD",true],["b_n1ErSagwRzL",true],["b_f1qpHyzFsZj",true],["b_XDrmchhhCB6",true]] a4:[] a5:T3a420,[V0_FILE]plaintext:file=".gitignore" isMerged="true" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" isMerged="true" # Melody Cleaning Website *Automatically synced with your [v0.dev](https://v0.dev) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/stephenie-agbojes-projects/v0-melody-cleaning-website) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.dev-black?style=for-the-badge)](https://v0.dev/chat/projects/AKPwvIr0azg) ## Overview This repository will stay in sync with your deployed chats on [v0.dev](https://v0.dev). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.dev](https://v0.dev). ## Deployment Your project is live at: **[https://vercel.com/stephenie-agbojes-projects/v0-melody-cleaning-website](https://vercel.com/stephenie-agbojes-projects/v0-melody-cleaning-website)** ## Build your app Continue building your app on: **[https://v0.dev/chat/projects/AKPwvIr0azg](https://v0.dev/chat/projects/AKPwvIr0azg)** ## How It Works 1. Create and modify your project using [v0.dev](https://v0.dev) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]typescriptreact:file="app/about/page.tsx" isMerged="true" import Link from "next/link" import Image from "next/image" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Facebook, Instagram, Linkedin, CheckCircle, Clock, Leaf, Users, Shield, Coins, FileText, Bed, Sparkles, UtensilsCrossed, Construction, Brush, MapPin, } from "lucide-react" import { FaTiktok } from "react-icons/fa" export default function AboutPage() { return ( <> {/* Hero Banner with updated header image */}

ABOUT US

{/* About Us Content */}

Melody Cleaning Services is a professional cleaning company dedicated to providing high-quality cleaning services to homes and businesses across the UK. With our team of experienced and trained professionals, we deliver exceptional results that exceed our clients' expectations. We take pride in our attention to detail and commitment to customer satisfaction.

Founded with a passion for cleanliness and customer satisfaction, we are focused on becoming one of the most trusted cleaning services in the region. Our attention to detail, use of eco-friendly products, and personalised approach set us apart from other cleaning companies.

{/* Mission, Vision, Goals with updated purpose section */}

{/* Full-width header image for OUR PURPOSE */}

OUR PURPOSE

{/* Purpose content with background image */}

Our Mission

Our mission is to provide exceptional cleaning services that enhance the quality of life for our clients. We aim to create cleaner, healthier, and more comfortable environments through our professional cleaning solutions, while maintaining the highest standards of service and customer care.

Our Vision

We envision becoming the leading cleaning service provider in the UK, recognised for our excellence, reliability, and customer-focused approach. We strive to set new standards in the cleaning industry through innovation, sustainability, and continuous improvement.

Our Goals & Objectives

At Melody Cleaning Services, we have set clear goals to guide our growth and service delivery:

Deliver consistent, high-quality cleaning services that meet or exceed industry standards
Expand our service offerings to meet the evolving needs of our clients
Maintain a team of well-trained, professional staff who share our values
Minimise our environmental footprint through sustainable practices and products
Build long-term relationships with our clients based on trust and satisfaction
Continuously improve our processes and services through feedback and innovation

How We Operate

At Melody Cleaning Services, we follow a systematic approach to ensure consistent quality and customer satisfaction:

Initial Consultation: We begin with a thorough assessment of your cleaning needs and requirements.
Customised Plan: We develop a tailored cleaning plan specific to your property and preferences.
Team Assignment: We assign experienced and trained cleaning professionals who specialise in your required services.
Quality Execution: Our team executes the cleaning plan with attention to detail and using appropriate techniques.
Quality Check: We conduct a thorough inspection to ensure all areas meet our high standards.
Feedback Collection: We actively seek your feedback to continuously improve our services.

{/* Core Values */}

Our Core Values

The principles that guide everything we do

Integrity

We conduct our business with honesty, transparency, and ethical practices in all our interactions.

Excellence

We strive for excellence in every cleaning job, paying attention to the smallest details.

Reliability

We are dependable and consistent, always delivering on our promises to our clients.

Customer Focus

We prioritise our customers' needs and satisfaction above all else.

{/* Why Choose Us */}

Why Choose Us

What sets Melody Cleaning Services apart

Experienced Team

Our cleaning professionals are fully trained, insured, and background-checked, with years of experience in the industry.

Customised Solutions

We tailor our cleaning services to meet your specific needs, whether it's a one-time deep clean or regular maintenance.

Quality Guarantee

We stand behind our work with a 100% satisfaction guarantee on all our services.

Eco-Friendly Approach

We use environmentally friendly cleaning products that are safe for your family, pets, and the planet.

Competitive Pricing

We offer fair and transparent pricing with no hidden fees or surprises.

Reliable Service

We arrive on time, every time, and complete our work efficiently without compromising on quality.

{/* What We Do */}

What We Do

Our comprehensive range of cleaning services

{/* Service 1 */}

End of Tenancy

Comprehensive cleaning services for property transitions, ensuring your deposit is returned in full.

{/* Service 2 */}

Carpet Cleaning

Professional carpet cleaning to remove stains, odors, and allergens for a fresher home.

{/* Service 3 */}

Deep Clean

Thorough cleaning of all areas, including hard-to-reach spots, for a completely refreshed space.

{/* Service 4 */}

Restaurants and Hotels

Specialised cleaning for hospitality venues, maintaining hygiene standards and guest satisfaction.

{/* Service 5 */}

End of Construction

Post-construction cleaning to remove dust, debris, and make your new space ready for use.

{/* Service 6 */}

Mattress Cleaning

Specialised cleaning to remove dust mites, allergens, and stains from mattresses.

{/* Map and Hours */}

We Are Here

Serving clients across the United Kingdom

Our Service Area

We provide our cleaning services in:

• London
• Kent
• M25

We also cater to clients further afield, ensuring flexibility and availability wherever our expertise is needed.

Opening Hours

Monday - Sunday
8:00am - 10:00pm

Connect With Us

Facebook Instagram LinkedIn TikTok

) } [V0_FILE]typescript:file="app/api/redirect/route.ts" isMerged="true" import { NextRequest, NextResponse } from 'next/server'; export function GET(req: NextRequest) { const url = req.nextUrl.searchParams.get('url'); const id = req.nextUrl.searchParams.get('id') || 'unknown'; if (!url || !url.startsWith('http')) { return new NextResponse('Invalid or missing URL', { status: 400 }); } // Optional: Log the redirect console.log(`Redirect ID: ${id}, to URL: ${url}`); // Perform redirect return NextResponse.redirect(url); } [V0_FILE]typescript:file="app/api/submit-booking/route.ts" isMerged="true" import { NextResponse } from "next/server" import nodemailer from "nodemailer" export async function POST(request: Request) { try { const formData = await request.json() // Create a transporter const transporter = nodemailer.createTransport({ service: "Yahoo", auth: { user: "stephenie@yahoo.com", pass: process.env.EMAIL_PASSWORD, }, debug: true, // Enable debug output logger: true, // Log information to the console }) // Format the date if it's a string const formattedDate = formData.date || "Not specified" // Email content const mailOptions = { from: "stephenieagboje@yahoo.com", to: "max_frances@yahoo.com, melodycleaningservices@yahoo.com, contactmelodycleaning@gmail.com", subject: `New Booking Request: ${formData.serviceType}`, html: `

New Booking Request

Name: ${formData.name}

Email: ${formData.email}

Phone: ${formData.phone}

Address: ${formData.address}

Service Type: ${formData.serviceType}

Preferred Date: ${formattedDate}

Preferred Time: ${formData.time}

Additional Information: ${formData.message || "None provided"}

`, } // Send email const info = await transporter.sendMail(mailOptions) console.log("Email sent:", info.response) return NextResponse.json({ success: true, message: "Booking request submitted successfully" }) } catch (error) { console.error("Error submitting booking:", error) return NextResponse.json({ success: false, message: "Failed to submit booking request" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/submit-contact/route.ts" isMerged="true" // app/api/submit-contact/route.tsx import { NextRequest, NextResponse } from "next/server"; import nodemailer from "nodemailer"; export const runtime = 'nodejs'; // Ensure Node.js runtime export async function POST(request: NextRequest) { try { // Get form data that matches exactly what the contact form sends const { name, email, subject, message } = await request.json(); // Create transporter using Yahoo SMTP const transporter = nodemailer.createTransport({ host: "smtp.mail.yahoo.com", port: 465, secure: true, auth: { user: process.env.EMAIL_USER, pass: process.env.EMAIL_PASSWORD, }, tls: { rejectUnauthorized: true, }, }); // Email to business const businessEmailOptions = { from: process.env.EMAIL_USER || "stephenieagboje@yahoo.com", to: "max_frances@yahoo.com, melodycleaningservices@yahoo.com, contactmelodycleaning@gmail.com", subject: `New Contact Form Submission - ${subject || "General Inquiry"}`, html: `

New Contact Form Submission

Name: ${name}

Email: ${email}

Subject: ${subject || "Not specified"}

Message:

${message}

This message was sent from the Melody Cleaning Services website contact form.

`, }; // Auto-reply to customer const customerEmailOptions = { from: process.env.EMAIL_USER || "stephenieagboje@yahoo.com", to: email, subject: "Thank you for contacting Melody Cleaning Services", html: `

Thank you for your inquiry!

Dear ${name},

Thank you for contacting Melody Cleaning Services. We have received your message and will get back to you within 2 hours during business hours.

Your inquiry details:

Subject: ${subject || "General inquiry"}

Message: ${message}

If you need immediate assistance, please call us at 07453581984.

Best regards,
Melody Cleaning Services Team

`, }; // Send both emails await transporter.sendMail(businessEmailOptions); await transporter.sendMail(customerEmailOptions); return NextResponse.json({ success: true }); } catch (error) { console.error("Contact form error:", error); return NextResponse.json({ error: "Failed to send message" }, { status: 500 }); } } [V0_FILE]typescriptreact:file="app/book/page.tsx" isMerged="true" "use client" import { useState } from "react" import { useForm } from "react-hook-form" import { zodResolver } from "@hookform/resolvers/zod" import * as z from "zod" import { Button } from "@/components/ui/button" import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Calendar } from "@/components/ui/calendar" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { format } from "date-fns" import { CalendarIcon } from "lucide-react" import { useToast } from "@/components/ui/use-toast" import Image from "next/image" // Extend Window interface to include gtag declare global { interface Window { gtag: (...args: any[]) => void dataLayer: any[] } } const formSchema = z.object({ name: z.string().min(2, { message: "Name must be at least 2 characters.", }), email: z.string().email({ message: "Please enter a valid email address.", }), phone: z.string().min(10, { message: "Please enter a valid phone number.", }), address: z.string().min(5, { message: "Address must be at least 5 characters.", }), serviceType: z.string({ required_error: "Please select a service type.", }), date: z.date({ required_error: "Please select a date.", }), time: z.string({ required_error: "Please select a preferred time.", }), message: z.string().optional(), }) export default function BookingPage() { const [isSubmitting, setIsSubmitting] = useState(false) const [isSuccess, setIsSuccess] = useState(false) const { toast } = useToast() const form = useForm>({ resolver: zodResolver(formSchema), defaultValues: { name: "", email: "", phone: "", address: "", message: "", }, }) async function onSubmit(values: z.infer) { setIsSubmitting(true) try { // Convert the date to a string for JSON serialization const formData = { ...values, date: format(values.date, "yyyy-MM-dd"), } // Send the data to our API endpoint const response = await fetch("/api/submit-booking", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(formData), }) const data = await response.json() if (data.success) { setIsSuccess(true) form.reset() // 🎯 CONVERSION TRACKING - Book Online Form Submission if (typeof window !== "undefined" && typeof window.gtag === "function") { // Google Ads Conversion - Using correct conversion action window.gtag("event", "conversion", { send_to: "AW-17036896370/0D_uCLra3skaEPLQ6bs_", value: 50.0, // Estimated booking value currency: "GBP", transaction_id: `booking_${Date.now()}`, }) // Enhanced Conversion Event for GA4 window.gtag("event", "generate_lead", { currency: "GBP", value: 50.0, event_category: "engagement", event_label: "booking_form_submission", custom_parameters: { service_type: formData.serviceType, preferred_date: formData.date, preferred_time: formData.time, }, }) // GTM Custom Event if (window.dataLayer) { window.dataLayer.push({ event: "booking_form_submission", form_type: "booking", service_type: formData.serviceType, conversion_value: 50, currency: "GBP", user_data: { email: formData.email, phone: formData.phone, }, }) } console.log("Conversion tracking fired for booking form submission") } } else { throw new Error(data.message || "Failed to submit booking") } } catch (error) { console.error("Error submitting form:", error) toast({ title: "Error", description: "There was a problem submitting your booking. Please try again.", variant: "destructive", }) } finally { setIsSubmitting(false) } } return ( <> {/* Hero Banner */}

BOOK ONLINE

{/* Booking Form Section */}

Fill out the form below to book our cleaning services. We'll get back to you as soon as possible to confirm your booking and provide a quote.

{isSuccess ? (

Booking Request Submitted!

Thank you for your booking request. We'll contact you shortly to confirm the details and provide a quote.

) : (

BOOKING FORM

( Full Name )} /> ( Email )} />

( Phone Number )} /> ( Service Type )} />

( Address )} />

( Preferred Date date < new Date(new Date().setHours(0, 0, 0, 0))} initialFocus /> )} /> ( Preferred Time )} />

( Additional Information

</FormControl>
                          <FormDescription>
                            Include any specific requirements or areas that need special attention.
                          </FormDescription>
                          <FormMessage />
                        </FormItem>
                      )}
                    />

<div className="flex justify-center">
                      <Button
                        type="submit"
                        className="rounded-full bg-primary px-8 py-2 text-secondary hover:bg-primary/90"
                        disabled={isSubmitting}
                      >
                        {isSubmitting ? "Processing..." : "PROCEED"}
                      </Button>
                    </div>
                  </form>
                </Form>
              </div>
            )}
          </div>
        </div>
      </section>
    </>
  )
}
[V0_FILE]typescriptreact:file="app/commercialkitchen/page.tsx" isMerged="true"
'use client';

import React, { useState, useEffect } from 'react';
import Image from 'next/image';

const HeroSection = () => (
  <section className="relative w-full h-[100vh] bg-black">
    <a href="https://www.melodycleaningservices.com/book" target="_blank" rel="noopener noreferrer">
      <video
        autoPlay
        loop
        muted
        playsInline
       className="absolute inset-0 w-full h-full object-cover object-center cursor-pointer"
      >
        <source src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/y5A_2ee1WAEZIW8YrllUFF/public/CommercialKitchenHero.mp4" type="video/mp4" />
      </video>
    </a>
  </section>
);

const StickyNav = () => (
  <nav className="sticky top-0 bg-white z-50 shadow-sm border-b">
    <div className="container mx-auto flex justify-center gap-8 py-2 text-sm font-medium">
      <a href="#services" className="hover:text-primary text-[#3a0162]">WHAT WE DO</a>
      <a href="#why" className="hover:text-primary text-[#3a0162]">WHY CHOOSE US</a>
      <a href="#gallery" className="hover:text-primary text-[#3a0162]">GALLERY</a>
      <a href="#faqs" className="hover:text-primary text-[#3a0162]">FAQs</a>
      <a href="#contact" className="hover:text-primary text-[#3a0162]">CONTACT US</a>
    </div>
  </nav>
);

const services = [
  { title: "Tile & Floor Cleaning", details: "Deep cleaning and polishing of tiled and non-slip floors." },
  { title: "Oven & Cooking Equipment Cleaning", details: "Degreasing and sanitizing of ovens, fryers, and grills." },
  { title: "Grease Trap Cleaning", details: "Thorough grease trap pumping and odor elimination." },
  { title: "Hood & Extraction System Cleaning", details: "Cleaning of hoods, filters, and ductwork for fire safety." },
  { title: "Cold Room & Freezer Cleaning", details: "Mold, spill, and odor control in cold storage areas." },
  { title: "Worktops & Food Prep Surfaces", details: "Sanitization of prep counters to meet food hygiene standards." },
  { title: "Sink & Drain Cleaning", details: "Unclogging and disinfection of sinks and drains." },
  { title: "Wall Cladding Cleaning", details: "Removal of grease, splashes, and buildup on kitchen walls." },
  { title: "Appliance Exterior Detailing", details: "Wiping and polishing of all visible appliance surfaces." },
  { title: "Waste Area Sanitisation", details: "Cleaning and disinfection of bins and disposal zones." },
];

const ServicesSection = () => (
  <section
    id="services"
    className="py-24 text-center bg-[url('/FAQsBG.png')] bg-cover bg-center bg-no-repeat relative"
  >
    <div className="absolute inset-0 bg-white bg-opacity-70 z-0"></div>
    <div className="relative z-10">
      <h2 className="text-3xl font-semibold mb-8 text-[#3a0162] poppins-bold">OUR SERVICES</h2>
      <div className="grid grid-cols-2 md:grid-cols-5 gap-6 max-w-6xl mx-auto">
        {services.map((service, index) => (
          <div key={index} className="relative w-32 h-32 mx-auto group">
            <div className="absolute inset-0 bg-[#3a0162] text-[#9aedb6] rounded-full flex items-center justify-center text-xs text-center transition-opacity duration-300 group-hover:opacity-0">
              <span className="px-2">{service.title}</span>
            </div>
            <div className="absolute inset-0 bg-white text-[#3a0162] rounded-full flex items-center justify-center text-xs text-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 px-2">
              <span>{service.details}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const WhyChooseUs = () => {
  const reasons = [
    {
      title: "Certified and Insured",
      icon: "/CKCInsured.png"
    },
    {
      title: "Compliant with Food Safety Protocols",
      icon: "/CKCFood.png"
    },
    {
      title: "24hr Scheduling",
      icon: "/CKCHour.png"
    },
    {
      title: "Affordable Pricing",
      icon: "/CKCPrice.png"
    }
  ];

return (
    <section id="why" className="py-24 bg-white text-center">
      <h2 className="text-3xl font-semibold mb-10 text-[#3a0162] poppins-bold">WHY CHOOSE US</h2>
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6 max-w-6xl mx-auto px-4">
        {reasons.map((reason, i) => (
          <div
            key={i}
            className="bg-[#3a0162] text-white rounded-[1300px] shadow-lg p-6 flex flex-col items-center justify-center transform hover:scale-105 transition duration-300"
          >
            <div className="w-16 h-16 mb-4">
              <img src={reason.icon} alt={reason.title} className="w-full h-full object-contain rounded-full" />
            </div>
            <p className="text-sm font-semibold">{reason.title}</p>
          </div>
        ))}
      </div>
    </section>
  );
};

const GallerySection = () => {
  const [index, setIndex] = useState(0);
  const galleryItems = [
    <video key="v1" controls className="w-full h-[60vh] rounded-lg">
      <source src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/O5shTX2Z07rd1MfzAOCmJl/public/Gallery1.mp4" type="video/mp4" />
    </video>,
    <Image key="img2" src="/Gallery2.jpeg" alt="Gallery 2" width={800} height={400} className="rounded-lg" />,
    <Image key="img3" src="/Gallery3.jpeg" alt="Gallery 3" width={800} height={400} className="rounded-lg" />,
    <Image key="img4" src="/Gallery4.jpeg" alt="Gallery 4" width={800} height={400} className="rounded-lg" />,
    <Image key="img5" src="/Gallery5.jpeg" alt="Gallery 5" width={800} height={400} className="rounded-lg" />,
    <Image key="img5" src="/Gallery6.jpeg" alt="Gallery 5" width={800} height={400} className="rounded-lg" />,
    <Image key="img5" src="/Gallery7.jpeg" alt="Gallery 5" width={800} height={400} className="rounded-lg" />,
    <Image key="img5" src="/Gallery8.jpeg" alt="Gallery 5" width={800} height={400} className="rounded-lg" />,
    <Image key="img5" src="/Gallery9.jpeg" alt="Gallery 5" width={800} height={400} className="rounded-lg" />,
    <Image key="img5" src="/Gallery10.jpeg" alt="Gallery 5" width={800} height={400} className="rounded-lg" />,
    <Image key="img5" src="/Gallery11.jpeg" alt="Gallery 5" width={800} height={400} className="rounded-lg" />,
  ];

useEffect(() => {
    const interval = setInterval(() => {
      setIndex((prev) => (prev + 1) % galleryItems.length);
    }, 4000);
    return () => clearInterval(interval);
  }, []);

return (
    <section id="gallery" className="py-24 bg-gray-50 text-center">
      <h2 className="text-3xl font-semibold mb-8 text-[#3a0162] poppins-bold">GALLERY</h2>
      <div className="max-w-4xl mx-auto">{galleryItems[index]}</div>
    </section>
  );
};

const Testimonials = () => {
  const testimonials = [
    {
      text: "I’m convinced Melody Cleaning Services doesn’t just clean, they perform miracles.",
      name: "Chef Marco V., Owner of The Midnight Spoon"
    },
    {
      text: "Between flour storms and sugar glazes, our kitchen is a disaster nightly. Melody’s team arrives like a cleaning ballet—swift, spotless, and utterly charming. Even our ovens sparkle like tiaras. Five stars!",
      name: "Lady Brioche du Pan, Owner, The Royal Crumb Bakery"
    },
    {
      text: "I run one of the busiest open-flame kitchens. The grease buildup alone could terrify health inspectors. Melody Cleaning Services handled it like pros. By sunrise, the kitchen looked like it was built yesterday. Brilliant work!",
      name: "Gordon Flames, Executive Chef, Hell’s Ember Kitchen"
    },
    {
      text: "We cater to 300 guests a night, and the kitchen looks like a war zone afterward. Melody Cleaning doesn’t flinch. They arrive with smiles and leave behind a space cleaner than a Michelin showroom. Impeccable service.",
      name: "Chef Lorenzo Blaze, Head Chef, Inferno Bistro"
    },
    {
      text: "Being plant-based doesn’t mean being mess-free 😂. Between turmeric, beetroot, and coconut oil, our kitchen gets stained fast. Melody Cleaning handled it like artists. Even our cold press area gleamed!",
      name: "Ms. Peaches Gold, Restaurateur, Vegan Queens London"
    },
    {
      text: "We run 24 hours. Our grills are ancient. Our staff are messy. Melody Cleaning came in at 2AM and by 5AM we were health-inspector-ready. Can’t recommend them enough.",
      name: "Nigel Steam, Head Chef, The Industrial Grubhouse"
    },
    {
      text: "Melody Cleaning arrived in silence and left in sparkle. We barely noticed them working, but noticed the transformation. Every silver surface now doubles as a mirror. Elite service for elite spaces.",
      name: "Baroness Fifi du Fork, Owner, Le Luxe Supper Club"
    }
  ];

const [index, setIndex] = useState(0);
  const [fade, setFade] = useState(true);

useEffect(() => {
    const interval = setInterval(() => {
      setFade(false);
      setTimeout(() => {
        setIndex((prev) => (prev + 1) % testimonials.length);
        setFade(true);
      }, 500);
    }, 5000);
    return () => clearInterval(interval);
  }, []);

return (
    <section className="relative overflow-hidden py-24 text-black text-center">
      <video
        autoPlay
        loop
        muted
        playsInline
        className="absolute top-0 left-0 w-full h-full object-cover z-0"
      >
        <source src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/DwSxqmnCKQ0VX-gztH5ZN5/public/Testimonial.mp4" type="video/mp4" />
      </video>

<div
        className="relative z-20 max-w-xl mx-auto px-4 transition-opacity duration-500 cursor-pointer"
        onMouseEnter={() => {
          setFade(false);
          setTimeout(() => {
            setIndex((prev) => (prev + 1) % testimonials.length);
            setFade(true);
          }, 200);
        }}
        style={{ opacity: fade ? 1 : 0 }}
      >
        <h2 className="text-3xl font-semibold mb-6 text-[#9AEDB6] poppins-bold">
          WHY OUR CLIENTS CHOOSE US
        </h2>
        <div className="text-6xl text-[#3a0162] mb-4">“</div>
        <p className="text-lg">{testimonials[index].text}</p>
        <p className="mt-4 font-bold text-[#3a0162]">{testimonials[index].name}</p>
      </div>
    </section>
  );
};

const FAQSection = () => {
  const faqs = [
    { q: "What areas do you cover?", a: "We currently serve Commercial kitchens and Restaurants across London..." },
    { q: "Do I need to be home or on-site during the cleaning?", a: "Not at all!..." },
    { q: "How long does cleaning usually take?", a: "It depends on the size and services booked..." },
    { q: "Are your products eco-friendly?", a: "Yes, we use certified eco-friendly..." },
    { q: "Do you offer weekend or night cleaning?", a: "Absolutely! We work 24/7..." },
    { q: "What’s your pricing model?", a: "We provide customized quotes..." },
    { q: "Is your team trained?", a: "All our cleaners are trained, certified..." },
    { q: "Can I schedule recurring cleanings?", a: "Yes, we offer flexible recurring packages." },
    { q: "Do you handle emergency cleanups?", a: "Yes, we offer rapid-response emergency services." },
    { q: "What if I’m not satisfied?", a: "We guarantee satisfaction..." },
  ];

const [openIndex, setOpenIndex] = useState<number | null>(null);

return (
    <section id="faqs" className="relative py-24 text-[#3a0162] overflow-hidden">
      <Image
        src="/FAQsBG.png"
        alt="Background"
        fill
        className="object-cover opacity-100 z-0"
      />
      <div className="absolute inset-0 bg-white bg-opacity-60 z-0" />
      <div className="relative z-10">
        <h2 className="text-3xl font-semibold text-center mb-8 poppins-bold">FREQUENTLY ASKED QUESTIONS</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-6xl mx-auto">
          {faqs.map((item, i) => (
            <div key={i}>
              <button
                onClick={() => setOpenIndex(openIndex === i ? null : i)}
                className="w-full text-left p-4 bg-white shadow rounded-md flex justify-between items-center"
              >
                <span>{item.q}</span>
                <span>{openIndex === i ? "−" : "+"}</span>
              </button>
              {openIndex === i && (
                <div className="p-4 bg-white mt-1 rounded-md text-sm">{item.a}</div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const ContactSection = () => (
  <section id="contact" className="py-24 bg-[#3a0162] text-white">
    <div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8">
      <iframe
        src="https://www.google.com/maps?q=London,+UK&output=embed"
        width="100%"
        height="300"
        className="border-0 rounded-md"
        allowFullScreen
        loading="lazy"
      ></iframe>
      <div>
        <h2 className="text-3xl font-semibold mb-6 text-[#9aedb6] poppins-bold">CONTACT US</h2>
        <h3 className="text-xl font-medium mb-4">Request A Quote</h3>
        <a href="/book" className="text-white underline mb-2 inline-block">Fill Our Booking Form</a>
        <p className="mb-1">Call us: <a href="https://wa.me/447000000000" className="text-white">07453581984</a></p>
        <p>Email: <a href="mailto:info@melodycleaningservices.com" className="text-white">contactmelodycleaning@gmail.com</a></p>
      </div>
    </div>
  </section>
);

export default function CommercialKitchenCleaningPage() {
  return (
    <div>
      <HeroSection />
      <StickyNav />
      <ServicesSection />
      <WhyChooseUs />
      <GallerySection />
      <Testimonials />
      <FAQSection />
      <ContactSection />
    </div>
  );
}
[V0_FILE]css:file="app/globals.css" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --primary: 262 83% 19%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 98%;
  --secondary-foreground: 222.2 84% 4.9%;
  --muted: 210 40% 96%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96%;
  --accent-foreground: 222.2 84% 4.9%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 222.2 84% 4.9%;
  --radius: 0.5rem;
  --chart-1: 12 76% 61%;
  --chart-2: 173 58% 39%;
  --chart-3: 197 37% 24%;
  --chart-4: 43 74% 66%;
  --chart-5: 27 87% 67%;
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --card: 222.2 84% 4.9%;
  --card-foreground: 210 40% 98%;
  --popover: 222.2 84% 4.9%;
  --popover-foreground: 210 40% 98%;
  --primary: 210 40% 98%;
  --primary-foreground: 222.2 84% 4.9%;
  --secondary: 217.2 32.6% 17.5%;
  --secondary-foreground: 210 40% 98%;
  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;
  --accent: 217.2 32.6% 17.5%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: 212.7 26.8% 83.9%;
  --chart-1: 220 70% 50%;
  --chart-2: 160 60% 45%;
  --chart-3: 30 80% 55%;
  --chart-4: 280 65% 60%;
  --chart-5: 340 75% 55%;
}

* {
  border-color: hsl(var(--border));
}

body {
  color: hsl(var(--foreground));
  background: hsl(var(--background));
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

/* Custom styles */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.page-header {
  position: relative;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.page-header-content {
  position: relative;
  z-index: 2;
  text-align: center;
}

.hero-section {
  position: relative;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: white;
  max-width: 800px;
  padding: 0 2rem;
}

.service-card {
  background: white;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1);
}

.service-card-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.service-card-content {
  padding: 1.5rem;
}

.form-container {
  background: white;
  box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
}

.about-section {
  padding: 4rem 0;
}

.about-image-column {
  animation: slideInLeft 1s ease-out;
}

.about-text-column {
  animation: slideInRight 1s ease-out;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.purpose-section {
  position: relative;
  background-image: url("/Restaurant.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  min-height: 500px;
  display: flex;
  align-items: center;
}

.purpose-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 1;
}

.purpose-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 2rem;
}

.purpose-content h2 {
  color: hsl(var(--primary));
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 2rem;
}

.purpose-content p {
  color: #374151;
  font-size: 1.125rem;
  line-height: 1.75;
}

.service-section {
  position: relative;
  background-size: cover;
  background-position: center;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.6);
  z-index: 1;
}

.service-section-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 3rem 2rem;
}

.service-section h2 {
  color: hsl(var(--primary));
  font-size: 2.7rem;
  font-weight: bold;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 8px rgba(255, 255, 255, 0.9), -1px -1px 4px rgba(255, 255, 255, 0.7), 0 0 15px
    rgba(255, 255, 255, 0.8);
}

.domestic-section {
  background-image: url("/Domestic.png");
}

.commercial-section {
  background-image: url("/Commercial.png");
}

.specialised-section {
  background-image: url("/Specialised.png");
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.service-item {
  background: white;
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.service-item:hover {
  transform: translateY(-4px);
}

.service-item img {
  width: 80px;
  height: 80px;
  margin: 0 auto 1rem;
  border-radius: 50%;
}

.service-item h3 {
  color: hsl(var(--primary));
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.service-item p {
  color: #6b7280;
  line-height: 1.6;
}

.poppins-bold {
  font-family: var(--font-poppins), sans-serif;
  font-weight: 700;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .hero-section {
    height: 100vh;
    min-height: 500px;
  }

/* Fix video display on mobile - prevent overflow and ensure full visibility */
  .hero-video {
    width: 100%;
    max-width: 100vw;
    height: 100%;
    object-fit: cover;
    object-position: center;
    left: 50%;
    transform: translateX(-50%);
  }

.page-header {
    height: 300px;
  }

.service-section h2 {
    font-size: 2.2rem;
  }

.purpose-content h2 {
    font-size: 2rem;
  }

.container {
    padding: 0 1rem;
  }
}

/* Button styles */
.btn-primary {
  background-color: hsl(var(--primary));
  color: hsl(var(--secondary));
  border-radius: 9999px;
  padding: 0.5rem 2rem;
  font-weight: 600;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  width: fit-content;
  margin: 0 auto;
}

.btn-primary:hover {
  background-color: hsl(var(--primary) / 0.9);
  transform: translateY(-1px);
}

/* Service background images */
.service-bg-end-tenancy {
  background-image: url("/Carpet1.png");
}

.service-bg-carpet {
  background-image: url("/Endbg.png");
}

.service-bg-deep-clean {
  background-image: url("/Carpetbg.png");
}

.service-bg-restaurants {
  background-image: url("/Restaurantbg.png");
}

.service-bg-construction {
  background-image: url("/Endbg.png");
}

.service-bg-events {
  background-image: url("/Event3.png");
}
[V0_FILE]typescriptreact:file="app/sectors/page.tsx" isMerged="true"
import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import {
  Home,
  Building,
  UtensilsCrossed,
  Heart,
  Store,
  GraduationCap,
  Construction,
  PartyPopper,
  Factory,
} from "lucide-react"

export default function SectorsPage() {
  return (
    <>
      {/* Hero Banner */}
      <section className="page-header">
        <Image src="/Sectors.png" alt="Sectors We Serve" fill className="object-cover" />
        <div className="page-header-content">
          <h1 className="text-4xl font-bold text-white md:text-5xl">SECTORS WE SERVE</h1>
        </div>
      </section>

{/* Intro Section */}
      <section className="bg-white py-12">
        <div className="container">
          <div className="mx-auto max-w-3xl text-center">
            <p className="text-lg text-gray-700">
              At Melody Cleaning Services, we provide diversed cleaning solutions across a wide range of sectors. Our
              experienced team understands the unique requirements of each industry and delivers tailored services to
              meet those specific needs.
            </p>
          </div>
        </div>
      </section>

{/* Sectors Grid */}
      <section className="bg-gray-50 py-16">
        <div className="container">
          <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
            {/* Sector 1 */}
            <Card>
              <CardHeader className="flex flex-col items-center">
                <div className="mb-4 rounded-full bg-primary p-4">
                  <Home className="h-10 w-10 text-secondary" />
                </div>
                <CardTitle className="text-center text-xl text-primary">Residential</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-center text-gray-600">
                  We provide comprehensive cleaning services for homes, apartments, estates, and rental properties,
                  ensuring a clean and healthy living environment for families and individuals.
                </p>
                <div className="mt-6 flex justify-center">
                  <Button className="px-6 bg-primary text-secondary hover:bg-primary/90 mx-auto block">
                    <Link href="/services">Learn More</Link>
                  </Button>
                </div>
              </CardContent>
            </Card>

{/* Sector 2 */}
            <Card>
              <CardHeader className="flex flex-col items-center">
                <div className="mb-4 rounded-full bg-primary p-4">
                  <Building className="h-10 w-10 text-secondary" />
                </div>
                <CardTitle className="text-center text-xl text-primary">Commercial Offices</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-center text-gray-600">
                  We help maintain clean, professional workspaces that boost productivity and create a positive
                  impression for clients and employees alike.
                </p>
                <div className="mt-6 flex justify-center">
                  <Button className="px-6 bg-primary text-secondary hover:bg-primary/90 mx-auto block">
                    <Link href="/services#commercial-office-workshop">Learn More</Link>
                  </Button>
                </div>
              </CardContent>
            </Card>

{/* Sector 3 */}
            <Card>
              <CardHeader className="flex flex-col items-center">
                <div className="mb-4 rounded-full bg-primary p-4">
                  <UtensilsCrossed className="h-10 w-10 text-secondary" />
                </div>
                <CardTitle className="text-center text-xl text-primary">Hospitality</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-center text-gray-600">
                  Our specialised cleaning services for hotels, restaurants, cafes, and other hospitality spaces help
                  maintain the highest standards of cleanliness and hygiene for guest satisfaction.
                </p>
                <div className="mt-6 flex justify-center">
                  <Button className="px-6 bg-primary text-secondary hover:bg-primary/90 mx-auto block">
                    <Link href="/services#commercial-restaurants-hotels">Learn More</Link>
                  </Button>
                </div>
              </CardContent>
            </Card>

{/* Sector 4 */}
            <Card>
              <CardHeader className="flex flex-col items-center">
                <div className="mb-4 rounded-full bg-primary p-4">
                  <Heart className="h-10 w-10 text-secondary" />
                </div>
                <CardTitle className="text-center text-xl text-primary">Healthcare</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-center text-gray-600">
                  We provide thorough cleaning and sanitisation for medical facilities, clinics, and care homes,
                  adhering to strict health and safety protocols.
                </p>
                <div className="mt-6 flex justify-center">
                  <Button className="px-6 bg-primary text-secondary hover:bg-primary/90 mx-auto block">
                    <Link href="/services#commercial-care-homes">Learn More</Link>
                  </Button>
                </div>
              </CardContent>
            </Card>

{/* Sector 5 */}
            <Card>
              <CardHeader className="flex flex-col items-center">
                <div className="mb-4 rounded-full bg-primary p-4">
                  <Store className="h-10 w-10 text-secondary" />
                </div>
                <CardTitle className="text-center text-xl text-primary">Retail</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-center text-gray-600">
                  Our cleaning services for shops and retail spaces help create an inviting environment for customers
                  and maintain a professional appearance.
                </p>
                <div className="mt-6 flex justify-center">
                  <Button className="px-6 bg-primary text-secondary hover:bg-primary/90 mx-auto block">
                    <Link href="/services#commercial-shop-cleaning">Learn More</Link>
                  </Button>
                </div>
              </CardContent>
            </Card>

{/* Sector 6 */}
            <Card>
              <CardHeader className="flex flex-col items-center">
                <div className="mb-4 rounded-full bg-primary p-4">
                  <GraduationCap className="h-10 w-10 text-secondary" />
                </div>
                <CardTitle className="text-center text-xl text-primary">Education</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-center text-gray-600">
                  We provide comprehensive cleaning services for schools, colleges, and universities, creating a clean
                  and healthy learning environment.
                </p>
                <div className="mt-6 flex justify-center">
                  <Button className="px-6 bg-primary text-secondary hover:bg-primary/90 mx-auto block">
                    <Link href="/services">Learn More</Link>
                  </Button>
                </div>
              </CardContent>
            </Card>

{/* Sector 7 */}
            <Card>
              <CardHeader className="flex flex-col items-center">
                <div className="mb-4 rounded-full bg-primary p-4">
                  <Construction className="h-10 w-10 text-secondary" />
                </div>
                <CardTitle className="text-center text-xl text-primary">Construction</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-center text-gray-600">
                  Our post-construction cleaning services help prepare newly built or renovated spaces for occupation,
                  removing dust, debris, and construction residue.
                </p>
                <div className="mt-6 flex justify-center">
                  <Button className="px-6 bg-primary text-secondary hover:bg-primary/90 mx-auto block">
                    <Link href="/services#specialised-end-of-construction">Learn More</Link>
                  </Button>
                </div>
              </CardContent>
            </Card>

{/* Sector 8 */}
            <Card>
              <CardHeader className="flex flex-col items-center">
                <div className="mb-4 rounded-full bg-primary p-4">
                  <PartyPopper className="h-10 w-10 text-secondary" />
                </div>
                <CardTitle className="text-center text-xl text-primary">Events</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-center text-gray-600">
                  We provide pre and post-event cleaning services for venues of all sizes, ensuring spaces are pristine
                  before guests arrive and quickly restored afterward.
                </p>
                <div className="mt-6 flex justify-center">
                  <Button className="px-6 bg-primary text-secondary hover:bg-primary/90 mx-auto block">
                    <Link href="/services#specialised-pre-post-event">Learn More</Link>
                  </Button>
                </div>
              </CardContent>
            </Card>

{/* Sector 9 */}
            <Card>
              <CardHeader className="flex flex-col items-center">
                <div className="mb-4 rounded-full bg-primary p-4">
                  <Factory className="h-10 w-10 text-secondary" />
                </div>
                <CardTitle className="text-center text-xl text-primary">Industrial</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-center text-gray-600">
                  Our exceptional cleaning services for factories, warehouses, and industrial facilities help maintain
                  safety standards and operational efficiency.
                </p>
                <div className="mt-6 flex justify-center">
                  <Button className="px-6 bg-primary text-secondary hover:bg-primary/90 mx-auto block">
                    <Link href="/services">Learn More</Link>
                  </Button>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* CTA Section */}
      <section className="bg-white py-16">
        <div className="container">
          <div className="rounded-lg bg-primary p-8 text-center shadow-lg">
            <h2 className="mb-4 text-3xl font-bold text-secondary">Need a Customised Cleaning Solution?</h2>
            <p className="mb-8 text-lg text-white">
              Contact us today to discuss your specific requirements. Our team will create a tailored cleaning plan for
              your sector.
            </p>
            <Button size="lg" variant="secondary" className="bg-secondary text-primary hover:bg-secondary/90">
              <Link href="/contact">Contact Us</Link>
            </Button>
          </div>
        </div>
      </section>
    </>
  )
}
[V0_FILE]typescriptreact:file="app/services/page.tsx" isMerged="true"
import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import {
  FileText,
  MoveRight,
  Brush,
  Sparkles,
  Book as Broom,
  Building,
  UtensilsCrossed,
  Heart,
  Store,
  Construction,
  PartyPopper,
  Bed,
  Armchair,
  Home,
} from "lucide-react"

export default function ServicesPage() {
  return (
    <>
      {/* Hero Banner */}
      <section className="page-header">
        <Image src="/Services.png" alt="Our Services" fill className="object-cover" />
        <div className="page-header-content">
          <h1 className="text-4xl font-bold text-white md:text-5xl">OUR SERVICES</h1>
        </div>
      </section>

{/* Intro Section */}
      <section className="bg-white py-12">
        <div className="container">
          <div className="mx-auto max-w-3xl text-center">
            <p className="text-lg text-gray-700">
              At Melody Cleaning Services, we offer a comprehensive range of cleaning solutions tailored to meet the
              unique needs of our clients. Whether you need a one-time deep clean or regular maintenance, our
              experienced team is equipped to deliver exceptional results every time.
            </p>
          </div>
        </div>
      </section>

{/* Domestic Cleaning Section with Background */}
      <section className="py-16">
        <div className="container">
          {/* Full-width header image for Domestic Cleaning */}
          <div className="domestic-header-bg mb-12 relative w-full overflow-hidden rounded-lg">
            <Image src="/Domestic.png" alt="Domestic Cleaning" fill className="object-cover" />
            <div className="absolute inset-0 bg-black/50 flex items-center justify-center">
              <h2 className="text-center text-3xl font-bold text-white">DOMESTIC CLEANING</h2>
            </div>
          </div>

{/* Domestic Cleaning Content with Background */}
          <div className="domestic-content-bg rounded-lg p-8 relative mb-16">
            <div className="domestic-content relative z-10">
              <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
                {/* Service 1 */}
                <Card className="service-card bg-white/90">
                  <CardHeader className="flex flex-col items-center">
                    <div className="mb-4 rounded-full bg-primary/10 p-3">
                      <FileText className="h-10 w-10 text-primary" />
                    </div>
                    <CardTitle className="text-center text-xl text-primary">End of Tenancy</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <CardDescription className="text-center text-gray-700">
                      Comprehensive cleaning services for property transitions, ensuring your deposit is returned in
                      full. We clean every corner of your property to meet landlord and agency standards.
                    </CardDescription>
                  </CardContent>
                  <CardFooter className="flex flex-col items-center">
                    <Button className="mb-2 px-6 bg-primary text-secondary hover:bg-primary/90 mx-auto block">
                      <Link href="/book">Book Now</Link>
                    </Button>
                  </CardFooter>
                </Card>

{/* Service 3 */}
                <Card className="service-card bg-white/90">
                  <CardHeader className="flex flex-col items-center">
                    <div className="mb-4 rounded-full bg-primary/10 p-3">
                      <Brush className="h-10 w-10 text-primary" />
                    </div>
                    <CardTitle className="text-center text-xl text-primary">Carpet Cleaning</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <CardDescription className="text-center text-gray-700">
                      Professional carpet cleaning to remove stains, odors, and allergens for a fresher home. Our deep
                      cleaning methods reach deep into carpet fibers to extract dirt and bacteria.
                    </CardDescription>
                  </CardContent>
                  <CardFooter className="flex flex-col items-center">
                    <Button className="mb-2 px-6 bg-primary text-secondary hover:bg-primary/90 mx-auto block">
                      <Link href="/book">Book Now</Link>
                    </Button>
                  </CardFooter>
                </Card>

{/* Service 4 */}
                <Card className="service-card bg-white/90">
                  <CardHeader className="flex flex-col items-center">
                    <div className="mb-4 rounded-full bg-primary/10 p-3">
                      <Sparkles className="h-10 w-10 text-primary" />
                    </div>
                    <CardTitle className="text-center text-xl text-primary">Deep Clean</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <CardDescription className="text-center text-gray-700">
                      Thorough cleaning of all areas, including hard-to-reach spots, for a completely refreshed space.
                      Perfect for seasonal cleaning or before special occasions.
                    </CardDescription>
                  </CardContent>
                  <CardFooter className="flex flex-col items-center">
                    <Button className="mb-2 px-6 bg-primary text-secondary hover:bg-primary/90 mx-auto block">
                      <Link href="/book">Book Now</Link>
                    </Button>
                  </CardFooter>
                </Card>

{/* Service 5 */}
                <Card className="service-card bg-white/90">
                  <CardHeader className="flex flex-col items-center">
                    <div className="mb-4 rounded-full bg-primary/10 p-3">
                      <Broom className="h-10 w-10 text-primary" />
                    </div>
                    <CardTitle className="text-center text-xl text-primary">Standard Cleaning</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <CardDescription className="text-center text-gray-700">
                      Regular maintenance cleaning to keep your home looking its best. We focus on high-traffic areas
                      and common surfaces to maintain cleanliness.
                    </CardDescription>
                  </CardContent>
                  <CardFooter className="flex flex-col items-center">
                    <Button className="mb-2 px-6 bg-primary text-secondary hover:bg-primary/90 mx-auto block">
                      <Link href="/book">Book Now</Link>
                    </Button>
                  </CardFooter>
                </Card>

{/* Service 6 */}
                <Card className="service-card bg-white/90">
                  <CardHeader className="flex flex-col items-center">
                    <div className="mb-4 rounded-full bg-primary/10 p-3">
                      <Home className="h-10 w-10 text-primary" />
                    </div>
                    <CardTitle className="text-center text-xl text-primary">General Housekeeping</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <CardDescription className="text-center text-gray-700">
                      Ongoing cleaning services to maintain a tidy and organised home. Perfect for busy professionals
                      who want to come home to a clean space.
                    </CardDescription>
                  </CardContent>
                  <CardFooter className="flex flex-col items-center">
                    <Button className="mb-2 px-6 bg-primary text-secondary hover:bg-primary/90 mx-auto block">
                      <Link href="/book">Book Now</Link>
                    </Button>
                  </CardFooter>
                </Card>

{/* Service 7 */}
                <Card className="service-card bg-white/90">
                  <CardHeader className="flex flex-col items-center">
                    <div className="mb-4 rounded-full bg-primary/10 p-3">
                      <Bed className="h-10 w-10 text-primary" />
                    </div>
                    <CardTitle className="text-center text-xl text-primary">Mattress Cleaning</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <CardDescription className="text-center text-gray-700">
                      Expert cleaning to remove dust mites, allergens, and stains from mattresses. Improve your sleep
                      quality with a clean, fresh mattress.
                    </CardDescription>
                  </CardContent>
                  <CardFooter className="flex flex-col items-center">
                    <Button className="mb-2 px-6 bg-primary text-secondary hover:bg-primary/90 mx-auto block">
                      <Link href="/book">Book Now</Link>
                    </Button>
                  </CardFooter>
                </Card>

{/* Service 8 */}
                <Card className="service-card bg-white/90">
                  <CardHeader className="flex flex-col items-center">
                    <div className="mb-4 rounded-full bg-primary/10 p-3">
                      <Armchair className="h-10 w-10 text-primary" />
                    </div>
                    <CardTitle className="text-center text-xl text-primary">Upholstery Cleaning</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <CardDescription className="text-center text-gray-700">
                      Professional cleaning for sofas, chairs, and other upholstered furniture to remove dirt, stains,
                      and odors, extending the life of your furniture.
                    </CardDescription>
                  </CardContent>
                  <CardFooter className="flex flex-col items-center">
                    <Button className="mb-2 px-6 bg-primary text-secondary hover:bg-primary/90 mx-auto block">
                      <Link href="/book">Book Now</Link>
                    </Button>
                  </CardFooter>
                </Card>

<Card className="service-card bg-white/90" id="domestic-mental-health-hoarding">
                  <CardHeader className="flex flex-col items-center">
                    <div className="mb-4 rounded-full bg-primary/10 p-3">
                      <Heart className="h-10 w-10 text-primary" />
                    </div>
                    <CardTitle className="text-center text-xl text-primary">
                      Mental Health Crisis/Hoarding Clean-up
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <CardDescription className="text-center text-gray-700">
                      Compassionate and discreet cleaning services for hoarding situations and crisis clean-ups, handled
                      with sensitivity, respect, and complete confidentiality.
                    </CardDescription>
                  </CardContent>
                  <CardFooter className="flex flex-col items-center">
                    <Button className="mb-2 px-6 bg-primary text-secondary hover:bg-primary/90 mx-auto block">
                      <Link href="/book">Book Now</Link>
                    </Button>
                  </CardFooter>
                </Card>

<Card className="service-card bg-white/90" id="domestic-funeral-death">
                  <CardHeader className="flex flex-col items-center">
                    <div className="mb-4 rounded-full bg-primary/10 p-3">
                      <Heart className="h-10 w-10 text-primary" />
                    </div>
                    <CardTitle className="text-center text-xl text-primary">Funeral/Death Cleaning</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <CardDescription className="text-center text-gray-700">
                      Respectful and thorough biohazard and death cleaning services performed with utmost care,
                      discretion, and professional standards.
                    </CardDescription>
                  </CardContent>
                  <CardFooter className="flex flex-col items-center">
                    <Button className="mb-2 px-6 bg-primary text-secondary hover:bg-primary/90 mx-auto block">
                      <Link href="/book">Book Now</Link>
                    </Button>
                  </CardFooter>
                </Card>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* Commercial Cleaning Section with Background */}
      <section className="py-16">
        <div className="container">
          {/* Full-width header image for Commercial Cleaning */}
          <div className="commercial-header-bg mb-12 relative w-full overflow-hidden rounded-lg">
            <Image src="/Commercial.png" alt="Commercial Cleaning" fill className="object-cover" />
            <div className="absolute inset-0 bg-black/50 flex items-center justify-center">
              <h2 className="text-center text-3xl font-bold text-white z-10">COMMERCIAL CLEANING</h2>
            </div>
          </div>

{/* Commercial Cleaning Content with Background */}
          <div className="commercial-content-bg rounded-lg p-8 relative mb-16">
            <div className="commercial-content relative z-10">
              <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
                {/* Service 1 */}
                <Card className="service-card bg-white/90">
                  <CardHeader className="flex flex-col items-center">
                    <div className="mb-4 rounded-full bg-primary/10 p-3">
                      <Building className="h-10 w-10 text-primary" />
                    </div>
                    <CardTitle className="text-center text-xl text-primary">Office and Workshop</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <CardDescription className="text-center text-gray-700">
                      Bespoke cleaning services for offices and workshops, creating a clean and productive environment
                      for your team.
                    </CardDescription>
                  </CardContent>
                  <CardFooter className="flex flex-col items-center">
                    <Button className="mb-2 px-6 bg-primary text-secondary hover:bg-primary/90 mx-auto block">
                      <Link href="/book">Book Now</Link>
                    </Button>
                  </CardFooter>
                </Card>

{/* Service 3 */}
                <Card className="service-card bg-white/90">
                  <CardHeader className="flex flex-col items-center">
                    <div className="mb-4 rounded-full bg-primary/10 p-3">
                      <Heart className="h-10 w-10 text-primary" />
                    </div>
                    <CardTitle className="text-center text-xl text-primary">Care Homes</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <CardDescription className="text-center text-gray-700">
                      Thorough and sensitive cleaning services for care homes, focusing on hygiene and safety for
                      residents and staff.
                    </CardDescription>
                  </CardContent>
                  <CardFooter className="flex flex-col items-center">
                    <Button className="mb-2 px-6 bg-primary text-secondary hover:bg-primary/90 mx-auto block">
                      <Link href="/book">Book Now</Link>
                    </Button>
                  </CardFooter>
                </Card>

{/* Service 4 */}
                <Card className="service-card bg-white/90">
                  <CardHeader className="flex flex-col items-center">
                    <div className="mb-4 rounded-full bg-primary/10 p-3">
                      <Store className="h-10 w-10 text-primary" />
                    </div>
                    <CardTitle className="text-center text-xl text-primary">Shop Cleaning</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <CardDescription className="text-center text-gray-700">
                      Retail space cleaning services to create an inviting environment for customers and maintain a
                      professional appearance.
                    </CardDescription>
                  </CardContent>
                  <CardFooter className="flex flex-col items-center">
                    <Button className="mb-2 px-6 bg-primary text-secondary hover:bg-primary/90 mx-auto block">
                      <Link href="/book">Book Now</Link>
                    </Button>
                  </CardFooter>
                </Card>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* Specialised Cleaning Section with Background */}
      <section className="py-16">
        <div className="container">
          {/* Full-width header image for Specialised Cleaning */}
          <div className="specialised-header-bg mb-12 relative w-full overflow-hidden rounded-lg">
            <Image src="/Specialised.png" alt="Specialised Cleaning" fill className="object-cover" />
            <div className="absolute inset-0 bg-black/50 flex items-center justify-center">
              <h2 className="text-center text-3xl font-bold text-white z-10">SPECIALISED CLEANING</h2>
            </div>
          </div>

{/* Specialised Cleaning Content with Background */}
          <div className="specialised-content-bg rounded-lg p-8 relative">
            <div className="specialised-content relative z-10">
              <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
                {/* Service 1 */}
                <Card className="service-card bg-white/90">
                  <CardHeader className="flex flex-col items-center">
                    <div className="mb-4 rounded-full bg-primary/10 p-3">
                      <Construction className="h-10 w-10 text-primary" />
                    </div>
                    <CardTitle className="text-center text-xl text-primary">End of Construction</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <CardDescription className="text-center text-gray-700">
                      Post-construction cleaning to remove dust, debris, and make your new space ready for use. We
                      handle the tough cleanup so you can enjoy your newly built or renovated space.
                    </CardDescription>
                  </CardContent>
                  <CardFooter className="flex flex-col items-center">
                    <Button className="mb-2 px-6 bg-primary text-secondary hover:bg-primary/90 mx-auto block">
                      <Link href="/book">Book Now</Link>
                    </Button>
                  </CardFooter>
                </Card>

{/* Service 2 */}
                <Card className="service-card bg-white/90">
                  <CardHeader className="flex flex-col items-center">
                    <div className="mb-4 rounded-full bg-primary/10 p-3">
                      <PartyPopper className="h-10 w-10 text-primary" />
                    </div>
                    <CardTitle className="text-center text-xl text-primary">Pre/Post Event</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <CardDescription className="text-center text-gray-700">
                      Bespoke cleaning services before and after events to ensure your venue looks perfect for guests
                      and is quickly restored afterward. Perfect for parties, corporate events, and celebrations.
                    </CardDescription>
                  </CardContent>
                  <CardFooter className="flex flex-col items-center">
                    <Button className="mb-2 px-6 bg-primary text-secondary hover:bg-primary/90 mx-auto block">
                      <Link href="/book">Book Now</Link>
                    </Button>
                  </CardFooter>
                </Card>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  )
}
[V0_FILE]json:file="components.json" isMerged="true"
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}
[V0_FILE]typescriptreact:file="components/FormTracker.tsx" isMerged="true"
"use client";

import { useEffect } from "react";

declare global {
       interface Window {
         gtag: (...args: any[]) => void;
       }
     }

export default function FormTracker() {
       useEffect(() => {
         const handleFormSubmit = (event: Event) => {
           const form = event.target as HTMLFormElement;
           const formId = form.id;

if (typeof window !== "undefined" && window.gtag) {
             if (formId === "contact-form") {
               window.gtag("event", "conversion", {
                 send_to: "AW-17036896370/contact_conversion",
                 value: 1.0,
                 currency: "GBP",
               });
               window.gtag("event", "contact_form_submit", {
                 event_category: "Lead",
                 event_label: "Contact Form Submission - Melody Cleaning",
                 value: 1,
               });
               console.log("📧 Contact form submitted");
             } else if (formId === "booking-form") {
               window.gtag("event", "conversion", {
                 send_to: "AW-17036896370/booking_conversion",
                 value: 1.0,
                 currency: "GBP",
               });
               window.gtag("event", "booking_form_submit", {
                 event_category: "Lead",
                 event_label: "Booking Form Submission - Melody Cleaning",
                 value: 1,
               });
               console.log("📅 Booking form submitted");
             }
           }
         };

const contactForm = document.getElementById("contact-form");
         const bookingForm = document.getElementById("booking-form");

if (contactForm) {
           contactForm.addEventListener("submit", handleFormSubmit);
         }
         if (bookingForm) {
           bookingForm.addEventListener("submit", handleFormSubmit);
         }

return () => {
           if (contactForm) {
             contactForm.removeEventListener("submit", handleFormSubmit);
           }
           if (bookingForm) {
             bookingForm.removeEventListener("submit", handleFormSubmit);
           }
         };
       }, []);

return null;
     }
[V0_FILE]typescriptreact:file="components/conversion-debug-panel.tsx" isMerged="true"
"use client";

import { useState, useEffect } from "react";

export default function ConversionDebugPanel() {
  const [events, setEvents] = useState<string[]>([]);
  const [isMounted, setIsMounted] = useState(false);

useEffect(() => {
    setIsMounted(true);

const handleGtagEvent = (event: any) => {
      setEvents((prev) => [...prev, JSON.stringify(event.detail || event)]);
    };

if (typeof window !== "undefined") {
      window.addEventListener("gtag_event", handleGtagEvent as EventListener);
      return () => window.removeEventListener("gtag_event", handleGtagEvent as EventListener);
    }
  }, []);

if (!isMounted || process.env.NODE_ENV !== "development") return null;

return (
    <div className="fixed bottom-0 right-0 bg-white p-4 border border-gray-300 shadow-lg max-h-64 overflow-auto">
      <h3 className="text-sm font-bold">Conversion Debug</h3>
      <ul className="text-xs">
        {events.map((event, index) => (
          <li key={index}>{event}</li>
        ))}
      </ul>
    </div>
  );
}
[V0_FILE]typescriptreact:file="components/enhanced-phone-tracker.tsx" isMerged="true"
"use client";

import { useEffect } from "react";

declare global {
  interface Window {
    gtag: (...args: any[]) => void;
  }
}

export default function EnhancedPhoneTracker() {
  useEffect(() => {
    const handlePhoneClick = (event: Event) => {
      const target = event.target as HTMLAnchorElement;
      const phoneNumber = target.href.replace("tel:", "");

if (typeof window !== "undefined" && window.gtag) {
        // Fire Google Ads conversion for phone calls
        window.gtag("event", "conversion", {
          send_to: "AW-17036896370/phone_call_conversion",
          value: 1.0,
          currency: "GBP",
        });

// Track as custom event for Google Analytics
        window.gtag("event", "phone_click", {
          event_category: "Lead",
          event_label: `Phone Call - ${phoneNumber}`,
          value: 1,
        });

console.log(`📞 Phone click tracked: ${phoneNumber}`);
      }
    };

const handleWhatsAppClick = (event: Event) => {
      if (typeof window !== "undefined" && window.gtag) {
        // Fire Google Ads conversion for WhatsApp
        window.gtag("event", "conversion", {
          send_to: "AW-17036896370/whatsapp_conversion",
          value: 1.0,
          currency: "GBP",
        });

// Track as custom event for Google Analytics
        window.gtag("event", "whatsapp_click", {
          event_category: "Lead",
          event_label: "WhatsApp Contact - Melody Cleaning",
          value: 1,
        });

console.log("💬 WhatsApp click tracked");
      }
    };

// Add event listeners to phone links
    const phoneLinks = document.querySelectorAll('a[href^="tel:"]');
    phoneLinks.forEach((link) => {
      link.addEventListener("click", handlePhoneClick);
    });

// Add event listeners to WhatsApp links
    const whatsappLinks = document.querySelectorAll('a[href*="wa.me"], a[href*="whatsapp.com"]');
    whatsappLinks.forEach((link) => {
      link.addEventListener("click", handleWhatsAppClick);
    });

// Cleanup function
    return () => {
      phoneLinks.forEach((link) => {
        link.removeEventListener("click", handlePhoneClick);
      });
      whatsappLinks.forEach((link) => {
        link.removeEventListener("click", handleWhatsAppClick);
      });
    };
  }, []);

return null;
}
[V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true"
import Link from "next/link"
import { Facebook, Instagram, Linkedin } from "lucide-react"
import { FaTiktok } from "react-icons/fa"

const Footer = () => {
  return (
    <footer className="bg-gray-100 pt-12">
      <div className="container pb-8">
        <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4">
          <div>
            <h3 className="mb-4 text-lg font-bold text-primary">Melody Cleaning Services</h3>
            <p className="mb-4 text-sm text-gray-600">
              Professional cleaning services across the UK. We provide high-quality cleaning solutions for both domestic
              and commercial clients.
            </p>
            <div className="flex space-x-4">
              <Link
                href="https://www.facebook.com/profile.php?id=61575544748505"
                target="_blank"
                rel="noopener noreferrer"
                className="text-primary hover:text-primary/80"
              >
                <Facebook className="h-5 w-5" />
                <span className="sr-only">Facebook</span>
              </Link>
              <Link
                href="https://www.instagram.com/melodycleaningservices"
                target="_blank"
                rel="noopener noreferrer"
                className="text-primary hover:text-primary/80"
              >
                <Instagram className="h-5 w-5" />
                <span className="sr-only">Instagram</span>
              </Link>
              <Link
                href="https://www.linkedin.com/in/melodycleaningservices"
                target="_blank"
                rel="noopener noreferrer"
                className="text-primary hover:text-primary/80"
              >
                <Linkedin className="h-5 w-5" />
                <span className="sr-only">LinkedIn</span>
              </Link>
              <Link
                href="https://www.tiktok.com/@melodycleaningservices"
                target="_blank"
                rel="noopener noreferrer"
                className="text-primary hover:text-primary/80"
              >
                <FaTiktok className="h-5 w-5" />
                <span className="sr-only">TikTok</span>
              </Link>
            </div>
          </div>

<div>
            <h3 className="mb-4 text-lg font-bold text-primary">Services</h3>
            <ul className="space-y-2 text-sm">
              <li>
                <Link href="/services#domestic-end-of-tenancy" className="text-gray-600 hover:text-primary">
                  End of Tenancy
                </Link>
              </li>
              <li>
                <Link href="/services#domestic-deep-clean" className="text-gray-600 hover:text-primary">
                  Deep Clean
                </Link>
              </li>
              <li>
                <Link href="/services#commercial-restaurants-hotels" className="text-gray-600 hover:text-primary">
                  Restaurants and Hotels
                </Link>
              </li>
              <li>
                <Link href="/services#domestic-carpet-cleaning" className="text-gray-600 hover:text-primary">
                  Carpet Cleaning
                </Link>
              </li>
              <li>
                <Link href="/services#specialised-end-of-construction" className="text-gray-600 hover:text-primary">
                  End of Construction
                </Link>
              </li>
              <li>
                <Link href="/services#specialised-pre-post-event" className="text-gray-600 hover:text-primary">
                  Pre/Post Event
                </Link>
              </li>
              <li>
                <Link href="/services#domestic-mental-health-hoarding" className="text-gray-600 hover:text-primary">
                  Mental Health Crisis/Hoarding Clean-up
                </Link>
              </li>
              <li>
                <Link href="/services#domestic-funeral-death" className="text-gray-600 hover:text-primary">
                  Funeral/Death Cleaning
                </Link>
              </li>
            </ul>
          </div>

<div>
            <h3 className="mb-4 text-lg font-bold text-primary">Quick Links</h3>
            <ul className="space-y-2 text-sm">
              <li>
                <Link href="/" className="text-gray-600 hover:text-primary">
                  Home
                </Link>
              </li>
              <li>
                <Link href="/about" className="text-gray-600 hover:text-primary">
                  About Us
                </Link>
              </li>
              <li>
                <Link href="/services" className="text-gray-600 hover:text-primary">
                  Services
                </Link>
              </li>
              <li>
                <Link href="/sectors" className="text-gray-600 hover:text-primary">
                  Sectors
                </Link>
              </li>
              <li>
                <Link href="/book" className="text-gray-600 hover:text-primary">
                  Book Online
                </Link>
              </li>
              <li>
                <Link href="/contact" className="text-gray-600 hover:text-primary">
                  Contact Us
                </Link>
              </li>
            </ul>
          </div>

<div>
            <h3 className="mb-4 text-lg font-bold text-primary">Contact Us</h3>
            <ul className="space-y-2 text-sm">
              <li className="text-gray-600">
                <strong>Email:</strong>{" "}
                <a href="mailto:melodycleaningservices@yahoo.com">melodycleaningservices@yahoo.com</a>
              </li>
              <li className="text-gray-600">
                <strong>Phone:</strong> <a href="tel:07453581984">07453581984</a>
              </li>
              <li className="text-gray-600">
                <strong>Hours:</strong>
                <br />
                Monday - Sunday
                <br />
                8:00am - 10:00pm
              </li>
            </ul>
          </div>
        </div>
      </div>

<div className="border-t border-gray-200 py-6">
        <div className="container flex flex-col items-center justify-between space-y-4 text-center md:flex-row md:space-y-0 md:text-left">
          <p className="text-xs text-gray-600">
            © {new Date().getFullYear()} Melody Cleaning Services. All rights reserved.
          </p>
          <div className="flex space-x-4 text-xs">
            <Link href="/privacy-policy" className="text-gray-600 hover:text-primary">
              Privacy Policy
            </Link>
            <Link href="/terms-conditions" className="text-gray-600 hover:text-primary">
              Terms & Conditions
            </Link>
          </div>
        </div>
      </div>
    </footer>
  )
}

export default Footer
[V0_FILE]typescriptreact:file="components/navbar.tsx" isMerged="true"
"use client"

import { useState, useRef, useEffect } from "react"
import Link from "next/link"
import Image from "next/image"
import { Menu, X, Plus, Minus } from "lucide-react"

const Navbar = () => {
  const [isOpen, setIsOpen] = useState(false)
  const [expandedMenus, setExpandedMenus] = useState<{ [key: string]: boolean }>({})
  const menuRef = useRef<HTMLDivElement>(null)

const toggleMenu = () => {
    setIsOpen(!isOpen)
    // Reset expanded menus when closing the main menu
    if (isOpen) {
      setExpandedMenus({})
    }
  }

const toggleSubmenu = (menu: string) => {
    setExpandedMenus((prev) => ({
      ...prev,
      [menu]: !prev[menu],
    }))
  }

// Close menu when clicking outside
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (menuRef.current && !menuRef.current.contains(event.target as Node) && isOpen) {
        setIsOpen(false)
      }
    }

document.addEventListener("mousedown", handleClickOutside)
    return () => {
      document.removeEventListener("mousedown", handleClickOutside)
    }
  }, [isOpen])

return (
    <header className="sticky top-0 z-50 w-full bg-white shadow-sm">
      <div className="container flex h-16 items-center justify-between">
        <Link href="/" className="flex items-center">
          <Image
            src="/MelodyLogo.png"
            alt="Melody Cleaning Services Logo"
            width={120}
            height={14}
            className="h-9 w-auto"
          />
        </Link>

{/* Desktop Navigation */}
        <nav className="hidden md:flex md:items-center md:space-x-6">
          <Link
            href="/commercialkitchen"
            className="text-sm font-bold text-[#9aedb6] bg-[#3a0162] hover:text-primary rounded-[50px] px-[26px] py-[12px]"
          >
            COMMERCIAL KITCHEN CLEANING
          </Link>
          <Link href="/" className="text-sm font-medium hover:text-primary">
            Home
          </Link>
          <Link href="/about" className="text-sm font-medium hover:text-primary">
            About Us
          </Link>

{/* Services Dropdown */}
          <div className="relative group">
            <Link href="/services" className="text-sm font-medium hover:text-primary flex items-center">
              Services
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="ml-1"
              >
                <path d="m6 9 6 6 6-6" />
              </svg>
            </Link>

{/* Dropdown Content */}
            <div className="absolute left-0 top-full mt-2 w-64 bg-white shadow-lg rounded-md overflow-hidden invisible group-hover:visible opacity-0 group-hover:opacity-100 transition-all duration-300 z-20">
              {/* Domestic Cleaning */}
              <div className="p-4 border-b">
                <div className="relative group/domestic">
                  <span className="font-medium text-primary mb-2 block hover:underline flex items-center justify-between cursor-pointer">
                    Domestic Cleaning
                    <Plus className="inline-block ml-1 h-4 w-4" />
                  </span>
                  <div className="hidden group-hover/domestic:block ml-4 mt-2">
                    <Link href="/services#domestic-end-of-tenancy" className="block py-1 text-sm hover:text-primary">
                      End of Tenancy
                    </Link>
                    <Link href="/services#domestic-move-in-out" className="block py-1 text-sm hover:text-primary">
                      Move-In/Move-Out
                    </Link>
                    <Link href="/services#domestic-carpet-cleaning" className="block py-1 text-sm hover:text-primary">
                      Carpet Cleaning
                    </Link>
                    <Link href="/services#domestic-deep-clean" className="block py-1 text-sm hover:text-primary">
                      Deep Clean
                    </Link>
                    <Link href="/services#domestic-standard-cleaning" className="block py-1 text-sm hover:text-primary">
                      Standard Cleaning
                    </Link>
                    <Link href="/services#domestic-housekeeping" className="block py-1 text-sm hover:text-primary">
                      General Housekeeping
                    </Link>
                    <Link href="/services#domestic-mattress-cleaning" className="block py-1 text-sm hover:text-primary">
                      Mattress Cleaning
                    </Link>
                    <Link
                      href="/services#domestic-upholstery-cleaning"
                      className="block py-1 text-sm hover:text-primary"
                    >
                      Upholstery Cleaning
                    </Link>
                    <Link
                      href="/services#domestic-mental-health-hoarding"
                      className="block py-1 text-sm hover:text-primary"
                    >
                      Mental Health Crisis/Hoarding Clean-up
                    </Link>
                    <Link href="/services#domestic-funeral-death" className="block py-1 text-sm hover:text-primary">
                      Funeral/Death Cleaning
                    </Link>
                  </div>
                </div>
              </div>

{/* Commercial Cleaning */}
              <div className="p-4 border-b">
                <div className="relative group/commercial">
                  <span className="font-medium text-primary mb-2 block hover:underline flex items-center justify-between cursor-pointer">
                    Commercial Cleaning
                    <Plus className="inline-block ml-1 h-4 w-4" />
                  </span>
                  <div className="hidden group-hover/commercial:block ml-4 mt-2">
                    <Link href="/services#commercial-office-workshop" className="block py-1 text-sm hover:text-primary">
                      Office and Workshop
                    </Link>
                    <Link
                      href="/services#commercial-restaurants-hotels"
                      className="block py-1 text-sm hover:text-primary"
                    >
                      Restaurants and Hotels
                    </Link>
                    <Link href="/services#commercial-care-homes" className="block py-1 text-sm hover:text-primary">
                      Care Homes
                    </Link>
                    <Link href="/services#commercial-shop-cleaning" className="block py-1 text-sm hover:text-primary">
                      Shop Cleaning
                    </Link>
                  </div>
                </div>
              </div>

{/* Specialised Cleaning */}
              <div className="p-4">
                <div className="relative group/specialised">
                  <span className="font-medium text-primary mb-2 block hover:underline flex items-center justify-between cursor-pointer">
                    Specialised Cleaning
                    <Plus className="inline-block ml-1 h-4 w-4" />
                  </span>
                  <div className="hidden group-hover/specialised:block ml-4 mt-2">
                    <Link
                      href="/services#specialised-end-of-construction"
                      className="block py-1 text-sm hover:text-primary"
                    >
                      End of Construction
                    </Link>
                    <Link href="/services#specialised-pre-post-event" className="block py-1 text-sm hover:text-primary">
                      Pre/Post Event
                    </Link>
                  </div>
                </div>
              </div>
            </div>
          </div>

<Link href="/sectors" className="text-sm font-medium hover:text-primary">
            Sectors
          </Link>
          <Link href="/book" className="text-sm font-medium hover:text-primary">
            Book Online
          </Link>
          <Link href="/contact" className="text-sm font-medium hover:text-primary">
            Contact Us
          </Link>
        </nav>

{/* Mobile Menu Button */}
        <button className="flex md:hidden" onClick={toggleMenu} aria-label={isOpen ? "Close Menu" : "Open Menu"}>
          {isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
        </button>
      </div>

{/* Mobile Navigation */}
      {isOpen && (
        <div ref={menuRef} className="fixed inset-0 z-50 flex flex-col bg-[#3A0162] pt-16 mobile-menu-container">
          <div className="container flex flex-col space-y-4 p-4">
            <Link
              href="/commercialkitchen"
              className="py-2 text-lg font-medium text-[#9AEDB6] mobile-menu-item"
              onClick={toggleMenu}
            >
              COMMECIAL KITCHEN CLEANING
            </Link>
            <Link
              href="/"
              className="text-lg font-bold text-[#9aedb6] bg-[#3a0162] rounded-[50px] px-[26px] py-[12px] mobile-menu-item"
              onClick={toggleMenu}
            >
              Home
            </Link>
            <Link
              href="/about"
              className="py-2 text-lg font-medium text-[#9AEDB6] mobile-menu-item"
              onClick={toggleMenu}
            >
              About Us
            </Link>

{/* Services with submenu */}
            <div className="py-2 mobile-menu-item">
              <div
                className="flex items-center justify-between w-full text-lg font-medium text-[#9AEDB6] cursor-pointer"
                onClick={() => toggleSubmenu("services")}
              >
                <span>Services</span>
                {expandedMenus["services"] ? <Minus className="h-5 w-5" /> : <Plus className="h-5 w-5" />}
              </div>

<div
                className={`mt-2 ml-4 space-y-3 overflow-hidden transition-all duration-300 ${
                  expandedMenus["services"] ? "max-h-[1000px] opacity-100" : "max-h-0 opacity-0"
                }`}
              >
                {/* Domestic Cleaning */}
                <div className="mobile-submenu-item">
                  <div
                    className="flex items-center justify-between w-full text-base font-medium text-[#9AEDB6] cursor-pointer"
                    onClick={(e) => {
                      e.stopPropagation()
                      toggleSubmenu("domestic")
                    }}
                  >
                    <span>Domestic Cleaning</span>
                    {expandedMenus["domestic"] ? <Minus className="h-4 w-4" /> : <Plus className="h-4 w-4" />}
                  </div>

<div
                    className={`ml-4 space-y-2 overflow-hidden transition-all duration-300 ${
                      expandedMenus["domestic"] ? "max-h-[500px] opacity-100 mt-2" : "max-h-0 opacity-0"
                    }`}
                  >
                    <Link
                      href="/services#domestic-end-of-tenancy"
                      className="block py-1 text-sm text-[#9AEDB6]"
                      onClick={toggleMenu}
                    >
                      End of Tenancy
                    </Link>
                    <Link
                      href="/services#domestic-move-in-out"
                      className="block py-1 text-sm text-[#9AEDB6]"
                      onClick={toggleMenu}
                    >
                      Move-In/Move-Out
                    </Link>
                    <Link
                      href="/services#domestic-carpet-cleaning"
                      className="block py-1 text-sm text-[#9AEDB6]"
                      onClick={toggleMenu}
                    >
                      Carpet Cleaning
                    </Link>
                    <Link
                      href="/services#domestic-deep-clean"
                      className="block py-1 text-sm text-[#9AEDB6]"
                      onClick={toggleMenu}
                    >
                      Deep Clean
                    </Link>
                    <Link
                      href="/services#domestic-standard-cleaning"
                      className="block py-1 text-sm text-[#9AEDB6]"
                      onClick={toggleMenu}
                    >
                      Standard Cleaning
                    </Link>
                    <Link
                      href="/services#domestic-housekeeping"
                      className="block py-1 text-sm text-[#9AEDB6]"
                      onClick={toggleMenu}
                    >
                      General Housekeeping
                    </Link>
                    <Link
                      href="/services#domestic-mattress-cleaning"
                      className="block py-1 text-sm text-[#9AEDB6]"
                      onClick={toggleMenu}
                    >
                      Mattress Cleaning
                    </Link>
                    <Link
                      href="/services#domestic-upholstery-cleaning"
                      className="block py-1 text-sm text-[#9AEDB6]"
                      onClick={toggleMenu}
                    >
                      Upholstery Cleaning
                    </Link>
                    <Link
                      href="/services#domestic-mental-health-hoarding"
                      className="block py-1 text-sm text-[#9AEDB6]"
                      onClick={toggleMenu}
                    >
                      Mental Health Crisis/Hoarding Clean-up
                    </Link>
                    <Link
                      href="/services#domestic-funeral-death"
                      className="block py-1 text-sm text-[#9AEDB6]"
                      onClick={toggleMenu}
                    >
                      Funeral/Death Cleaning
                    </Link>
                  </div>
                </div>

{/* Commercial Cleaning */}
                <div className="mobile-submenu-item">
                  <div
                    className="flex items-center justify-between w-full text-base font-medium text-[#9AEDB6] cursor-pointer"
                    onClick={(e) => {
                      e.stopPropagation()
                      toggleSubmenu("commercial")
                    }}
                  >
                    <span>Commercial Cleaning</span>
                    {expandedMenus["commercial"] ? <Minus className="h-4 w-4" /> : <Plus className="h-4 w-4" />}
                  </div>

<div
                    className={`ml-4 space-y-2 overflow-hidden transition-all duration-300 ${
                      expandedMenus["commercial"] ? "max-h-[500px] opacity-100 mt-2" : "max-h-0 opacity-0"
                    }`}
                  >
                    <Link
                      href="/services#commercial-office-workshop"
                      className="block py-1 text-sm text-[#9AEDB6]"
                      onClick={toggleMenu}
                    >
                      Office and Workshop
                    </Link>
                    <Link
                      href="/services#commercial-restaurants-hotels"
                      className="block py-1 text-sm text-[#9AEDB6]"
                      onClick={toggleMenu}
                    >
                      Restaurants and Hotels
                    </Link>
                    <Link
                      href="/services#commercial-care-homes"
                      className="block py-1 text-sm text-[#9AEDB6]"
                      onClick={toggleMenu}
                    >
                      Care Homes
                    </Link>
                    <Link
                      href="/services#commercial-shop-cleaning"
                      className="block py-1 text-sm text-[#9AEDB6]"
                      onClick={toggleMenu}
                    >
                      Shop Cleaning
                    </Link>
                  </div>
                </div>

{/* Specialised Cleaning */}
                <div className="mobile-submenu-item">
                  <div
                    className="flex items-center justify-between w-full text-base font-medium text-[#9AEDB6] cursor-pointer"
                    onClick={(e) => {
                      e.stopPropagation()
                      toggleSubmenu("specialised")
                    }}
                  >
                    <span>Specialised Cleaning</span>
                    {expandedMenus["specialised"] ? <Minus className="h-4 w-4" /> : <Plus className="h-4 w-4" />}
                  </div>

<div
                    className={`ml-4 space-y-2 overflow-hidden transition-all duration-300 ${
                      expandedMenus["specialised"] ? "max-h-[500px] opacity-100 mt-2" : "max-h-0 opacity-0"
                    }`}
                  >
                    <Link
                      href="/services#specialised-end-of-construction"
                      className="block py-1 text-sm text-[#9AEDB6]"
                      onClick={toggleMenu}
                    >
                      End of Construction
                    </Link>
                    <Link
                      href="/services#specialised-pre-post-event"
                      className="block py-1 text-sm text-[#9AEDB6]"
                      onClick={toggleMenu}
                    >
                      Pre/Post Event
                    </Link>
                  </div>
                </div>
              </div>
            </div>

<Link
              href="/sectors"
              className="py-2 text-lg font-medium text-[#9AEDB6] mobile-menu-item"
              onClick={toggleMenu}
            >
              Sectors
            </Link>
            <Link
              href="/book"
              className="py-2 text-lg font-medium text-[#9AEDB6] mobile-menu-item"
              onClick={toggleMenu}
            >
              Book Online
            </Link>
            <Link
              href="/contact"
              className="py-2 text-lg font-medium text-[#9AEDB6] mobile-menu-item"
              onClick={toggleMenu}
            >
              Contact Us
            </Link>
          </div>
        </div>
      )}
    </header>
  )
}

export default Navbar
[V0_FILE]typescriptreact:file="components/scroll-to-top.tsx" isMerged="true"
"use client";

import { useState, useEffect } from "react";

export default function ScrollToTop() {
  const [isVisible, setIsVisible] = useState(false);

useEffect(() => {
    const toggleVisibility = () => {
      setIsVisible(window.scrollY > 300);
    };

window.addEventListener("scroll", toggleVisibility);
    return () => window.removeEventListener("scroll", toggleVisibility);
  }, []);

const scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

return (
    <>
      {isVisible && (
        <button
          onClick={scrollToTop}
          className="fixed bottom-5 right-5 p-3 bg-blue-600 text-white rounded-full shadow-lg hover:bg-blue-700"
          aria-label="Scroll to top"
        >
          ↑
        </button>
      )}
    </>
  );
}
[V0_FILE]typescriptreact:file="components/service-slider.tsx" isMerged="true"
"use client"

import { useState, useEffect, useRef } from "react"
import Image from "next/image"

// Define images with guaranteed placeholder sources
const images = [
  {
    src: "/Slide.png",
    alt: "Professional Cleaning Service",
  },
  {
    src: "/Slide1.png",
    alt: "End of Tenancy Cleaning",
  },
  {
    src: "/Slide2.png",
    alt: "Commercial Cleaning",
  },
  {
    src: "/Slide4.png",
    alt: "Deep Cleaning",
  },
  {
    src: "/Slide5.png",
    alt: "Carpet Cleaning",
  },
  {
    src: "/Slide9.png",
    alt: "Pub Cleaning",
  },
  {
    src: "/Slide8.png",
    alt: "Event Cleaning",
  },
  {
    src: "/Slide3.png",
    alt: "Office Cleaning",
  },
  {
    src: "/Slide7.png",
    alt: "Residential Cleaning",
  },
  {
    src: "/Carpet2.png",
    alt: "Carpet Cleaning Service",
  },
  {
    src: "/Carpet3.png",
    alt: "Professional Carpet Cleaning",
  },
  {
    src: "/Event4.png",
    alt: "Event Cleaning Service",
  },
  {
    src: "/ezgif-8187ba0aceace784.jpg",
    alt: "Deep Cleaning",
  },
  {
    src: "/steam-cleaning-tiles-1600x400.jpg",
    alt: "Post-Event Cleaning",
  },
  {
    src: "/Restaurant1.png",
    alt: "Restaurant Cleaning",
  },
  {
    src: "/Upholstery.png",
    alt: "Upholstery Cleaning",
  },
]

export default function ServiceSlider() {
  const sliderRef = useRef<HTMLDivElement>(null)
  const [isVisible, setIsVisible] = useState(false)

useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        setIsVisible(entry.isIntersecting)
      },
      { threshold: 0.1 },
    )

if (sliderRef.current) {
      observer.observe(sliderRef.current)
    }

return () => {
      if (sliderRef.current) {
        observer.unobserve(sliderRef.current)
      }
    }
  }, [])

useEffect(() => {
    if (!isVisible || !sliderRef.current) return

const slider = sliderRef.current
    let animationId: number
    let startTime: number | null = null
    const duration = 30000 // 30 seconds for a complete cycle

const animate = (timestamp: number) => {
      if (!startTime) startTime = timestamp
      const elapsed = timestamp - startTime
      const progress = (elapsed % duration) / duration

if (slider) {
        const totalWidth = slider.scrollWidth - slider.clientWidth
        slider.scrollLeft = progress * totalWidth
      }

animationId = requestAnimationFrame(animate)
    }

animationId = requestAnimationFrame(animate)

return () => {
      cancelAnimationFrame(animationId)
    }
  }, [isVisible])

return (
    <div className="mt-12 mb-10 overflow-hidden">
      <div
        ref={sliderRef}
        className="flex gap-4 overflow-x-auto scrollbar-hide"
        style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
      >
        {/* Duplicate images for seamless looping */}
        {[...images, ...images].map((image, index) => (
          <div key={index} className="flex-shrink-0 w-80 h-60 relative rounded-lg overflow-hidden">
            <Image src={image.src || "/placeholder.svg"} alt={image.alt} fill className="object-cover" />
          </div>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/service-slideshow.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { ChevronLeft, ChevronRight } from "lucide-react"

const images = [
  {
    src: "/slideshow/slide1.jpg",
    alt: "Professional Cleaning Service",
    caption: "Professional Cleaning Services",
  },
  {
    src: "/slideshow/slide2.jpg",
    alt: "End of Tenancy Cleaning",
    caption: "End of Tenancy Cleaning",
  },
  {
    src: "/slideshow/slide3.jpg",
    alt: "Commercial Cleaning",
    caption: "Commercial Cleaning Solutions",
  },
  {
    src: "/slideshow/slide4.jpg",
    alt: "Deep Cleaning",
    caption: "Deep Cleaning Services",
  },
  {
    src: "/slideshow/slide5.jpg",
    alt: "Carpet Cleaning",
    caption: "Professional Carpet Cleaning",
  },
]

export default function ServiceSlideshow() {
  const [currentSlide, setCurrentSlide] = useState(0)

// Auto-advance slides
  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentSlide((prev) => (prev === images.length - 1 ? 0 : prev + 1))
    }, 5000)
    return () => clearInterval(interval)
  }, [])

const goToSlide = (index: number) => {
    setCurrentSlide(index)
  }

const goToPrevSlide = () => {
    setCurrentSlide((prev) => (prev === 0 ? images.length - 1 : prev - 1))
  }

const goToNextSlide = () => {
    setCurrentSlide((prev) => (prev === images.length - 1 ? 0 : prev + 1))
  }

return (
    <div className="mt-8">
      <h3 className="mb-6 text-center text-2xl font-bold text-primary">Our Work Gallery</h3>
      <div className="slideshow rounded-lg overflow-hidden shadow-lg">
        {images.map((image, index) => (
          <div
            key={index}
            className={`slideshow-slide ${index === currentSlide ? "active" : ""}`}
            style={{
              backgroundImage: `url(${image.src})`,
              backgroundSize: "cover",
              backgroundPosition: "center",
            }}
          >
            <div className="absolute inset-0 bg-black/30 flex items-end">
              <div className="w-full p-6 text-white">
                <h4 className="text-xl font-bold">{image.caption}</h4>
              </div>
            </div>
          </div>
        ))}

<div className="slideshow-controls">
          {images.map((_, index) => (
            <div
              key={index}
              className={`slideshow-dot ${index === currentSlide ? "active" : ""}`}
              onClick={() => goToSlide(index)}
            ></div>
          ))}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true"
'use client'

import * as React from 'react'
import {
  ThemeProvider as NextThemesProvider,
  type ThemeProviderProps,
} from 'next-themes'

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
[V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true"
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive:
          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline:
          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
        secondary:
          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button"
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    )
  }
)
Button.displayName = "Button"

export { Button, buttonVariants }
[V0_FILE]typescriptreact:file="components/ui/calendar.tsx" isMerged="true"
"use client"

import * as React from "react"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { DayPicker } from "react-day-picker"

import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"

export type CalendarProps = React.ComponentProps<typeof DayPicker>

function Calendar({
  className,
  classNames,
  showOutsideDays = true,
  ...props
}: CalendarProps) {
  return (
    <DayPicker
      showOutsideDays={showOutsideDays}
      className={cn("p-3", className)}
      classNames={{
        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
        month: "space-y-4",
        caption: "flex justify-center pt-1 relative items-center",
        caption_label: "text-sm font-medium",
        nav: "space-x-1 flex items-center",
        nav_button: cn(
          buttonVariants({ variant: "outline" }),
          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
        ),
        nav_button_previous: "absolute left-1",
        nav_button_next: "absolute right-1",
        table: "w-full border-collapse space-y-1",
        head_row: "flex",
        head_cell:
          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
        row: "flex w-full mt-2",
        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
        day: cn(
          buttonVariants({ variant: "ghost" }),
          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
        ),
        day_range_end: "day-range-end",
        day_selected:
          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
        day_today: "bg-accent text-accent-foreground",
        day_outside:
          "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
        day_disabled: "text-muted-foreground opacity-50",
        day_range_middle:
          "aria-selected:bg-accent aria-selected:text-accent-foreground",
        day_hidden: "invisible",
        ...classNames,
      }}
      components={{
        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
      }}
      {...props}
    />
  )
}
Calendar.displayName = "Calendar"

export { Calendar }
[V0_FILE]typescriptreact:file="components/ui/card.tsx" isMerged="true"
import * as React from "react"

import { cn } from "@/lib/utils"

const Card = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "rounded-lg border bg-card text-card-foreground shadow-sm",
      className
    )}
    {...props}
  />
))
Card.displayName = "Card"

const CardHeader = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("flex flex-col space-y-1.5 p-6", className)}
    {...props}
  />
))
CardHeader.displayName = "CardHeader"

const CardTitle = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "text-2xl font-semibold leading-none tracking-tight",
      className
    )}
    {...props}
  />
))
CardTitle.displayName = "CardTitle"

const CardDescription = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
))
CardDescription.displayName = "CardDescription"

const CardContent = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
))
CardContent.displayName = "CardContent"

const CardFooter = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("flex items-center p-6 pt-0", className)}
    {...props}
  />
))
CardFooter.displayName = "CardFooter"

export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
[V0_FILE]typescriptreact:file="components/ui/form.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { Slot } from "@radix-ui/react-slot"
import {
  Controller,
  ControllerProps,
  FieldPath,
  FieldValues,
  FormProvider,
  useFormContext,
} from "react-hook-form"

import { cn } from "@/lib/utils"
import { Label } from "@/components/ui/label"

const Form = FormProvider

type FormFieldContextValue<
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
> = {
  name: TName
}

const FormFieldContext = React.createContext<FormFieldContextValue>(
  {} as FormFieldContextValue
)

const FormField = <
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
>({
  ...props
}: ControllerProps<TFieldValues, TName>) => {
  return (
    <FormFieldContext.Provider value={{ name: props.name }}>
      <Controller {...props} />
    </FormFieldContext.Provider>
  )
}

const useFormField = () => {
  const fieldContext = React.useContext(FormFieldContext)
  const itemContext = React.useContext(FormItemContext)
  const { getFieldState, formState } = useFormContext()

const fieldState = getFieldState(fieldContext.name, formState)

if (!fieldContext) {
    throw new Error("useFormField should be used within <FormField>")
  }

const { id } = itemContext

return {
    id,
    name: fieldContext.name,
    formItemId: `${id}-form-item`,
    formDescriptionId: `${id}-form-item-description`,
    formMessageId: `${id}-form-item-message`,
    ...fieldState,
  }
}

type FormItemContextValue = {
  id: string
}

const FormItemContext = React.createContext<FormItemContextValue>(
  {} as FormItemContextValue
)

const FormItem = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const id = React.useId()

return (
    <FormItemContext.Provider value={{ id }}>
      <div ref={ref} className={cn("space-y-2", className)} {...props} />
    </FormItemContext.Provider>
  )
})
FormItem.displayName = "FormItem"

const FormLabel = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
>(({ className, ...props }, ref) => {
  const { error, formItemId } = useFormField()

return (
    <Label
      ref={ref}
      className={cn(error && "text-destructive", className)}
      htmlFor={formItemId}
      {...props}
    />
  )
})
FormLabel.displayName = "FormLabel"

const FormControl = React.forwardRef<
  React.ElementRef<typeof Slot>,
  React.ComponentPropsWithoutRef<typeof Slot>
>(({ ...props }, ref) => {
  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()

return (
    <Slot
      ref={ref}
      id={formItemId}
      aria-describedby={
        !error
          ? `${formDescriptionId}`
          : `${formDescriptionId} ${formMessageId}`
      }
      aria-invalid={!!error}
      {...props}
    />
  )
})
FormControl.displayName = "FormControl"

const FormDescription = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => {
  const { formDescriptionId } = useFormField()

return (
    <p
      ref={ref}
      id={formDescriptionId}
      className={cn("text-sm text-muted-foreground", className)}
      {...props}
    />
  )
})
FormDescription.displayName = "FormDescription"

const FormMessage = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, children, ...props }, ref) => {
  const { error, formMessageId } = useFormField()
  const body = error ? String(error?.message) : children

if (!body) {
    return null
  }

return (
    <p
      ref={ref}
      id={formMessageId}
      className={cn("text-sm font-medium text-destructive", className)}
      {...props}
    >
      {body}
    </p>
  )
})
FormMessage.displayName = "FormMessage"

export {
  useFormField,
  Form,
  FormItem,
  FormLabel,
  FormControl,
  FormDescription,
  FormMessage,
  FormField,
}
[V0_FILE]typescriptreact:file="components/ui/input.tsx" isMerged="true"
import * as React from "react"

import { cn } from "@/lib/utils"

const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
  ({ className, type, ...props }, ref) => {
    return (
      <input
        type={type}
        className={cn(
          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
          className
        )}
        ref={ref}
        {...props}
      />
    )
  }
)
Input.displayName = "Input"

export { Input }
[V0_FILE]typescriptreact:file="components/ui/label.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const labelVariants = cva(
  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
)

const Label = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
    VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => (
  <LabelPrimitive.Root
    ref={ref}
    className={cn(labelVariants(), className)}
    {...props}
  />
))
Label.displayName = LabelPrimitive.Root.displayName

export { Label }
[V0_FILE]typescriptreact:file="components/ui/popover.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as PopoverPrimitive from "@radix-ui/react-popover"

import { cn } from "@/lib/utils"

const Popover = PopoverPrimitive.Root

const PopoverTrigger = PopoverPrimitive.Trigger

const PopoverContent = React.forwardRef<
  React.ElementRef<typeof PopoverPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
  <PopoverPrimitive.Portal>
    <PopoverPrimitive.Content
      ref={ref}
      align={align}
      sideOffset={sideOffset}
      className={cn(
        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        className
      )}
      {...props}
    />
  </PopoverPrimitive.Portal>
))
PopoverContent.displayName = PopoverPrimitive.Content.displayName

export { Popover, PopoverTrigger, PopoverContent }
[V0_FILE]typescriptreact:file="components/ui/select.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as SelectPrimitive from "@radix-ui/react-select"
import { Check, ChevronDown, ChevronUp } from "lucide-react"

import { cn } from "@/lib/utils"

const Select = SelectPrimitive.Root

const SelectGroup = SelectPrimitive.Group

const SelectValue = SelectPrimitive.Value

const SelectTrigger = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Trigger
    ref={ref}
    className={cn(
      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
      className
    )}
    {...props}
  >
    {children}
    <SelectPrimitive.Icon asChild>
      <ChevronDown className="h-4 w-4 opacity-50" />
    </SelectPrimitive.Icon>
  </SelectPrimitive.Trigger>
))
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName

const SelectScrollUpButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.ScrollUpButton
    ref={ref}
    className={cn(
      "flex cursor-default items-center justify-center py-1",
      className
    )}
    {...props}
  >
    <ChevronUp className="h-4 w-4" />
  </SelectPrimitive.ScrollUpButton>
))
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName

const SelectScrollDownButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.ScrollDownButton
    ref={ref}
    className={cn(
      "flex cursor-default items-center justify-center py-1",
      className
    )}
    {...props}
  >
    <ChevronDown className="h-4 w-4" />
  </SelectPrimitive.ScrollDownButton>
))
SelectScrollDownButton.displayName =
  SelectPrimitive.ScrollDownButton.displayName

const SelectContent = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
>(({ className, children, position = "popper", ...props }, ref) => (
  <SelectPrimitive.Portal>
    <SelectPrimitive.Content
      ref={ref}
      className={cn(
        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        position === "popper" &&
          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
        className
      )}
      position={position}
      {...props}
    >
      <SelectScrollUpButton />
      <SelectPrimitive.Viewport
        className={cn(
          "p-1",
          position === "popper" &&
            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
        )}
      >
        {children}
      </SelectPrimitive.Viewport>
      <SelectScrollDownButton />
    </SelectPrimitive.Content>
  </SelectPrimitive.Portal>
))
SelectContent.displayName = SelectPrimitive.Content.displayName

const SelectLabel = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.Label
    ref={ref}
    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
    {...props}
  />
))
SelectLabel.displayName = SelectPrimitive.Label.displayName

const SelectItem = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <SelectPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </SelectPrimitive.ItemIndicator>
    </span>

<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
  </SelectPrimitive.Item>
))
SelectItem.displayName = SelectPrimitive.Item.displayName

const SelectSeparator = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.Separator
    ref={ref}
    className={cn("-mx-1 my-1 h-px bg-muted", className)}
    {...props}
  />
))
SelectSeparator.displayName = SelectPrimitive.Separator.displayName

export {
  Select,
  SelectGroup,
  SelectValue,
  SelectTrigger,
  SelectContent,
  SelectLabel,
  SelectItem,
  SelectSeparator,
  SelectScrollUpButton,
  SelectScrollDownButton,
}
[V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isMerged="true"
import * as React from "react"

import { cn } from "@/lib/utils"

const Textarea = React.forwardRef<
  HTMLTextAreaElement,
  React.ComponentProps<"textarea">
>(({ className, ...props }, ref) => {
  return (
    <textarea
      className={cn(
        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
        className
      )}
      ref={ref}
      {...props}
    />
  )
})
Textarea.displayName = "Textarea"

export { Textarea }
[V0_FILE]typescriptreact:file="components/ui/toast.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as ToastPrimitives from "@radix-ui/react-toast"
import { cva, type VariantProps } from "class-variance-authority"
import { X } from "lucide-react"

import { cn } from "@/lib/utils"

const ToastProvider = ToastPrimitives.Provider

const ToastViewport = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Viewport>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Viewport
    ref={ref}
    className={cn(
      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
      className
    )}
    {...props}
  />
))
ToastViewport.displayName = ToastPrimitives.Viewport.displayName

const toastVariants = cva(
  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
  {
    variants: {
      variant: {
        default: "border bg-background text-foreground",
        destructive:
          "destructive group border-destructive bg-destructive text-destructive-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

const Toast = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
    VariantProps<typeof toastVariants>
>(({ className, variant, ...props }, ref) => {
  return (
    <ToastPrimitives.Root
      ref={ref}
      className={cn(toastVariants({ variant }), className)}
      {...props}
    />
  )
})
Toast.displayName = ToastPrimitives.Root.displayName

const ToastAction = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Action>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Action
    ref={ref}
    className={cn(
      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
      className
    )}
    {...props}
  />
))
ToastAction.displayName = ToastPrimitives.Action.displayName

const ToastClose = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Close>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Close
    ref={ref}
    className={cn(
      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
      className
    )}
    toast-close=""
    {...props}
  >
    <X className="h-4 w-4" />
  </ToastPrimitives.Close>
))
ToastClose.displayName = ToastPrimitives.Close.displayName

const ToastTitle = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Title>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Title
    ref={ref}
    className={cn("text-sm font-semibold", className)}
    {...props}
  />
))
ToastTitle.displayName = ToastPrimitives.Title.displayName

const ToastDescription = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Description>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Description
    ref={ref}
    className={cn("text-sm opacity-90", className)}
    {...props}
  />
))
ToastDescription.displayName = ToastPrimitives.Description.displayName

type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>

type ToastActionElement = React.ReactElement<typeof ToastAction>

export {
  type ToastProps,
  type ToastActionElement,
  ToastProvider,
  ToastViewport,
  Toast,
  ToastTitle,
  ToastDescription,
  ToastClose,
  ToastAction,
}
[V0_FILE]typescript:file="components/ui/use-toast.ts" isMerged="true"
"use client"

// Inspired by react-hot-toast library
import * as React from "react"

import type {
  ToastActionElement,
  ToastProps,
} from "@/components/ui/toast"

const TOAST_LIMIT = 1
const TOAST_REMOVE_DELAY = 1000000

type ToasterToast = ToastProps & {
  id: string
  title?: React.ReactNode
  description?: React.ReactNode
  action?: ToastActionElement
}

const actionTypes = {
  ADD_TOAST: "ADD_TOAST",
  UPDATE_TOAST: "UPDATE_TOAST",
  DISMISS_TOAST: "DISMISS_TOAST",
  REMOVE_TOAST: "REMOVE_TOAST",
} as const

let count = 0

function genId() {
  count = (count + 1) % Number.MAX_SAFE_INTEGER
  return count.toString()
}

type ActionType = typeof actionTypes

type Action =
  | {
      type: ActionType["ADD_TOAST"]
      toast: ToasterToast
    }
  | {
      type: ActionType["UPDATE_TOAST"]
      toast: Partial<ToasterToast>
    }
  | {
      type: ActionType["DISMISS_TOAST"]
      toastId?: ToasterToast["id"]
    }
  | {
      type: ActionType["REMOVE_TOAST"]
      toastId?: ToasterToast["id"]
    }

interface State {
  toasts: ToasterToast[]
}

const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()

const addToRemoveQueue = (toastId: string) => {
  if (toastTimeouts.has(toastId)) {
    return
  }

const timeout = setTimeout(() => {
    toastTimeouts.delete(toastId)
    dispatch({
      type: "REMOVE_TOAST",
      toastId: toastId,
    })
  }, TOAST_REMOVE_DELAY)

toastTimeouts.set(toastId, timeout)
}

export const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case "ADD_TOAST":
      return {
        ...state,
        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
      }

case "UPDATE_TOAST":
      return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === action.toast.id ? { ...t, ...action.toast } : t
        ),
      }

case "DISMISS_TOAST": {
      const { toastId } = action

// ! Side effects ! - This could be extracted into a dismissToast() action,
      // but I'll keep it here for simplicity
      if (toastId) {
        addToRemoveQueue(toastId)
      } else {
        state.toasts.forEach((toast) => {
          addToRemoveQueue(toast.id)
        })
      }

return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === toastId || toastId === undefined
            ? {
                ...t,
                open: false,
              }
            : t
        ),
      }
    }
    case "REMOVE_TOAST":
      if (action.toastId === undefined) {
        return {
          ...state,
          toasts: [],
        }
      }
      return {
        ...state,
        toasts: state.toasts.filter((t) => t.id !== action.toastId),
      }
  }
}

const listeners: Array<(state: State) => void> = []

let memoryState: State = { toasts: [] }

function dispatch(action: Action) {
  memoryState = reducer(memoryState, action)
  listeners.forEach((listener) => {
    listener(memoryState)
  })
}

type Toast = Omit<ToasterToast, "id">

function toast({ ...props }: Toast) {
  const id = genId()

const update = (props: ToasterToast) =>
    dispatch({
      type: "UPDATE_TOAST",
      toast: { ...props, id },
    })
  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })

dispatch({
    type: "ADD_TOAST",
    toast: {
      ...props,
      id,
      open: true,
      onOpenChange: (open) => {
        if (!open) dismiss()
      },
    },
  })

return {
    id: id,
    dismiss,
    update,
  }
}

function useToast() {
  const [state, setState] = React.useState<State>(memoryState)

React.useEffect(() => {
    listeners.push(setState)
    return () => {
      const index = listeners.indexOf(setState)
      if (index > -1) {
        listeners.splice(index, 1)
      }
    }
  }, [state])

return {
    ...state,
    toast,
    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
  }
}

export { useToast, toast }
[V0_FILE]typescriptreact:file="components/whatsapp-button.tsx" isMerged="true"
"use client"

import { MessageCircle } from "lucide-react"
import { Button } from "@/components/ui/button"

// Extend Window interface to include gtag
declare global {
  interface Window {
    gtag: (...args: any[]) => void
    dataLayer: any[]
  }
}

export default function WhatsAppButton() {
  const phoneNumber = "447453581984"
  const message = "Hello! I'm interested in your cleaning services."

const handleWhatsAppClick = () => {
    // 🎯 CONVERSION TRACKING - WhatsApp Button Click
    if (typeof window !== "undefined" && typeof window.gtag === "function") {
      // Google Ads Conversion - Create a separate conversion action for WhatsApp clicks
      window.gtag("event", "conversion", {
        send_to: "AW-17036896370/whatsapp_contact", // You'll need to create this conversion action
        value: 25.0, // Lower value than booking form
        currency: "GBP",
        transaction_id: `whatsapp_${Date.now()}`,
      })

// Enhanced Conversion Event for GA4
      window.gtag("event", "contact", {
        method: "whatsapp",
        currency: "GBP",
        value: 25.0,
        event_category: "engagement",
        event_label: "whatsapp_click",
      })

// GTM Custom Event
      if (window.dataLayer) {
        window.dataLayer.push({
          event: "whatsapp_contact",
          contact_method: "whatsapp",
          conversion_value: 25,
          currency: "GBP",
        })
      }

console.log("Conversion tracking fired for WhatsApp click")
    }

const url = `https://wa.me/${phoneNumber}?text=${encodeURIComponent(message)}`
    window.open(url, "_blank")
  }

return (
    <Button
      onClick={handleWhatsAppClick}
      className="fixed bottom-6 right-6 z-50 bg-green-500 hover:bg-green-600 text-white rounded-full p-4 shadow-lg transition-all duration-300 hover:scale-110"
      size="icon"
      aria-label="Contact us on WhatsApp"
    >
      <MessageCircle className="h-6 w-6" />
    </Button>
  )
}
[V0_FILE]typescript:file="lib/utils.ts" isMerged="true"
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
[V0_FILE]javascript:file="next.config.mjs" isMerged="true"
/** @type {import('next').NextConfig} */
const nextConfig = {
  eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    unoptimized: true,
  },
}

export default nextConfig
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "lint": "next lint",
    "start": "next start"
  },
  "dependencies": {
    "@hookform/resolvers": "latest",
    "@radix-ui/react-accordion": "latest",
    "@radix-ui/react-alert-dialog": "latest",
    "@radix-ui/react-aspect-ratio": "latest",
    "@radix-ui/react-avatar": "latest",
    "@radix-ui/react-checkbox": "latest",
    "@radix-ui/react-collapsible": "latest",
    "@radix-ui/react-context-menu": "latest",
    "@radix-ui/react-dialog": "latest",
    "@radix-ui/react-dropdown-menu": "latest",
    "@radix-ui/react-hover-card": "latest",
    "@radix-ui/react-label": "latest",
    "@radix-ui/react-menubar": "latest",
    "@radix-ui/react-navigation-menu": "latest",
    "@radix-ui/react-popover": "latest",
    "@radix-ui/react-progress": "latest",
    "@radix-ui/react-radio-group": "latest",
    "@radix-ui/react-scroll-area": "latest",
    "@radix-ui/react-select": "latest",
    "@radix-ui/react-separator": "latest",
    "@radix-ui/react-slider": "latest",
    "@radix-ui/react-slot": "latest",
    "@radix-ui/react-switch": "latest",
    "@radix-ui/react-tabs": "latest",
    "@radix-ui/react-toast": "latest",
    "@radix-ui/react-toggle": "latest",
    "@radix-ui/react-toggle-group": "latest",
    "@radix-ui/react-tooltip": "latest",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "latest",
    "date-fns": "latest",
    "embla-carousel-react": "latest",
    "input-otp": "latest",
    "lucide-react": "^0.454.0",
    "next": "15.2.8",
    "next-themes": "latest",
    "nodemailer": "latest",
    "react": "^19",
    "react-day-picker": "latest",
    "react-dom": "^19",
    "react-hook-form": "latest",
    "react-icons": "latest",
    "react-resizable-panels": "latest",
    "recharts": "latest",
    "sonner": "latest",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "latest",
    "zod": "latest"
  },
  "devDependencies": {
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "postcss": "^8.5",
    "tailwindcss": "^3.4.17",
    "typescript": "^5"
  }
}
[V0_FILE]javascript:file="postcss.config.mjs" isMerged="true"
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    tailwindcss: {},
  },
};

export default config;
[V0_FILE]css:file="styles/globals.css" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family: Arial, Helvetica, sans-serif;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]typescript:file="tailwind.config.ts" isMerged="true"
import type { Config } from "tailwindcss"

const config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "#3A0162", // Deep Purple
          foreground: "#9AEDB6", // Mint
        },
        secondary: {
          DEFAULT: "#9AEDB6", // Mint
          foreground: "#3A0162", // Deep Purple
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config

export default config
[V0_FILE]json:file="tsconfig.json" isMerged="true"
{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "target": "ES6",
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
[V0_FILE]png:file="public/24hour.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/PsAG32YSJmdBgrAuL-JAn5/public/24hour.png" isMerged="true"
[V0_FILE]png:file="public/Abouthome.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/--x4-ysTWaM8rIshYHe-wl/public/Abouthome.png" isMerged="true"
[V0_FILE]png:file="public/Aboutpage.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/SJZbKNN_QVH0NnWTVUi1TB/public/Aboutpage.png" isMerged="true"
[V0_FILE]png:file="public/Booking.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/IMXwVOw4_IBie-GJRpZyFe/public/Booking.png" isMerged="true"
[V0_FILE]png:file="public/CKCFood.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/GNNQIuEq-s8a8wYqOD0cpR/public/CKCFood.png" isMerged="true"
[V0_FILE]png:file="public/CKCHour.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/a-ArVmAEycergnRG1-FKGQ/public/CKCHour.png" isMerged="true"
[V0_FILE]png:file="public/CKCInsured.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/rd_Ri5yKPjy2dYMfSPUBoS/public/CKCInsured.png" isMerged="true"
[V0_FILE]png:file="public/CKCPrice.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/JapJZqZoiulRe05IYSAGkL/public/CKCPrice.png" isMerged="true"
[V0_FILE]png:file="public/Carpet.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/uP8MCXcT3gT8sThCWn-ewz/public/Carpet.png" isMerged="true"
[V0_FILE]png:file="public/Carpet1.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/5uK8ASl4WRnPTKQhyahfjC/public/Carpet1.png" isMerged="true"
[V0_FILE]png:file="public/Carpet2.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/4qnmWpp1DgE5lZV3MgKB7A/public/Carpet2.png" isMerged="true"
[V0_FILE]png:file="public/Carpet3.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/ML5rTPEoRe-KHN4XXUyk6G/public/Carpet3.png" isMerged="true"
[V0_FILE]png:file="public/Carpetbg.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/JAbkw0JIKhkvDeP9TFboQF/public/Carpetbg.png" isMerged="true"
[V0_FILE]png:file="public/Commercial.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/yQ-C6gbB6Bq5tvbHETji7N/public/Commercial.png" isMerged="true"
[V0_FILE]png:file="public/Contact.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/4TUEFa_47Tqnd2yXstNqTU/public/Contact.png" isMerged="true"
[V0_FILE]png:file="public/Deep.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/-fX_bqxrr9n042oZtoa6lE/public/Deep.png" isMerged="true"
[V0_FILE]png:file="public/Domestic.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/jAXm0CcY9kKnmlKiYQ1H6C/public/Domestic.png" isMerged="true"
[V0_FILE]png:file="public/End.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/3kjAWgbm84PV6EX0ahkkwZ/public/End.png" isMerged="true"
[V0_FILE]png:file="public/Endbg.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/Z8ut3JH6uVgVZ_1SB73egI/public/Endbg.png" isMerged="true"
[V0_FILE]png:file="public/Event.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/YbeRazL-wdJ5VCBCcJU7RJ/public/Event.png" isMerged="true"
[V0_FILE]png:file="public/Event3.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/_BHi2dVpQso4dgLgha7Cdm/public/Event3.png" isMerged="true"
[V0_FILE]png:file="public/Event4.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/lm3aCJBv1x72c8uN-9JT_R/public/Event4.png" isMerged="true"
[V0_FILE]png:file="public/Event5.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/8LEd5H3yFmxYmZwl8wV5O9/public/Event5.png" isMerged="true"
[V0_FILE]png:file="public/Event6.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/DMipslTbSagC8mdUhrZb8C/public/Event6.png" isMerged="true"
[V0_FILE]png:file="public/FAQsBG.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/Txj7qfreqtvlIk3a5O5Y2a/public/FAQsBG.png" isMerged="true"
[V0_FILE]png:file="public/Food.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/Bh6rUfHr1OULqtT1Qvwmn1/public/Food.png" isMerged="true"
[V0_FILE]jpeg:file="public/Gallery10.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/oM3w17xDklq5lBOgIJuUpO/public/Gallery10.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/Gallery11.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/y5Kkz8GxP1cp5ONsfm4-Js/public/Gallery11.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/Gallery2.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/u2_qjlGQuQ94a6edcHENE9/public/Gallery2.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/Gallery3.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/kqI3NAt29e1KWgQwrVfFCc/public/Gallery3.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/Gallery4.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/kpS7dcxieNoj_kNpmfb3Ry/public/Gallery4.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/Gallery5.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/R-gfHerLn7rjqQBu0fNswX/public/Gallery5.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/Gallery6.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/yVODKZavpwCAK1CJVhmR1X/public/Gallery6.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/Gallery7.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/gGeBPMVpDsIIMuPQMDr0zx/public/Gallery7.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/Gallery8.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/haZFRRrP0PmJyWar1ZCHQg/public/Gallery8.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/Gallery9.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/EAF72sw4ulwkTu6GVA0H00/public/Gallery9.jpeg" isMerged="true"
[V0_FILE]png:file="public/Insured.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/Buz7hZx1-0jTIzWoOX2Swj/public/Insured.png" isMerged="true"
[V0_FILE]png:file="public/MelodyLogo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/9kJ-2QVR1X-Qs4EmOCgmxZ/public/MelodyLogo.png" isMerged="true"
[V0_FILE]jpg:file="public/MentalHealth.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/Kl-StILN3mBxwgt7BQnBRd/public/MentalHealth.jpg" isMerged="true"
[V0_FILE]png:file="public/Price.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/NE6a1BmBtxWzT51fKe8aze/public/Price.png" isMerged="true"
[V0_FILE]png:file="public/Purpose.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/gEarKGQSfsZ7n31HyeWONj/public/Purpose.png" isMerged="true"
[V0_FILE]png:file="public/Quality.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/KYs1PeIeqBA-KMhtQ4z4_i/public/Quality.png" isMerged="true"
[V0_FILE]png:file="public/Restaurant.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/lNdRoMoYAVjzYQT9N7GyOl/public/Restaurant.png" isMerged="true"
[V0_FILE]png:file="public/Restaurant1.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/GT7OcGFKWG-HNq50HSocku/public/Restaurant1.png" isMerged="true"
[V0_FILE]png:file="public/Restaurantbg.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/wBnPo_XGSWojIUtNbIehLn/public/Restaurantbg.png" isMerged="true"
[V0_FILE]png:file="public/Restauranticon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/wszynN711Q5nBuYnnDa-pf/public/Restauranticon.png" isMerged="true"
[V0_FILE]png:file="public/Sectors.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/lTzEy62C4JtpislU47skEO/public/Sectors.png" isMerged="true"
[V0_FILE]png:file="public/Services.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/cjgz8p0eGvwH0GEISIkZkn/public/Services.png" isMerged="true"
[V0_FILE]png:file="public/Slide.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/RLS2upwz8PfTNBH6iCfpV6/public/Slide.png" isMerged="true"
[V0_FILE]png:file="public/Slide1.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/0nt-qG9ljT6L8n6cdLDmrM/public/Slide1.png" isMerged="true"
[V0_FILE]png:file="public/Slide2.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/lXedP3Hl1ZzBEO0QC_xocG/public/Slide2.png" isMerged="true"
[V0_FILE]png:file="public/Slide3.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/OIkyQbh46MtSe0YKLuSdqS/public/Slide3.png" isMerged="true"
[V0_FILE]png:file="public/Slide4.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/IE96XJJ04iuZvmJyVmMT_J/public/Slide4.png" isMerged="true"
[V0_FILE]png:file="public/Slide5.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/VoarAyNkiNPIAHIEEQykcL/public/Slide5.png" isMerged="true"
[V0_FILE]png:file="public/Slide6.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/h7EO0xKSzca_qNmlYlRAct/public/Slide6.png" isMerged="true"
[V0_FILE]png:file="public/Slide7.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/xeeOMJeCjSVQ7oCXfxSOlp/public/Slide7.png" isMerged="true"
[V0_FILE]png:file="public/Slide8.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/xWogRBXENQ1U--4kV9lnJ4/public/Slide8.png" isMerged="true"
[V0_FILE]png:file="public/Slide9.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/xA55k92MCi9mTm50WRT30a/public/Slide9.png" isMerged="true"
[V0_FILE]png:file="public/Specialised.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/7XWqYriC3YBWJRZWVnchqF/public/Specialised.png" isMerged="true"
[V0_FILE]png:file="public/Tenancy.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/EpvVcEuNBJraJ_nM3JwaYL/public/Tenancy.png" isMerged="true"
[V0_FILE]png:file="public/Upholstery.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/N2W6ov7sz2VBqFoePGS7J0/public/Upholstery.png" isMerged="true"
[V0_FILE]jpg:file="public/West-midlands-after-death-cleaning-service.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/adtdPrCyLLx0AvgFVnD_t_/public/West-midlands-after-death-cleaning-service.jpg" isMerged="true"
[V0_FILE]jpg:file="public/deepclean.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/mZGCz6crDRBkLCliBnZRr3/public/deepclean.jpg" isMerged="true"
[V0_FILE]jpg:file="public/end of tenancy.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/L6jkKEpGK5YIis43DIdNyM/public/end%20of%20tenancy.jpg" isMerged="true"
[V0_FILE]jpg:file="public/ezgif-8187ba0aceace784.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/kHfGXrrQJ0Ccq8Ms42W5Tt/public/ezgif-8187ba0aceace784.jpg" isMerged="true"
[V0_FILE]xml:file="public/icon.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/l2-w3jDSPuRqpmK6lDq3GH/public/icon.svg" isMerged="true"
[V0_FILE]png:file="public/images/design-mode/Quality.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/KYs1PeIeqBA-KMhtQ4z4_i/public/images/design-mode/Quality.png" isMerged="true"
[V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/F61tROFiNveaAIukBzQM3s/public/placeholder-logo.png" isMerged="true"
[V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg" isMerged="true"
[V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/Vk8oRGy3fKhRE_ftNqUNTL/public/placeholder-user.jpg" isMerged="true"
[V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/OB2VP-FGShsnkaOPtlG4Vd/public/placeholder.jpg" isMerged="true"
[V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg" isMerged="true"
[V0_FILE]jpg:file="public/steam-cleaning-tiles-1600x400.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_75Dz9qHqODAxHFcKpcyqPaNRNNnS/XFcTxWJLnyQH60ChUeDEzl/public/steam-cleaning-tiles-1600x400.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="app/contact/page.tsx" isMerged="true"
"use client"
import type React from "react"
import { useEffect, useState } from "react"
import { useSearchParams } from "next/navigation"
import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Phone, Mail, Clock, Facebook, Instagram, Linkedin, CalendarRange, FileText, MapPin } from "lucide-react"
import { FaTiktok } from "react-icons/fa"

// Extend Window interface to include gtag
declare global {
  interface Window {
    gtag: (...args: any[]) => void
    dataLayer: any[]
  }
}

function ContactPageContent() {
  const searchParams = useSearchParams()
  const [showSuccess, setShowSuccess] = useState(false)
  const [showError, setShowError] = useState(false)
  const [isSubmitting, setIsSubmitting] = useState(false)

useEffect(() => {
    // Clear messages when component mounts
    setShowSuccess(false)
    setShowError(false)
  }, [])

const handleFormSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    setIsSubmitting(true)
    setShowSuccess(false)
    setShowError(false)

// Track form submission attempt
    if (typeof window !== "undefined" && typeof window.gtag === "function") {
      window.gtag("event", "form_start", {
        event_category: "engagement",
        event_label: "contact_form_attempt",
      })
    }

const formData = new FormData(e.currentTarget)
    const data = {
      name: formData.get("name"),
      email: formData.get("email"),
      subject: formData.get("subject"),
      message: formData.get("message"),
    }

try {
      const response = await fetch("/api/submit-contact", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(data),
      })

const result = await response.json()

if (result.success) {
        // Track successful conversion
        if (typeof window !== "undefined" && typeof window.gtag === "function") {
          // Google Ads Conversion
          window.gtag("event", "conversion", {
            send_to: "AW-17036896370/contact_inquiry",
            value: 30.0,
            currency: "GBP",
            transaction_id: `contact_${Date.now()}`,
          })

// Enhanced Conversion Event for GA4
          window.gtag("event", "generate_lead", {
            currency: "GBP",
            value: 30.0,
            event_category: "engagement",
            event_label: "contact_form_submission",
          })

// GTM Custom Event
          if (window.dataLayer) {
            window.dataLayer.push({
              event: "contact_form_submission",
              form_type: "contact",
              conversion_value: 30,
              currency: "GBP",
            })
          }
        }

setShowSuccess(true)
        // Reset form
        e.currentTarget.reset()
      } else {
        setShowError(true)
      }
    } catch (error) {
      console.error("Form submission error:", error)
      setShowError(true)
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <>
      {/* Hero Banner */}
      <section className="page-header">
        <Image src="/Contact.png" alt="Contact Us" fill className="object-cover" />
        <div className="page-header-content">
          <h1 className="text-4xl font-bold text-white md:text-5xl">CONTACT US</h1>
        </div>
      </section>

{/* Methods of Contact */}
      <section className="bg-white py-16">
        <div className="container">
          <h2 className="mb-12 text-center text-3xl font-bold text-primary">Methods of Contact</h2>
          <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
            <Card className="text-center">
              <CardHeader className="flex flex-col items-center">
                <CalendarRange className="h-12 w-12 text-primary" />
                <CardTitle className="text-xl text-primary">Book Online</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="mb-6 text-gray-600">
                  Fill out our online booking form to request our services at your convenience.
                </p>
                <Button className="bg-primary text-secondary hover:bg-primary/90">
                  <Link href="/book">Book</Link>
                </Button>
              </CardContent>
            </Card>

<Card className="text-center">
              <CardHeader className="flex flex-col items-center">
                <FileText className="h-12 w-12 text-primary" />
                <CardTitle className="text-xl text-primary">Request A Quote</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="mb-6 text-gray-600">
                  Get a personalised quote for your specific cleaning needs without any obligation.
                </p>
                <Button className="bg-primary text-secondary hover:bg-primary/90">
                  <Link href="/book">Quote</Link>
                </Button>
              </CardContent>
            </Card>

<Card className="text-center">
              <CardHeader className="flex flex-col items-center">
                <Clock className="h-12 w-12 text-primary" />
                <CardTitle className="text-xl text-primary">Hours of Operation</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="mb-6 text-gray-600">
                  Monday - Sunday
                  <br />
                  8:00am - 10:00pm
                </p>
                <Button className="bg-primary text-secondary hover:bg-primary/90">
                  <Link href="/book">Schedule</Link>
                </Button>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Contact Details */}
      <section className="bg-gray-50 py-16">
        <div className="container">
          <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
            <Card>
              <CardHeader className="flex items-center">
                <Mail className="mr-2 h-6 w-6 text-primary" />
                <CardTitle className="text-xl text-primary">Email Us</CardTitle>
              </CardHeader>
              <CardContent className="text-center">
                <p className="text-gray-600">
                  <a href="mailto:contactmelodycleaning@gmail.com" className="hover:text-primary">
                    contactmelodycleaning@gmail.com
                  </a>
                </p>
                <p className="mt-2 text-sm text-gray-500">We aim to respond to all emails within 24 hours.</p>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="flex items-center">
                <Phone className="mr-2 h-6 w-6 text-primary" />
                <CardTitle className="text-xl text-primary">Call Us</CardTitle>
              </CardHeader>
              <CardContent className="text-center">
                <p className="text-gray-600">
                  <a href="tel:07453581984" className="hover:text-primary">
                    07453581984
                  </a>
                </p>
                <p className="mt-2 text-sm text-gray-500">Available during our business hours.</p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Map and Hours */}
      <section className="bg-white py-16">
        <div className="container">
          <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
            <div className="relative h-[400px] overflow-hidden rounded-lg shadow-md">
              <iframe
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4865204.804292891!2d-7.7218376684090815!3d54.12416090494634!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x25a3b1142c791a9%3A0xc4f8a0433288257a!2sUnited%20Kingdom!5e0!3m2!1sen!2sus!4v1714665600000!5m2!1sen!2sus"
                width="100%"
                height="100%"
                style={{ border: 0 }}
                allowFullScreen
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
              ></iframe>
            </div>

<div>
              <div className="flex items-center">
                <MapPin className="mr-2 h-6 w-6 text-primary" />
                <h3 className="mb-6 text-2xl font-bold text-primary">Our Service Area</h3>
              </div>
              <p className="mb-4 text-gray-600">We provide our cleaning services in:</p>
              <ul className="mb-8 space-y-2 text-gray-600">
                <li>• London</li>
                <li>• Kent</li>
                <li>• M25</li>
              </ul>
              <p className="mb-8 text-gray-600">
                We also cater to clients further afield, ensuring flexibility and availability wherever our expertise is
                needed.
              </p>

<div className="flex items-center">
                <Clock className="mr-2 h-6 w-6 text-primary" />
                <h3 className="mb-4 text-2xl font-bold text-primary">Opening Hours</h3>
              </div>
              <p className="text-gray-600">
                Monday - Sunday
                <br />
                8:00am - 10:00pm
              </p>

<div className="mt-8">
                <h3 className="mb-4 flex items-center text-2xl font-bold text-primary">Connect With Us</h3>
                <div className="flex space-x-4">
                  <Link
                    href="https://www.facebook.com/profile.php?id=61575544748505"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="rounded-full bg-primary p-3 text-secondary hover:bg-primary/90"
                  >
                    <Facebook className="h-6 w-6" />
                    <span className="sr-only">Facebook</span>
                  </Link>
                  <Link
                    href="https://www.instagram.com/melodycleaningservices"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="rounded-full bg-primary p-3 text-secondary hover:bg-primary/90"
                  >
                    <Instagram className="h-6 w-6" />
                    <span className="sr-only">Instagram</span>
                  </Link>
                  <Link
                    href="https://www.linkedin.com/in/melodycleaningservices"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="rounded-full bg-primary p-3 text-secondary hover:bg-primary/90"
                  >
                    <Linkedin className="h-6 w-6" />
                    <span className="sr-only">LinkedIn</span>
                  </Link>
                  <Link
                    href="https://www.tiktok.com/@melodycleaningservices"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="rounded-full bg-primary p-3 text-secondary hover:bg-primary/90"
                  >
                    <FaTiktok className="h-6 w-6" />
                    <span className="sr-only">TikTok</span>
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* Contact Form */}
      <section className="bg-gray-50 py-16">
        <div className="container">
          <div className="mx-auto max-w-3xl">
            <h2 className="mb-8 text-center text-3xl font-bold text-primary">Send Us a Message</h2>

{/* Success Message */}
            {showSuccess && (
              <div className="mb-6 rounded-lg bg-green-50 border border-green-200 p-4 text-center">
                <p className="text-green-700 font-semibold">Thank you! Your message has been sent successfully.</p>
                <p className="text-green-600 text-sm">We'll get back to you within 24 hours.</p>
              </div>
            )}

{/* Error Message */}
            {showError && (
              <div className="mb-6 rounded-lg bg-red-50 border border-red-200 p-4 text-center">
                <p className="text-red-700 font-semibold">Sorry, there was an error sending your message.</p>
                <p className="text-red-600 text-sm">Please try again or contact us directly.</p>
              </div>
            )}

<div className="form-container rounded-lg bg-white p-8 shadow-md">
              <form className="space-y-6" onSubmit={handleFormSubmit}>
                <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
                  <div>
                    <label htmlFor="name" className="mb-2 block text-sm font-medium">
                      Your Name
                    </label>
                    <input
                      type="text"
                      id="name"
                      name="name"
                      className="w-full rounded-md border border-gray-300 p-2 focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
                      placeholder="John Doe"
                      required
                    />
                  </div>
                  <div>
                    <label htmlFor="email" className="mb-2 block text-sm font-medium">
                      Your Email
                    </label>
                    <input
                      type="email"
                      id="email"
                      name="email"
                      className="w-full rounded-md border border-gray-300 p-2 focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
                      placeholder="john.doe@example.com"
                      required
                    />
                  </div>
                </div>

<div>
                  <label htmlFor="subject" className="mb-2 block text-sm font-medium">
                    Subject
                  </label>
                  <input
                    type="text"
                    id="subject"
                    name="subject"
                    className="w-full rounded-md border border-gray-300 p-2 focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
                    placeholder="How can we help you?"
                    required
                  />
                </div>

<div>
                  <label htmlFor="message" className="mb-2 block text-sm font-medium">
                    Message
                  </label>
                  <textarea
                    id="message"
                    name="message"
                    rows={6}
                    className="w-full rounded-md border border-gray-300 p-2 focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
                    placeholder="Your message here..."
                    required
                  >

) } export default function ContactPage() { return } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter, Poppins } from "next/font/google" import "./globals.css" import Navbar from "@/components/navbar" import Footer from "@/components/footer" import WhatsAppButton from "@/components/whatsapp-button" import EnhancedPhoneTracker from "@/components/enhanced-phone-tracker" import FormTracker from "@/components/FormTracker" import ConversionDebugPanel from "@/components/conversion-debug-panel" import { ThemeProvider } from "@/components/theme-provider" import Script from "next/script" import ScrollToTop from "@/components/scroll-to-top" // Ensure NEXT_PUBLIC_SITE_URL always has a protocol for URL() calls const rawSiteUrl = process.env.NEXT_PUBLIC_SITE_URL || "https://www.melodycleaningservices.co.uk" const siteUrl = rawSiteUrl.startsWith("http") ? rawSiteUrl : `https://${rawSiteUrl}` const inter = Inter({ subsets: ["latin"] }) const poppins = Poppins({ weight: ["700"], subsets: ["latin"], variable: "--font-poppins", }) export const metadata: Metadata = { title: { default: "Melody Cleaning Services | Professional Cleaning in UK", template: "%s | Melody Cleaning Services", }, description: "Professional cleaning services across the UK. Trusted residential & commercial cleaners with same-day service and 100% satisfaction guarantee.", keywords: "cleaning services near me, office cleaning UK, deep cleaning services UK, residential cleaning, commercial cleaning, end of tenancy cleaning, Melody Cleaning Services", authors: [{ name: "Melody Cleaning Services" }], creator: "Melody Cleaning Services", publisher: "Melody Cleaning Services", formatDetection: { email: false, address: false, telephone: false, }, metadataBase: new URL(siteUrl), alternates: { canonical: "/", }, openGraph: { type: "website", locale: "en_GB", url: siteUrl, siteName: "Melody Cleaning Services", title: "Melody Cleaning Services | Professional Cleaning in UK", description: "Professional cleaning services across the UK. Trusted residential & commercial cleaners with same-day service and 100% satisfaction guarantee.", images: [ { url: "/og-image.jpg", width: 1200, height: 630, alt: "Melody Cleaning Services - Professional Cleaning", }, ], }, twitter: { card: "summary_large_image", title: "Melody Cleaning Services | Professional Cleaning in UK", description: "Professional cleaning services across the UK. Trusted residential & commercial cleaners with same-day service and 100% satisfaction guarantee.", images: ["/og-image.jpg"], }, robots: { index: true, follow: true, googleBot: { index: true, follow: true, "max-video-preview": -1, "max-image-preview": "large", "max-snippet": -1, }, }, verification: { google: process.env.NEXT_PUBLIC_GSC_VERIFICATION, }, generator: "v0.dev", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {/* Google Tag Manager */}