// Aquaman page sections — Hero, Services, Process, Gallery, Testimonials, Stats, Contact, Footer
const PHONE = '(901) 340-9733';
const PHONE_HREF = 'tel:+19013409733';
const IG = '@aquamanservicesllc';
const IG_HREF = 'https://www.instagram.com/aquamanservicesllc?igsh=dW00aXl3ZW82czFp&utm_source=qr';
const FB = 'Aquaman Services';
const FB_HREF = 'https://www.facebook.com/share/1SXb4mEzVP/?mibextid=wwXIfr';
const EMAIL = 'Aquamancarwash2024@gmail.com';
const EMAIL_HREF = 'mailto:Aquamancarwash2024@gmail.com';
/* ─────────── NAV ─────────── */
const CircularLogo = () =>
AQUAMAN
;
const Nav = ({ onBook }) => {
const [scrolled, setScrolled] = React.useState(false);
React.useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 20);
window.addEventListener('scroll', onScroll);
return () => window.removeEventListener('scroll', onScroll);
}, []);
const links = [
{ id: 'services', label: 'Services' },
{ id: 'enhancements', label: 'Enhancement' },
{ id: 'reel', label: 'Videos' },
{ id: 'contact', label: 'Contact' }];
const socials = [
{ href: IG_HREF, label: 'Instagram', icon:
{/* Background video */}
{/* Cinematic dark overlay — keeps the video visible but legible */}
{/* Vignette */}
{/* Eyebrow */}
We come to you · Premium detailing on demand
{/* Main title */}
Premium mobile detailing,
{/* Vertical divider line */}
{/* CTAs */}
{/* Scroll indicator */}
;
/* ─────────── MARQUEE ─────────── */
/* ─────────── BRANDS MARQUEE ─────────── */
const BrandLogo = ({ name }) => {
const logos = {
meguiars:
Meguiar’ s
,
ps:
P&S
P&S DETAIL
PRODUCTS
,
superior:
SUPERIOR
,
turtle:
TURTLE WAX
,
chemicalguys:
Chemical Guys
PROFESSIONAL DETAILING
,
suds:
SUDS
L A B
,
};
return logos[name] || {name} ;
};
const brandList = [
{ id: 'meguiars', name: "Meguiar's" },
{ id: 'ps', name: 'P&S Detail Products' },
{ id: 'superior', name: 'Superior Products' },
{ id: 'turtle', name: 'Turtle Wax' },
{ id: 'chemicalguys', name: 'Chemical Guys' },
{ id: 'suds', name: 'Suds Lab' }];
const BrandsMarquee = () => {
const loopBrands = [...brandList, ...brandList];
return (
Our trusted brands
{loopBrands.map((b, i) =>
)}
);
};
/* ─────────── MARQUEE (legacy values strip) ─────────── */
const Marquee = () => {
const items = ['PROFESSIONAL', 'RELIABLE', 'TRUSTED', 'MOBILE', 'CERTIFIED', 'INSURED'];
const Row = () =>
<>
{items.map((it, i) =>
{it}
◆
)}
;
return (
{[1, 2, 3].map((i) =>
{items.map((it, j) =>
{it}
◆
)}
)}
);
};
/* ─────────── SERVICES ─────────── */
const services = [
{
icon: {
e.currentTarget.style.transform = 'translateY(-6px)';
e.currentTarget.style.boxShadow = '0 20px 40px rgba(11,26,46,.12)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.transform = '';
e.currentTarget.style.boxShadow = '';
}}>
{s.featured &&
Most popular
}
{s.icon}
{s.title}
{s.desc}
{s.features.map((f) =>
)}
Mobile · We come to you
Book
{/* Left column: services list */}
All Services · {allServices.length}
{/* Right column: heading + motivation */}
Every detail.
From a quick hand wash to a full transformation — we bring water, power and pro-grade products straight to your driveway.
{/* Motivation pillars */}
{motivation.map((m, i) =>
)}
;
/* ─────────── PROCESS ─────────── */
const Process = () => {
const steps = [
{ n: '01', t: 'Book Online or Call', d: 'Pick a service and a time slot. Text or call us directly — we confirm fast.', icon:
{/* Full-bleed background image */}
{/* Dark overlay for legibility */}
{/* Hex pattern texture */}
);
};
/* ─────────── ENHANCEMENT SERVICES ─────────── */
const enhancements = [
{ name: 'Interior Detail', desc: 'Full cabin refresh', video: 'enh-interior.mp4' },
{ name: 'Paint Correction', desc: 'Swirl & scratch removal', video: 'enh-paint.mp4' },
{ name: 'Headlight Restoration', desc: 'Clear hazy lenses', video: 'enh-headlight.mp4' },
{ name: 'Rim Polishing', desc: 'Pulido de rines', video: 'enh-rim.mp4' },
{ name: 'Leather Seat Cleaning', desc: 'Limpieza de cuero', video: 'enh-leather.mp4' },
{ name: 'Pet Hair Removal', desc: 'Limpieza de pelos', video: 'enh-pet.mp4' },
{ name: 'Glass Coating', desc: 'Hydrophobic windows', video: 'enh-glass.mp4' },
{ name: 'Engine Bay Wash', desc: 'Steam degrease & detail', video: 'enh-engine.mp4' }];
const Enhancements = () =>
Restore, protect & elevate. }
light />
At Aquaman Services, we restore , protect and elevate the appearance of your vehicle so it keeps looking its best. Long-lasting finishes that revitalize every surface.
{enhancements.map((e, i) =>
)}
;
const EnhancementCard = ({ e, index }) => {
const [hover, setHover] = React.useState(false);
const [inView, setInView] = React.useState(false);
const videoRef = React.useRef(null);
const cardRef = React.useRef(null);
// Detect when card is in viewport
React.useEffect(() => {
if (!cardRef.current) return;
const obs = new IntersectionObserver(
([entry]) => setInView(entry.isIntersecting),
{ threshold: 0.3 }
);
obs.observe(cardRef.current);
return () => obs.disconnect();
}, []);
// Auto-play when in view + trim last 5 seconds (some clips have outro/promo)
React.useEffect(() => {
const v = videoRef.current;
if (!v) return;
const TRIM_END = 5; // seconds to skip at the end
const onTimeUpdate = () => {
if (v.duration && v.currentTime >= v.duration - TRIM_END) {
v.currentTime = 0;
const p = v.play();
if (p && typeof p.catch === 'function') p.catch(() => {});
}
};
v.addEventListener('timeupdate', onTimeUpdate);
if (inView) {
const p = v.play();
if (p && typeof p.catch === 'function') p.catch(() => {});
} else {
v.pause();
}
return () => v.removeEventListener('timeupdate', onTimeUpdate);
}, [inView]);
// Subtle distinct tint per card so placeholders aren't identical
const tints = [
'linear-gradient(135deg, #1a2940 0%, #2c3f5a 100%)',
'linear-gradient(135deg, #2a1f40 0%, #4a3060 100%)',
'linear-gradient(135deg, #15315A 0%, #1E5BC6 100%)',
'linear-gradient(135deg, #1a2030 0%, #2a3550 100%)',
'linear-gradient(135deg, #20283a 0%, #364556 100%)',
'linear-gradient(135deg, #15315A 0%, #2F7BFF 100%)'];
return (
setHover(true)}
onMouseLeave={() => setHover(false)}
style={{
position: 'relative',
aspectRatio: '4/5',
overflow: 'hidden',
cursor: 'pointer',
clipPath: 'polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px))',
transform: hover ? 'translateY(-6px)' : 'none',
transition: 'transform .3s ease'
}}>
{/* Background — video if provided, else tinted placeholder */}
{e.video ?
<>
{/* Subtle dark overlay for label readability */}
:
<>
[ photo ]
}
{/* Label pill — fixed height for uniformity */}
{/* Corner accent on hover */}
setHover(true)}
onMouseLeave={() => setHover(false)}
style={{
marginTop: 20,
position: 'relative',
display: 'grid',
gridTemplateColumns: '1.1fr 1fr',
background: 'linear-gradient(135deg, #15315A 0%, #1E5BC6 100%)',
color: 'white',
overflow: 'hidden',
clipPath: 'polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px))',
cursor: 'pointer',
transform: hover ? 'translateY(-4px)' : 'none',
transition: 'transform .3s ease'
}}
className="featured-enh">
{/* Image side */}
[ photo ]
{/* Steam badge */}
{/* Content side */}
★ Premium Service
{e.name}
{e.desc}
{e.bullets.map((b) =>
)}
playing ? pause() : play()}
style={{
position: 'relative',
aspectRatio: '9 / 16',
overflow: 'hidden',
cursor: 'pointer',
background: '#000',
clipPath: 'polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px))',
transform: playing ? 'translateY(-8px) scale(1.02)' : 'translateY(0) scale(1)',
boxShadow: playing ?
'0 30px 60px rgba(30,91,198,.35), 0 0 0 1px rgba(47,123,255,.4)' :
'0 10px 30px rgba(0,0,0,.3)',
transition: 'transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease'
}}>
{/* Always-visible top label */}
{/* Mute toggle (only when playing) */}
{playing &&
{muted ?
:
}
}
{/* Play overlay (when paused) */}
{/* Bottom reel number indicator */}
Reel · {String(index + 1).padStart(2, '0')}
{/* Hover hint (only when not playing, fades out on hover) */}
Watch the shine. }
subtitle="Hover over a clip to see the work in motion — real jobs, real cars, real results. Tap to play with sound."
light
align="center" />
{reelClips.map((clip, i) =>
)}
;
/* ─────────── STATS ─────────── */
const Stats = () => {
const stats = [
{ n: '500+', l: 'Vehicles Detailed' },
{ n: '4.9', l: 'Average Rating', sub: '★★★★★' },
{ n: '3 hr', l: 'Average Service Time' },
{ n: '100%', l: 'Satisfaction Guarantee' }];
return (
{stats.map((s, i) =>
{s.n}
{s.sub &&
{s.sub}
}
{s.l}
)}
);
};
/* ─────────── GALLERY (before/after) ─────────── */
const BeforeAfter = ({ label }) => {
const [pos, setPos] = React.useState(50);
const ref = React.useRef();
const dragging = React.useRef(false);
const handleMove = (clientX) => {
if (!ref.current) return;
const r = ref.current.getBoundingClientRect();
const p = (clientX - r.left) / r.width * 100;
setPos(Math.max(0, Math.min(100, p)));
};
return (
{dragging.current = true;handleMove(e.clientX);}}
onMouseMove={(e) => {if (dragging.current) handleMove(e.clientX);}}
onMouseUp={() => {dragging.current = false;}}
onMouseLeave={() => {dragging.current = false;}}
onTouchStart={(e) => handleMove(e.touches[0].clientX)}
onTouchMove={(e) => handleMove(e.touches[0].clientX)}>
{/* "After" image (full) */}
[ AFTER · {label} ]
{/* "Before" image (clipped) */}
{/* Divider handle */}
{/* Labels */}
Before
After
{['Wheels', 'Seats', 'Engine bay', 'Paint correction'].map((l, i) =>
[ {l} ]
)}
;
/* ─────────── SOCIAL ─────────── */
const Social = () => {
const links = [
{
name: 'Instagram',
handle: IG,
href: IG_HREF,
icon:
{/* Label */}
Stay connected
Follow & message us
{/* Vertical divider */}
{/* Icon pills */}
);
};
/* ─────────── REVIEWS ─────────── */
const reviews = [
{ name: 'Marcus T.', text: 'Aquaman came out to my office during lunch — left for a meeting and came back to a brand new looking truck. Worth every dollar.', stars: 5, service: 'Exterior + Ceramic' },
{ name: 'Brenda K.', text: 'Two kids, one dog, three years of road trips. They got it looking better than the day I bought it. Carpets came out spotless.', stars: 5, service: 'Deep Interior' },
{ name: 'Devon R.', text: 'Professional, on time, fair price. Did my wife\'s car for her birthday and she literally cried. Booking again next month.', stars: 5, service: 'Full Detail' }];
const Reviews = () =>
{reviews.map((r, i) =>
{Array.from({ length: r.stars }).map((_, j) =>
"{r.text}"
)}
;
/* ─────────── CONTACT ─────────── */
const Contact = ({ onBook }) =>
;
const QuoteForm = ({ onBook }) => {
const [data, setData] = React.useState({ name: '', phone: '', vehicle: '', service: 'Exterior Car Cleaning' });
const [sent, setSent] = React.useState(false);
const set = (k, v) => setData((d) => ({ ...d, [k]: v }));
const submit = (e) => {
e.preventDefault();
setSent(true);
setTimeout(() => setSent(false), 4000);
};
if (sent) {
return (
Got it, {data.name || 'friend'}!
We'll text you at {data.phone || 'your number'} within an hour to confirm.
);
}
return (
);
};
/* ─────────── OUTRO / BRAND REVEAL ─────────── */
const Outro = ({ onBook }) => {
const videoRef = React.useRef(null);
const sectionRef = React.useRef(null);
const [progress, setProgress] = React.useState(0);
// Track scroll progress inside this section (0 → 1)
React.useEffect(() => {
const onScroll = () => {
if (!sectionRef.current) return;
const rect = sectionRef.current.getBoundingClientRect();
const vh = window.innerHeight;
// 0 when section bottom enters viewport, 1 when section top exits top
const total = rect.height + vh;
const p = Math.max(0, Math.min(1, (vh - rect.top) / total));
setProgress(p);
// Speed up the video as user scrolls toward the bottom
const v = videoRef.current;
if (v && v.duration && !isNaN(v.duration)) {
// Smooth speed ramp: 1x → 2.5x toward the end
const speed = 1 + p * 1.5;
v.playbackRate = Math.max(1, Math.min(2.8, speed));
}
};
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
return () => window.removeEventListener('scroll', onScroll);
}, []);
return (
{/* Cinematic overlay */}
{/* Vignette */}
{/* Motion-blur speed lines (scale with progress) */}
{/* Eyebrow */}
★ Premium mobile detailing ★
{/* AQUAMAN logo + wordmark */}
{/* Underline */}
{/* Sub */}
Detailing that comes to you.
{/* CTA */}
Book Your Detail
{(1 + progress * 1.5).toFixed(2)}× SPEED
);
};
const Footer = () =>
Premium mobile detailing in the Memphis metro. Quality you can see, detailing you can trust, satisfaction guaranteed.
© {new Date().getFullYear()} Aquaman Services LLC. All rights reserved.
Professional
◆
Reliable
◆
Trusted
;
Object.assign(window, {
Nav, Hero, Marquee, BrandsMarquee, Services, Process, Stats,
Gallery, Social, Reviews, Contact, Outro, Footer, services,
Enhancements, enhancements,
Reel, reelClips,
PHONE, PHONE_HREF, IG, IG_HREF, FB, FB_HREF
}); 