Update components/report-form.tsx

components/report-form.tsx

@@ -0,0 +1,100 @@
+"use client";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Subheading } from "@/components/subheading";
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
+import { KleapForm, KleapFormField } from "@/components/kleap-form";
+import { useLanguage } from "@/context/language-provider";
+import Image from "next/image";
+
+export function ReportForm() {
+  const { t } = useLanguage();
+
+  const fields: KleapFormField[] = [
+    {
+      name: "incident_type",
+      label: t("incident_type"),
+      type: "select",
+      required: true,
+      options: [
+        t("car_accident"),
+        t("train_accident"),
+        t("crime"),
+        t("violent_crime"),
+        t("emergency"),
+        t("other"),
+      ],
+    },
+    {
+      name: "location",
+      label: t("location"),
+      type: "text",
+      placeholder: t("placeholder_location"),
+      required: true,
+    },
+    {
+      name: "description",
+      label: t("description"),
+      type: "textarea",
+      placeholder: t("placeholder_description"),
+      required: true,
+    },
+    {
+      name: "contact_info",
+      label: t("contact_info"),
+      type: "text",
+      placeholder: t("placeholder_contact"),
+    },
+  ];
+
+  return (
+    <section id="report" className="py-20 bg-neutral-50">
+      <Container>
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
+          <div className="order-2 lg:order-1">
+            <div className="mb-8">
+              <Heading className="mb-4">{t("submit_report")}</Heading>
+              <Subheading className="text-lg font-medium text-red-600 mb-4">
+                {t("hero_title_1")} {t("hero_title_2")}
+              </Subheading>
+              <Subheading>{t("anonymous_note")}</Subheading>
+            </div>
+            <Card className="border-2 border-red-100">
+              <CardHeader>
+                <CardTitle>{t("incident_details")}</CardTitle>
+                <CardDescription>
+                  {t("accuracy_note")}
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <KleapForm 
+                  formId="incident-report" 
+                  title={t("incident_details")} 
+                  fields={fields} 
+                />
+              </CardContent>
+            </Card>
+          </div>
+          <div className="order-1 lg:order-2 space-y-6">
+            <div className="relative aspect-[4/3] rounded-2xl overflow-hidden shadow-lg">
+              <Image 
+                src="https://images.unsplash.com/photo-1607264469190-4abbbd14f5ab?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyOTY1MDl8MHwxfHNlYXJjaHwzfHxlbWVyZ2VuY3klMjByZXNwb25zZSUyMGFjY2lkZW50JTIwcmVwb3J0aW5nJTIwc2FmZXR5fGVufDB8fHx8MTc2ODU4MjM0NXww&ixlib=rb-4.1.0&q=80&w=1080"
+                alt="Ambulance Emergency"
+                fill
+                className="object-cover"
+              />
+            </div>
+            <div className="relative aspect-[4/3] rounded-2xl overflow-hidden shadow-lg">
+              <Image 
+                src="https://images.unsplash.com/photo-1713111392302-6b70d996a639?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyOTY1MDl8MHwxfHNlYXJjaHwyfHxlbWVyZ2VuY3klMjByZXNwb25zZSUyMGFjY2lkZW50JTIwcmVwb3J0aW5nJTIwc2FmZXR5fGVufDB8fHx8MTc2ODU4MjM0NXww&ixlib=rb-4.1.0&q=80&w=1080"
+                alt="Fire Truck Response"
+                fill
+                className="object-cover"
+              />
+            </div>
+          </div>
+        </div>
+      </Container>
+    </section>
+  );
+}