done landing page

2025-11-10 17:10:34 +05:30
parent 3852d46661
commit 483515e163
105 changed files with 3529 additions and 104 deletions
--- a/app/use-cases/[slug]/page.tsx
+++ b/app/use-cases/[slug]/page.tsx
@@ -0,0 +1,83 @@
+import Image from "next/image";
+import { notFound } from "next/navigation";
+import { useCases } from "@/data/useCases";
+import Footer from "@/components/shared/Footer";
+import Navbar from "@/components/shared/Navbar";
+import MobileNavbar from "@/components/ui/mobile-navbar";
+import CTA from "@/sections/CTA";
+import HeroClient from "@/sections/HeroCase";
+
+interface Props {
+  params: Promise<{ slug: string }>; // ← Promise!
+}
+
+export default async function UseCaseDetail({ params }: Props) {
+  const { slug } = await params;
+  const item = useCases.find((c) => c.slug === slug);
+  if (!item) notFound();
+
+  return (
+    <>
+      <Navbar />
+      <MobileNavbar />
+      <HeroClient item={item} />
+      <section className="tab:py-16 tab:px-6 mx-auto max-w-5xl sm:px-2.5 sm:py-8">
+        <div className="space-y-12">
+          <div>
+            <h2 className="font-switzer mb-3 text-3xl font-semibold text-black">
+              Overview
+            </h2>
+            <p className="font-mium-reg text-b-2-17 leading-b2 tracking-[-0.4px] text-black">
+              {item.description}
+            </p>
+          </div>
+
+          <div>
+            <h2 className="font-switzer mb-3 text-3xl font-semibold text-black">
+              Challenge
+            </h2>
+            <p className="font-mium-reg text-b-2-17 leading-b2 tracking-[-0.4px] text-black">
+              {item.challenge}
+            </p>
+          </div>
+          <Image
+            src={item.image1}
+            alt={`${item.title} use case`}
+            width={600}
+            height={480}
+            className="mx-auto h-[480px] w-full rounded-xl object-cover"
+          />
+
+          <div>
+            <h2 className="font-switzer mb-3 text-3xl font-semibold text-black">
+              Our Solution
+            </h2>
+            <p className="font-mium-reg text-b-2-17 leading-b2 tracking-[-0.4px] text-black">
+              {item.solution}
+            </p>
+          </div>
+
+          <div>
+            <h2 className="font-switzer mb-3 text-3xl font-semibold text-black">
+              Impact
+            </h2>
+            <p className="font-mium-reg text-b-2-17 leading-b2 tracking-[-0.4px] text-black">
+              {item.outcome}
+            </p>
+          </div>
+          <Image
+            src={item.image2}
+            alt={`${item.title} use case`}
+            width={600}
+            height={480}
+            className="mx-auto h-[480px] w-full rounded-xl object-cover"
+          />
+        </div>
+      </section>
+      <div className="tab:mb-0 sm:mb-10">
+        <CTA />
+      </div>
+      <Footer />
+    </>
+  );
+}