tenext redesign

app/case-studies/page.tsx

@@ -0,0 +1,59 @@
+import { Navbar } from "@/components/sections/Navbar";
+import { PageTitleBanner } from "@/components/shared/PageTitleBanner";
+import { SectionContainer } from "@/components/shared/SectionContainer";
+import { PageContainer } from "@/components/shared/PageContainer";
+import { SectionHeading } from "@/components/shared/SectionHeading";
+import { RevealOnView } from "@/components/shared/RevealOnView";
+import { PreFooterCTA } from "@/components/shared/PreFooterCTA";
+import { caseStudies } from "@/data/site-pages";
+
+export const metadata = {
+  title: "Case Studies",
+  description:
+    "How Tenext helps enterprises transform — representative engagements across retail, financial services, and manufacturing.",
+};
+
+export default function CaseStudiesPage() {
+  return (
+    <>
+      <Navbar />
+      <main className="bg-white">
+        <PageTitleBanner
+          title="Case Studies"
+          breadcrumbs={[{ label: "Home", href: "/" }, { label: "Case Studies" }]}
+        />
+        <SectionContainer paddingY="lg" className="px-[20px]">
+          <PageContainer>
+            <SectionHeading
+              tag="[ our work ]"
+              title="How we deliver across industries"
+              description="Named client case studies will be published here as they are approved. In the meantime, here is how Tenext approaches engagements in the industries it serves."
+              titleClassName="text-tenext-dark max-w-[720px]"
+              descriptionClassName="max-w-[620px]"
+              className="mb-[50px]"
+            />
+
+            <div className="grid grid-cols-1 gap-[20px] md:grid-cols-2 lg:grid-cols-3">
+              {caseStudies.map((item, index) => (
+                <RevealOnView key={item.id} delay={index * 90}>
+                  <article className="flex h-full flex-col gap-[15px] rounded-[25px] border border-tenext-card-border p-[40px] transition-transform duration-300 hover:-translate-y-2">
+                    <span className="tenext-subheading text-tenext-teal" style={{ fontFamily: "var(--font-sora)" }}>
+                      {item.industry}
+                    </span>
+                    <h3 className="font-[var(--font-sora)] text-[22px] font-bold leading-[1.3] text-tenext-dark">
+                      {item.title}
+                    </h3>
+                    <p className="text-[16px] leading-[1.7] text-tenext-text-muted">
+                      {item.description}
+                    </p>
+                  </article>
+                </RevealOnView>
+              ))}
+            </div>
+          </PageContainer>
+        </SectionContainer>
+        <PreFooterCTA />
+      </main>
+    </>
+  );
+}