/* SP Valets — Home page sections. Responsive for mobile. */ const SECTION = { padding: "var(--section-y-md) 5%" }; const CONTAINER = { maxWidth: "var(--container-xxl)", margin: "0 auto" }; const INSTAGRAM_URL = "https://www.instagram.com/sp__valets/"; const PHONE_URL = "tel:+447565715968"; function Hero({ onBook, onNav }) { const { Button } = window.ReviveRefineDesignSystem_38ca5a; const isMobile = window.useIsMobile(); return (
SP Valets

Professional valeting · Leeds

Give your car the care it deserves.

Professional valeting, premium results, honest prices. Interior and exterior, done properly.

); } function FeatureIntro() { const Icon = window.RRIcon; const isMobile = window.useIsMobile(); const steps = [ { icon: "chat", num: "01", title: "Drop us a message", body: "Tell us the car and what it needs. Or give us a ring." }, { icon: "event_available", num: "02", title: "Book your slot", body: "We'll sort a time that works around you." }, { icon: "auto_awesome", num: "03", title: "We get to work", body: "Snow foam, hand wash, interior — nothing skipped." }, { icon: "star", num: "04", title: "Gleaming", body: "You get back a car you're happy to be seen in." }, ]; return (

How it works

Simple from start to finish

{steps.map((s, i) => (
{s.num} {!isMobile && i < steps.length - 1 &&
}
{s.title}

{s.body}

))}
); } const SERVICES = [ { icon: "auto_fix", title: "Mini Valet", body: "Interior and exterior together — the everyday favourite.", price: "£20" }, { icon: "cleaning_services", title: "Interior", body: "Hoovered throughout, surfaces cleaned and refreshed.", price: "£10" }, { icon: "local_car_wash", title: "Exterior", body: "Snow foam pre-wash, hand wash and a proper dry.", price: "£10" }, { icon: "directions_car", title: "4x4s & Larger Vehicles", body: "SUVs, pick-ups and vans priced by size.", price: "from £12" }, { icon: "shield", title: "Exterior Protection", body: "Added protection to keep the finish looking sharp.", price: "from £5" }, ]; function ServicesList() { const { Card, CardBody } = window.ReviveRefineDesignSystem_38ca5a; const Icon = window.RRIcon; const isMobile = window.useIsMobile(); const [hovered, setHovered] = React.useState(null); return (

Services

Valet packages

Larger vehicles are priced by size. Message us with your car and we'll give you a straight price.

{!isMobile && ( What we offer )}
{isMobile && ( What we offer )} {SERVICES.map((s, i) => ( setHovered(i)} onMouseLeave={() => setHovered(null)} onClick={() => window.open(INSTAGRAM_URL, "_blank")} style={{ borderColor: "var(--color-neutral-lightest)", boxShadow: hovered === i ? "var(--shadow-md)" : "var(--shadow-sm)", transform: hovered === i ? "translateY(-4px)" : "translateY(0)", transition: "transform 0.18s ease, box-shadow 0.18s ease", cursor: "pointer" }}>
{s.title}

{s.body}

{s.price}

 ))}
); } const BENEFITS = [ { icon: "verified", title: "Professional service", body: "Done properly, every time — no shortcuts and no rushed jobs." }, { icon: "bolt", title: "Fast & reliable", body: "We turn up when we say we will and get it done." }, { icon: "sentiment_satisfied", title: "Customer satisfaction", body: "You're not paying until you're happy with how it looks." }, ]; function Benefits({ onNav }) { const { Button } = window.ReviveRefineDesignSystem_38ca5a; const Icon = window.RRIcon; const isMobile = window.useIsMobile(); return (

Why choose us

{isMobile && ( Valeting in progress )}
{BENEFITS.map((b) => (
{b.title}

{b.body}

))}
{!isMobile && ( Valeting in progress )}
); } function Gallery({ onNav }) { const isMobile = window.useIsMobile(); const [hovered, setHovered] = React.useState(null); const [btnHovered, setBtnHovered] = React.useState(false); const images = [ { src: "gallery-full-valet.jpg", label: "Mini Valet", sub: "Inside and out in one visit", pos: "center center" }, { src: "gallery-0.jpg", label: "Exterior Wash", sub: "Snow foam and hand wash", pos: "center center" }, { src: "gallery-ceramic.jpg", label: "Interior Clean", sub: "Hoovered, wiped and refreshed", pos: "center center" }, { src: "gallery-interior.jpg", label: "4x4s & Larger Vehicles", sub: "SUVs and larger cars, priced by size", pos: "center center" }, ]; const visibleImages = isMobile ? images.slice(0, 2) : images; return (

Our work

Results that speak for themselves

{visibleImages.map((img, i) => (
setHovered(i)} onMouseLeave={() => setHovered(null)} style={{ border: "1px solid var(--color-neutral-lightest)", borderRadius: "var(--radius-image)", boxShadow: hovered === i ? "var(--shadow-md)" : "var(--shadow-sm)", overflow: "hidden", background: "var(--scheme-bg)", transform: hovered === i ? "translateY(-4px)" : "translateY(0)", transition: "transform 0.18s ease, box-shadow 0.18s ease", cursor: "pointer" }}> {img.label}

{img.label}

{img.sub}

))}
setBtnHovered(true)} onMouseLeave={() => setBtnHovered(false)} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--accent)", fontWeight: 600, fontSize: "var(--text-small)", display: "inline-flex", alignItems: "center", gap: "var(--space-2)", padding: 0, textDecoration: "none", opacity: btnHovered ? 0.7 : 1, transform: btnHovered ? "translateX(3px)" : "translateX(0)", transition: "opacity 0.15s ease, transform 0.15s ease" }}> See more on Instagram ›
); } const QUOTES = [ { stars: 5, quote: "Thank you so much — you did a great job.", name: "ayeshaa_b.x", meta: "Instagram · Leeds" }, { stars: 5, quote: "Fantastic job. I shall try to keep it this clean!", name: "nadiaa232416", meta: "Instagram · Leeds" }, { stars: 5, quote: "Looks great. Very well done.", name: "antiatrocity", meta: "Instagram · Leeds" }, ]; function Testimonials({ onBook }) { const { Card, CardBody } = window.ReviveRefineDesignSystem_38ca5a; const Stars = window.RRStars; const isMobile = window.useIsMobile(); const [linkHovered, setLinkHovered] = React.useState(false); const [start, setStart] = React.useState(0); const PER_PAGE = isMobile ? 1 : 3; const total = QUOTES.length; const visible = Array.from({ length: PER_PAGE }, (_, i) => QUOTES[(start + i) % total]); const ArrowBtn = ({ onClick, icon }) => { const [hovered, setHovered] = React.useState(false); return ( ); }; return (

Reviews

What customers say

{visible.map((q, i) => (

"{q.quote}"

{q.name} · {q.meta}
))}
setStart((s) => (s - PER_PAGE + total) % total)} /> setStart((s) => (s + PER_PAGE) % total)} />
setLinkHovered(true)} onMouseLeave={() => setLinkHovered(false)} style={{ color: "var(--accent)", fontWeight: 600, fontSize: "var(--text-small)", textDecoration: "none", opacity: linkHovered ? 0.7 : 1, transition: "opacity 0.15s ease" }}> See more on Instagram ›
); } /* ---- Booking preview ---------------------------------------- */ const BOOKING_SERVICES = [ { name: "Mini Valet", note: "Inside and out", price: "£20" }, { name: "Interior", note: "Hoover and surfaces", price: "£10" }, { name: "Exterior", note: "Snow foam and hand wash", price: "£10" }, { name: "4x4s & Larger", note: "Priced by size", price: "from £12" }, ]; const BOOKING_DAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; const BOOKING_SLOTS = ["09:00", "11:00", "13:00", "15:00"]; function Newsletter() { const isMobile = window.useIsMobile(); const [service, setService] = React.useState(0); const [day, setDay] = React.useState(1); const [slot, setSlot] = React.useState(0); const pill = (active) => ({ padding: "10px 14px", borderRadius: "var(--radius-checkbox)", border: active ? "1px solid var(--accent)" : "1px solid var(--scheme-border)", background: active ? "var(--color-mongoose-lighter)" : "transparent", color: active ? "var(--accent)" : "var(--scheme-muted)", fontSize: "var(--text-small)", fontWeight: active ? 600 : 400, cursor: "pointer", transition: "all 0.15s ease", whiteSpace: "nowrap", }); return (

Booking

Pick a service and a time

No back and forth — customers choose a slot themselves and the job lands straight in your diary.

1 · Choose your service

{BOOKING_SERVICES.map((s, i) => (
setService(i)} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "var(--space-3)", padding: "var(--space-4)", borderRadius: "var(--radius-checkbox)", border: service === i ? "1px solid var(--accent)" : "1px solid var(--scheme-border)", background: service === i ? "var(--color-mongoose-lighter)" : "transparent", cursor: "pointer", transition: "all 0.15s ease", }}>

{s.name}

{s.note}

{s.price}
))}

2 · Pick a day

{BOOKING_DAYS.map((d, i) => (
setDay(i)} style={pill(day === i)}>{d}
))}

3 · Pick a time

{BOOKING_SLOTS.map((t, i) => (
setSlot(i)} style={{ ...pill(slot === i), textAlign: "center" }}>{t}
))}

{BOOKING_SERVICES[service].name} · {BOOKING_DAYS[day]} at {BOOKING_SLOTS[slot]} · {BOOKING_SERVICES[service].price}

Confirm booking

Preview only — live booking gets set up with the finished site.

); } Object.assign(window, { RRHero: Hero, RRFeatureIntro: FeatureIntro, RRServicesList: ServicesList, RRBenefits: Benefits, RRGallery: Gallery, RRTestimonials: Testimonials, RRNewsletter: Newsletter });