47 lines
2.4 KiB
TypeScript
47 lines
2.4 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 { Badge } from "@/components/badge";
|
||
import { motion } from "framer-motion";
|
||
|
||
export function Hero() {
|
||
return (
|
||
<section className="relative pt-20 pb-16 md:pt-32 md:pb-24 overflow-hidden">
|
||
<div className="absolute inset-0 bg-gradient-to-b from-blue-50 to-white -z-10" />
|
||
<Container>
|
||
<div className="flex flex-col items-center text-center max-w-4xl mx-auto">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5 }}
|
||
>
|
||
<Badge className="mb-4 bg-blue-100 text-blue-700 border-blue-200">
|
||
Бъдещето на хидратацията
|
||
</Badge>
|
||
<Heading as="h1" className="text-5xl md:text-7xl font-bold tracking-tight text-slate-900 mb-6">
|
||
Жива вода за <span className="text-blue-600">твоето здраве</span>
|
||
</Heading>
|
||
<Subheading className="text-xl text-slate-600 mb-10 max-w-2xl mx-auto">
|
||
Открийте силата на водородната вода. Подобрете енергията си, забавете стареенето и оптимизирайте възстановяването си с най-мощния антиоксидант в природата.
|
||
</Subheading>
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||
<Button size="lg" className="bg-blue-600 hover:bg-blue-700 text-white px-8 h-14 text-lg rounded-full">
|
||
Купи Сега
|
||
</Button>
|
||
<Button size="lg" variant="outline" className="px-8 h-14 text-lg rounded-full border-blue-200 text-blue-700 hover:bg-blue-50">
|
||
Научи Повече
|
||
</Button>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</Container>
|
||
|
||
{/* Decorative elements */}
|
||
<div className="absolute top-1/2 left-0 -translate-y-1/2 w-64 h-64 bg-blue-200 rounded-full blur-3xl opacity-20 -z-10" />
|
||
<div className="absolute bottom-0 right-0 w-96 h-96 bg-blue-300 rounded-full blur-3xl opacity-10 -z-10" />
|
||
</section>
|
||
);
|
||
}
|