import {
  Sparkles,
  Feather,
  Leaf,
  Heart,
  ShieldCheck,
  Star,
  Home,
  Phone,
  Mail,
  MapPin,
  CheckCircle,
  Menu
} from "lucide-react";

import "./index.css";


export default function App() {

const services = [
{
icon: Home,
title:"Routine House Cleaning",
text:"A gentle maintenance clean that keeps your home feeling fresh, peaceful, and cared for."
},
{
icon: Sparkles,
title:"Deep Cleaning",
text:"A detailed refresh that restores comfort, brightness, and calm throughout your space."
},
{
icon: Feather,
title:"Move-In / Move-Out",
text:"A beautiful reset for new beginnings and peaceful transitions."
},
{
icon: Leaf,
title:"Kitchen Refresh",
text:"Bringing warmth and sparkle back to the heart of your home."
},
{
icon: Sparkles,
title:"Bathroom Deep Clean",
text:"Fresh, hygienic spaces with thoughtful attention to every detail."
},
{
icon: Home,
title:"Apartment Cleaning",
text:"Personalized care designed around your unique home."
}
];


const values=[
"Reliable Care",
"Friendly Service",
"Attention To Detail",
"Eco-Conscious Options",
"Fully Insured",
"Personalized Plans"
];


return (

<div className="bg-[#FAF7F0] text-[#51473D] overflow-hidden">


{/* NAV */}

<header className="
fixed top-5 left-1/2 -translate-x-1/2 z-50
w-[90%] max-w-6xl
bg-white/70 backdrop-blur-xl
rounded-full shadow-lg
">

<div className="flex justify-between items-center px-8 py-4">


<div className="flex items-center gap-3">

<div className="
bg-[#7D876B]
text-white
p-2 rounded-full
">

<Feather size={20}/>

</div>

<h1 className="
font-serif text-2xl
">
Brooms & Feathers
</h1>

</div>


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

<a>Home</a>
<a>About</a>
<a>Services</a>
<a>Reviews</a>
<a>Contact</a>

</nav>


<button className="
bg-[#7D876B]
text-white
rounded-full
px-6 py-3
hover:bg-[#667052]
transition
">

Book Cleaning

</button>


</div>

</header>





{/* HERO */}


<section className="
min-h-screen
relative
flex items-center
px-6 md:px-20
pt-32
">


<div className="
absolute
top-0 right-0
w-[600px]
h-[600px]
bg-[#F3EBDD]
rounded-full
blur-3xl
opacity-70
"/>



<div className="
grid md:grid-cols-2
gap-16
items-center
max-w-7xl
mx-auto
">


<div className="animate-fade">


<div className="
flex items-center gap-2
text-[#A8795A]
mb-6
">

<Sparkles size={18}/>
Everyday magic for your home

</div>



<h2 className="
font-serif
text-6xl md:text-8xl
leading-none
">

A Little Magic
<br/>
For Your Home

</h2>



<p className="
mt-8
text-lg
leading-relaxed
max-w-xl
">

Thoughtful residential cleaning that brings comfort,
calm, and care into your everyday spaces.

</p>



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


<button className="
bg-[#7D876B]
text-white
px-8 py-4
rounded-full
shadow-xl
hover:-translate-y-1
transition
">

Book A Cleaning

</button>


<button className="
border border-[#B8A58F]
px-8 py-4
rounded-full
hover:bg-[#F3EBDD]
">

Free Quote

</button>


</div>


</div>




<div className="
relative
">


<img

src="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c"

alt="cozy cottage home"

className="
rounded-[50px]
shadow-2xl
h-[650px]
object-cover
w-full
"

/>


<div className="
absolute
bottom-8
left-8
bg-white/80
backdrop-blur
rounded-3xl
p-6
shadow-xl
">

<Heart className="text-[#A8795A]"/>

<p className="font-serif text-xl mt-2">
A home cared for with love
</p>

</div>


</div>


</div>

</section>







{/* ABOUT */}

<section className="
py-28
px-6 md:px-20
">

<div className="
max-w-6xl mx-auto
grid md:grid-cols-2
gap-16
items-center
">


<img

src="https://images.unsplash.com/photo-1618220179428-22790b461013"

alt="cozy interior"

className="
rounded-[60px]
shadow-xl
"

/>


<div>

<p className="text-[#7D876B]">
Our Story
</p>


<h2 className="
font-serif
text-5xl
mt-3
">

Meet Brooms & Feathers

</h2>


<p className="
mt-6
text-lg
leading-relaxed
">

Cleaning is more than a task — it's a way of creating
a home that feels peaceful, welcoming, and ready to enjoy.
Every visit is completed with care, respect, and attention
to the little details.

</p>


<div className="
mt-8
italic
font-serif
text-2xl
text-[#7D876B]
">

"Helping your home feel lighter, brighter,
and beautifully cared for."

</div>


</div>


</div>

</section>







{/* SERVICES */}


<section className="
bg-[#F3EBDD]
py-28
px-6 md:px-20
">


<h2 className="
text-center
font-serif
text-5xl
">

Our Services

</h2>


<div className="
grid md:grid-cols-3
gap-8
mt-16
max-w-7xl
mx-auto
">


{services.map((service,i)=>{

const Icon=service.icon;


return (

<div
key={i}
className="
bg-[#FAF7F0]
rounded-[35px]
p-8
shadow-md
hover:shadow-xl
hover:-translate-y-2
transition
"
>


<Icon
size={35}
className="text-[#7D876B]"
/>


<h3 className="
font-serif
text-3xl
mt-6
">

{service.title}

</h3>


<p className="mt-4">

{service.text}

</p>


<button className="
mt-6
text-[#7D876B]
">

Learn More →

</button>


</div>


)

})}


</div>


</section>







{/* VALUES */}

<section className="
py-28 px-6 md:px-20
">


<h2 className="
text-center
font-serif
text-5xl
">

Why Choose Us

</h2>


<div className="
grid md:grid-cols-3
gap-8
mt-14
max-w-5xl
mx-auto
">


{values.map(v=>(

<div className="
flex items-center gap-3
text-lg
">

<CheckCircle
className="text-[#7D876B]"
/>

{v}

</div>

))}


</div>

</section>






{/* TESTIMONIAL */}

<section className="
bg-[#E9DDCC]
py-24
px-6
">


<h2 className="
font-serif text-5xl text-center
">

Kind Words

</h2>


<div className="
grid md:grid-cols-3
gap-8
max-w-6xl mx-auto mt-12
">


{[
"Every detail was handled with so much care. My home feels peaceful again.",
"The sweetest cleaning service I've ever used.",
"They truly make coming home feel special."
].map(t=>(


<div className="
bg-white
rounded-3xl
p-8
shadow
">


<div className="flex text-[#C7A86B]">

<Star fill="currentColor"/>
<Star fill="currentColor"/>
<Star fill="currentColor"/>

</div>


<p className="mt-5 italic">
"{t}"
</p>


</div>


))}


</div>


</section>






{/* CTA */}

<section className="
m-6 md:m-20
rounded-[60px]
bg-[#7D876B]
text-white
text-center
py-24
px-8
">


<h2 className="
font-serif
text-5xl
">

Ready For A Home That Feels Like Home Again?

</h2>


<button className="
mt-10
bg-white
text-[#51473D]
px-10
py-4
rounded-full
">

Request Your Free Quote

</button>


</section>







{/* FOOTER */}

<footer className="
bg-[#51473D]
text-[#FAF7F0]
px-8 md:px-20
py-16
">


<div className="
grid md:grid-cols-4 gap-10
">


<div>

<h3 className="
font-serif text-3xl
">

Brooms & Feathers

</h3>


<p className="mt-4">

Creating peaceful spaces you'll love coming home to.

</p>

</div>



<div>

<h4>Contact</h4>

<p className="mt-3 flex gap-2">
<Phone size={16}/>555-555-5555
</p>

<p className="mt-3 flex gap-2">
<Mail size={16}/>hello@email.com
</p>


</div>



<div>

<h4>Hours</h4>

<p className="mt-3">
Mon-Fri
<br/>
8am-5pm
</p>

</div>



<div>

<h4>Location</h4>

<p className="mt-3 flex gap-2">
<MapPin size={16}/>
Your Service Area
</p>

</div>


</div>


</footer>



</div>

)

}