76 lines
2.6 KiB
TypeScript
76 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import Link from "next/link";
|
|
|
|
export default function Hero() {
|
|
return (
|
|
<section className="relative h-screen min-h-[600px] flex items-center justify-center overflow-hidden">
|
|
<div className="absolute inset-0 bg-gradient-to-b from-background-ice/50 to-background" />
|
|
|
|
<div className="absolute inset-0 opacity-5">
|
|
<div className="absolute top-20 left-10 w-64 h-64 rounded-full bg-accent blur-3xl" />
|
|
<div className="absolute bottom-20 right-10 w-96 h-96 rounded-full bg-accent-dark blur-3xl" />
|
|
</div>
|
|
|
|
<div className="relative z-10 text-center px-4 max-w-4xl mx-auto">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
>
|
|
<span className="inline-block text-sm tracking-[0.3em] text-foreground-muted mb-6">
|
|
PREMIUM NATURAL OILS
|
|
</span>
|
|
</motion.div>
|
|
|
|
<motion.h1
|
|
className="text-5xl md:text-7xl lg:text-8xl font-serif mb-6 leading-tight"
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.4 }}
|
|
>
|
|
ManoonOils
|
|
</motion.h1>
|
|
|
|
<motion.p
|
|
className="text-xl md:text-2xl text-foreground-muted mb-10 font-light"
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.6 }}
|
|
>
|
|
For hair and skin care
|
|
</motion.p>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.8 }}
|
|
>
|
|
<Link
|
|
href="/en/products"
|
|
className="inline-block px-10 py-4 bg-foreground text-white text-lg tracking-wide hover:bg-accent-dark transition-colors duration-300"
|
|
>
|
|
Shop Now
|
|
</Link>
|
|
</motion.div>
|
|
</div>
|
|
|
|
<motion.div
|
|
className="absolute bottom-10 left-1/2 -translate-x-1/2"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ delay: 1.2, duration: 0.8 }}
|
|
>
|
|
<div className="w-6 h-10 border-2 border-foreground/30 rounded-full flex justify-center pt-2">
|
|
<motion.div
|
|
className="w-1 h-2 bg-foreground/50 rounded-full"
|
|
animate={{ y: [0, 12, 0] }}
|
|
transition={{ repeat: Infinity, duration: 1.5 }}
|
|
/>
|
|
</div>
|
|
</motion.div>
|
|
</section>
|
|
);
|
|
}
|