Update components/hero.tsx

components/hero.tsx

@@ -0,0 +1,55 @@
+"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>
+  );
+}