Update components/incident-types.tsx

components/incident-types.tsx

@@ -0,0 +1,52 @@
+"use client";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Subheading } from "@/components/subheading";
+import { Card, CardContent } from "@/components/ui/card";
+import { 
+  Car, 
+  Train, 
+  ShieldAlert, 
+  Skull, 
+  Handshake, 
+  Zap, 
+  Siren,
+  Eye
+} from "lucide-react";
+
+const incidentTypes = [
+  { title: "Car Accidents", icon: <Car className="w-8 h-8 text-red-500" />, description: "Collisions, hit and runs, and road hazards." },
+  { title: "Train Accidents", icon: <Train className="w-8 h-8 text-red-500" />, description: "Derailments, crossing incidents, and delays." },
+  { title: "Crimes", icon: <ShieldAlert className="w-8 h-8 text-red-500" />, description: "Theft, vandalism, and suspicious activities." },
+  { title: "Violent Crimes", icon: <Skull className="w-8 h-8 text-red-500" />, description: "Assault, murder, and attempted murder reports." },
+  { title: "Robbery", icon: <Handshake className="w-8 h-8 text-red-500" />, description: "Armed assault and property theft incidents." },
+  { title: "Emergencies", icon: <Siren className="w-8 h-8 text-red-500" />, description: "Fires, medical emergencies, and natural disasters." },
+  { title: "Public Safety", icon: <Eye className="w-8 h-8 text-red-500" />, description: "Dangerous infrastructure and public hazards." },
+  { title: "Other Incidents", icon: <Zap className="w-8 h-8 text-red-500" />, description: "Any other incident requiring public awareness." },
+];
+
+export function IncidentTypes() {
+  return (
+    <section id="safety" className="py-20 bg-neutral-50">
+      <Container>
+        <div className="text-center mb-16">
+          <Heading className="mb-4">Supported Incident Types</Heading>
+          <Subheading>We provide documentation tools for a wide range of emergency and safety situations.</Subheading>
+        </div>
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+          {incidentTypes.map((type, index) => (
+            <Card key={index} className="border-none shadow-sm hover:shadow-md transition-shadow">
+              <CardContent className="pt-8 pb-6 flex flex-col items-center text-center">
+                <div className="mb-4 p-3 bg-white rounded-2xl shadow-sm">
+                  {type.icon}
+                </div>
+                <h3 className="font-bold text-lg mb-2">{type.title}</h3>
+                <p className="text-sm text-neutral-500">{type.description}</p>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </Container>
+    </section>
+  );
+}