56 lines
2.8 KiB
TypeScript
56 lines
2.8 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 { AlertTriangle, ShieldCheck, Camera } from "lucide-react";
|
|
import { useLanguage } from "@/context/language-provider";
|
|
import Image from "next/image";
|
|
|
|
export function Hero() {
|
|
const { t, language } = useLanguage();
|
|
|
|
return (
|
|
<section className="relative pt-20 pb-16 md:pt-32 md:pb-24 overflow-hidden">
|
|
<Container>
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
|
<div className="flex flex-col items-center lg:items-start text-center lg:text-left max-w-2xl mx-auto lg:mx-0">
|
|
<Badge className="mb-4 bg-red-100 text-red-700 border-red-200">
|
|
<AlertTriangle className="w-3 h-3 mr-1" /> {t("hero_badge")}
|
|
</Badge>
|
|
<Heading as="h1" className="text-4xl md:text-6xl font-bold tracking-tight mb-6">
|
|
{t("hero_title_1")} <span className="text-red-600">{t("hero_title_2")}</span>
|
|
</Heading>
|
|
<Subheading className="text-lg md:text-xl text-neutral-600 mb-10 max-w-2xl">
|
|
{t("hero_sub")}
|
|
</Subheading>
|
|
<div className="flex flex-col sm:flex-row gap-4 w-full sm:w-auto">
|
|
<Button size="lg" className="bg-red-600 hover:bg-red-700 text-white px-8 h-12 text-lg" onClick={() => document.getElementById('report')?.scrollIntoView({ behavior: 'smooth' })}>
|
|
<Camera className="w-5 h-5 mr-2" /> {t("report_now")}
|
|
</Button>
|
|
<Button size="lg" variant="outline" className="px-8 h-12 text-lg">
|
|
<ShieldCheck className="w-5 h-5 mr-2" /> {t("how_it_works")}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className="relative aspect-video lg:aspect-square rounded-2xl overflow-hidden shadow-2xl border-4 border-white">
|
|
<Image
|
|
src="https://images.unsplash.com/photo-1689471335701-904874c90bbf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyOTY1MDl8MHwxfHNlYXJjaHwxfHxlbWVyZ2VuY3klMjByZXNwb25zZSUyMGFjY2lkZW50JTIwcmVwb3J0aW5nJTIwc2FmZXR5fGVufDB8fHx8MTc2ODU4MjM0NXww&ixlib=rb-4.1.0&q=80&w=1080"
|
|
alt="Emergency Response"
|
|
fill
|
|
className="object-cover"
|
|
priority
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
|
|
{/* Background Decoration */}
|
|
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full -z-10 opacity-10 pointer-events-none">
|
|
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-[1000px] h-[600px] bg-gradient-to-b from-red-500 to-transparent rounded-full blur-3xl" />
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|