39 lines
1.7 KiB
TypeScript
39 lines
1.7 KiB
TypeScript
"use client";
|
|
import { Container } from "@/components/container";
|
|
import { Heading } from "@/components/heading";
|
|
import { Subheading } from "@/components/subheading";
|
|
import { Button } from "@/components/ui/button";
|
|
import { motion } from "framer-motion";
|
|
|
|
export function Hero() {
|
|
return (
|
|
<section className="relative h-[90vh] flex items-center justify-center overflow-hidden bg-[#F9F7F2]">
|
|
<Container className="relative z-10 text-center">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
>
|
|
<Heading className="text-5xl md:text-7xl font-light tracking-tight text-neutral-900 mb-6">
|
|
Indian Soul. <br /> Western Ease.
|
|
</Heading>
|
|
<Subheading className="max-w-2xl mx-auto text-lg md:text-xl text-neutral-600 mb-10">
|
|
Soft luxury women and kids clothing rooted in Indian soul and shaped by Western ease. Designed in Greater Noida, India.
|
|
</Subheading>
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<Button size="lg" className="bg-neutral-900 text-white hover:bg-neutral-800 px-8 py-6 text-lg rounded-none">
|
|
Explore Women
|
|
</Button>
|
|
<Button size="lg" variant="outline" className="border-neutral-900 text-neutral-900 hover:bg-neutral-50 px-8 py-6 text-lg rounded-none">
|
|
Explore Kids
|
|
</Button>
|
|
</div>
|
|
</motion.div>
|
|
</Container>
|
|
<div className="absolute inset-0 z-0 opacity-20">
|
|
<div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1581338834647-b0fb40704e21?q=80&w=2000&auto=format&fit=crop')] bg-cover bg-center" />
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|