export default function RonsTrashValetWebsite() {

const heroImage = "data:image/jpeg;base64,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";

const services = [

"Weekly trash valet",

"Vacation rental turnover service",

"Residential curb service",

"HOA community support",

];

const steps = [

{

title: "Sign up in minutes",

text: "Tell us your address, pickup days, and any gate or community details.",

},

{

title: "We roll it out",

text: "We bring your cans to the curb before pickup and return them after service.",

},

{

title: "You stay hassle-free",

text: "No more missed pickup days, heavy lifting, or last-minute scrambling.",

},

];

const highlights = [

"Reliable weekly service",

"Perfect for vacation rentals",

"Friendly residential support",

"Ideal for HOAs and busy homeowners",

];

return (

<div className="min-h-screen bg-slate-950 text-white">

<header className="sticky top-0 z-50 border-b border-white/10 bg-slate-950/85 backdrop-blur">

<div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">

<div>

<div className="text-xl font-black tracking-wide">Ron&apos;s Trash Valet</div>

<div className="text-xs text-sky-300">Reliable. Weekly. Done Right.</div>

</div>

<nav className="hidden gap-6 text-sm md:flex">

<a href="#services" className="hover:text-sky-300">Services</a>

<a href="#how-it-works" className="hover:text-sky-300">How It Works</a>

<a href="#why-us" className="hover:text-sky-300">Why Us</a>

<a href="#contact" className="hover:text-sky-300">Contact</a>

</nav>

<a

href="tel:6028808050"

className="rounded-full bg-red-600 px-5 py-3 text-sm font-bold shadow-lg shadow-red-600/30 transition hover:scale-105 hover:bg-red-500"

>

Call 602.880.8050

</a>

</div>

</header>

<section className="relative overflow-hidden">

<div className="absolute inset-0 bg-gradient-to-b from-sky-500/10 via-transparent to-slate-950" />

<div className="mx-auto grid max-w-7xl gap-10 px-6 py-16 lg:grid-cols-[1.05fr_.95fr] lg:items-center lg:py-24">

<div>

<div className="mb-4 inline-flex items-center rounded-full border border-sky-400/30 bg-sky-400/10 px-4 py-2 text-sm text-sky-200">

Trash can to curb service for homes, rentals, and HOAs

</div>

<h1 className="max-w-3xl text-4xl font-black leading-tight sm:text-5xl lg:text-6xl">

We take your can to the curb so you don&apos;t have to.

</h1>

<p className="mt-6 max-w-2xl text-lg leading-8 text-slate-300">

Ron&apos;s Trash Valet helps homeowners, vacation rental hosts, and communities stay on schedule with dependable weekly trash service.

</p>

<div className="mt-8 flex flex-wrap gap-4">

<a

href="tel:6028808050"

className="rounded-2xl bg-red-600 px-6 py-4 font-bold shadow-xl shadow-red-600/30 transition hover:-translate-y-0.5 hover:bg-red-500"

>

Get Started

</a>

<a

href="#services"

className="rounded-2xl border border-white/15 bg-white/5 px-6 py-4 font-semibold text-slate-100 transition hover:bg-white/10"

>

View Services

</a>

</div>

<div className="mt-8 flex flex-wrap gap-3 text-sm text-slate-300">

{highlights.map((item) => (

<span key={item} className="rounded-full border border-white/10 bg-white/5 px-4 py-2">

{item}

</span>

))}

</div>

</div>

<div className="relative">

<div className="absolute -inset-6 rounded-[2rem] bg-sky-500/20 blur-3xl" />

<div className="relative overflow-hidden rounded-[2rem] border border-white/10 bg-slate-900 shadow-2xl shadow-sky-500/10">

<img src={heroImage} alt="Ron's Trash Valet graphic" className="h-full w-full object-cover" />

</div>

</div>

</div>

</section>

<section id="services" className="mx-auto max-w-7xl px-6 py-16 lg:py-24">

<div className="mb-10 max-w-2xl">

<p className="text-sm font-semibold uppercase tracking-[0.2em] text-sky-300">Services</p>

<h2 className="mt-3 text-3xl font-black sm:text-4xl">Simple service that saves time every week.</h2>

</div>

<div className="grid gap-6 md:grid-cols-2 xl:grid-cols-4">

{services.map((service) => (

<div key={service} className="rounded-[1.5rem] border border-white/10 bg-white/5 p-6 shadow-lg shadow-black/20">

<div className="mb-4 h-12 w-12 rounded-2xl bg-sky-400/15" />

<h3 className="text-xl font-bold">{service}</h3>

<p className="mt-3 text-slate-300">

Dependable pickup-day support designed to keep properties clean, on time, and stress-free.

</p>

</div>

))}

</div>

</section>

<section id="how-it-works" className="bg-white/[0.03] py-16 lg:py-24">

<div className="mx-auto max-w-7xl px-6">

<div className="mb-10 max-w-2xl">

<p className="text-sm font-semibold uppercase tracking-[0.2em] text-sky-300">How it works</p>

<h2 className="mt-3 text-3xl font-black sm:text-4xl">Fast, easy, and reliable every week.</h2>

</div>

<div className="grid gap-6 lg:grid-cols-3">

{steps.map((step, index) => (

<div key={step.title} className="rounded-[1.75rem] border border-white/10 bg-slate-900 p-8">

<div className="mb-6 flex h-14 w-14 items-center justify-center rounded-2xl bg-red-600 text-xl font-black">

{index + 1}

</div>

<h3 className="text-2xl font-bold">{step.title}</h3>

<p className="mt-4 leading-7 text-slate-300">{step.text}</p>

</div>

))}

</div>

</div>

</section>

<section id="why-us" className="mx-auto max-w-7xl px-6 py-16 lg:py-24">

<div className="grid gap-8 lg:grid-cols-[.95fr_1.05fr] lg:items-center">

<div className="rounded-[2rem] border border-white/10 bg-gradient-to-br from-sky-500/10 to-red-500/10 p-8 shadow-xl shadow-black/20">

<h2 className="text-3xl font-black sm:text-4xl">Why homeowners and hosts choose Ron&apos;s Trash Valet</h2>

<p className="mt-5 max-w-xl leading-8 text-slate-300">

We focus on one job and do it well: getting your cans out and back on time. That means fewer missed pickups, cleaner-looking properties, and one less thing on your to-do list.

</p>

<div className="mt-8 grid gap-4 sm:grid-cols-2">

{[

"Dependable weekly schedule",

"Great for second homes",

"Perfect for busy families",

"Professional curbside appearance",

].map((point) => (

<div key={point} className="rounded-2xl border border-white/10 bg-white/5 px-4 py-4 text-slate-200">

{point}

</div>

))}

</div>

</div>

<div className="grid gap-6 sm:grid-cols-2">

{[

["Weekly service", "Stay on top of pickup days without lifting a finger."],

["Vacation rentals", "Keep guest turnovers smooth and maintain curb appeal."],

["Residential", "Reliable support for homeowners who want one less chore."],

["HOAs", "Consistent, organized service for neighborhoods and communities."],

].map(([title, text]) => (

<div key={title} className="rounded-[1.5rem] border border-white/10 bg-white/5 p-6">

<h3 className="text-xl font-bold">{title}</h3>

<p className="mt-3 leading-7 text-slate-300">{text}</p>

</div>

))}

</div>

</div>

</section>

<section id="contact" className="pb-20">

<div className="mx-auto max-w-5xl px-6">

<div className="overflow-hidden rounded-[2rem] border border-white/10 bg-gradient-to-r from-red-600 to-sky-600 p-10 shadow-2xl shadow-sky-600/20 sm:p-14">

<div className="grid gap-8 lg:grid-cols-[1fr_auto] lg:items-center">

<div>

<p className="text-sm font-semibold uppercase tracking-[0.2em] text-white/80">Ready to get started?</p>

<h2 className="mt-3 text-3xl font-black sm:text-4xl">Get dependable trash valet service for your property.</h2>

<p className="mt-4 max-w-2xl text-white/85">

Call today to set up weekly service for your home, vacation rental, or community.

</p>

</div>

<div className="flex flex-col gap-4">

<a

href="tel:6028808050"

className="rounded-2xl bg-slate-950 px-6 py-4 text-center font-bold text-white transition hover:bg-slate-900"

>

602.880.8050

</a>

<a

href="https://RonsTrashValet.com"

className="rounded-2xl border border-white/30 px-6 py-4 text-center font-semibold text-white transition hover:bg-white/10"

>

RonsTrashValet.com

</a>

</div>

</div>

</div>

</div>

</section>

<footer className="border-t border-white/10 py-8">

<div className="mx-auto flex max-w-7xl flex-col gap-3 px-6 text-sm text-slate-400 sm:flex-row sm:items-center sm:justify-between">

<div>© 2026 Ron&apos;s Trash Valet. All rights reserved.</div>

<div>Reliable. Weekly. Done Right.</div>

</div>

</footer>

</div>

);

}