diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts
index 20a48e5..d204c26 100644
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -57,13 +57,3 @@ const rootRouteChildren: RootRouteChildren = {
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)
   ._addFileTypes<FileRouteTypes>()
-
-import type { getRouter } from './router.tsx'
-import type { startInstance } from './start.ts'
-declare module '@tanstack/react-start' {
-  interface Register {
-    ssr: true
-    router: Awaited<ReturnType<typeof getRouter>>
-    config: Awaited<ReturnType<typeof startInstance.getOptions>>
-  }
-}
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index 8d8bdc2..362845c 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -7,28 +7,158 @@ import {
   HeadContent,
   Scripts,
 } from "@tanstack/react-router";
-import { useEffect, type ReactNode } from "react";
+import { useEffect, useState, type ReactNode } from "react";
+import { Menu, X, Phone } from "lucide-react";
 
 import appCss from "../styles.css?url";
 import { reportLovableError } from "../lib/lovable-error-reporting";
 
+const NAV = [
+  { to: "/", label: "Home" },
+  { to: "/about", label: "About" },
+  { to: "/applications", label: "Applications" },
+  { to: "/products", label: "Products" },
+  { to: "/solutions", label: "Solutions" },
+  { to: "/projects", label: "Projects" },
+  { to: "/enquiry", label: "Enquiry" },
+  { to: "/contact", label: "Contact" },
+  { to: "/rental", label: "Rental" },
+] as const;
+
+function TopBar() {
+  return (
+    <div className="w-full bg-brand-red text-white text-sm">
+      <div className="container-page flex flex-wrap items-center justify-end gap-6 py-2">
+        <a href="tel:+97142515596" className="inline-flex items-center gap-2 hover:opacity-80">
+          <Phone className="h-3.5 w-3.5" /> +971 4 251 5596
+        </a>
+        <a href="tel:+971552098628" className="inline-flex items-center gap-2 hover:opacity-80">
+          <Phone className="h-3.5 w-3.5" /> +971 55 209 8628
+        </a>
+      </div>
+    </div>
+  );
+}
+
+function Header() {
+  const [open, setOpen] = useState(false);
+  return (
+    <header className="sticky top-0 z-50 bg-background/95 backdrop-blur border-b">
+      <div className="container-page flex items-center justify-between h-20">
+        <Link to="/" className="flex items-baseline gap-1 font-display">
+          <span className="text-3xl font-black tracking-tight">
+            <span className="text-brand-blue">Pro</span>
+            <span className="text-brand-red">mist</span>
+          </span>
+          <span className="text-xs uppercase tracking-[0.2em] text-muted-foreground hidden sm:inline">
+            Misting Systems
+          </span>
+        </Link>
+        <nav className="hidden lg:flex items-center gap-7 text-sm font-medium">
+          {NAV.map((n) => (
+            <Link
+              key={n.to}
+              to={n.to}
+              className="text-foreground/80 hover:text-brand-red transition-colors"
+              activeProps={{ className: "text-brand-red" }}
+              activeOptions={{ exact: n.to === "/" }}
+            >
+              {n.label}
+            </Link>
+          ))}
+        </nav>
+        <button
+          onClick={() => setOpen((v) => !v)}
+          className="lg:hidden inline-flex items-center justify-center h-10 w-10 rounded-md border"
+          aria-label="Toggle menu"
+        >
+          {open ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+        </button>
+      </div>
+      {open && (
+        <div className="lg:hidden border-t">
+          <div className="container-page py-4 flex flex-col gap-3">
+            {NAV.map((n) => (
+              <Link
+                key={n.to}
+                to={n.to}
+                onClick={() => setOpen(false)}
+                className="text-foreground/80 hover:text-brand-red"
+                activeProps={{ className: "text-brand-red" }}
+                activeOptions={{ exact: n.to === "/" }}
+              >
+                {n.label}
+              </Link>
+            ))}
+          </div>
+        </div>
+      )}
+    </header>
+  );
+}
+
+function Footer() {
+  return (
+    <footer className="mt-24 border-t bg-muted/40">
+      <div className="container-page py-14 grid gap-10 md:grid-cols-4">
+        <div>
+          <div className="font-display text-2xl font-black">
+            <span className="text-brand-blue">Pro</span>
+            <span className="text-brand-red">mist</span>
+          </div>
+          <p className="mt-3 text-sm text-muted-foreground max-w-xs">
+            High-pressure misting systems for cooling, humidification and dust suppression since 1979.
+          </p>
+        </div>
+        <div>
+          <h4 className="text-xs uppercase tracking-widest text-brand-red font-semibold">Explore</h4>
+          <ul className="mt-4 space-y-2 text-sm">
+            {NAV.slice(1, 6).map((n) => (
+              <li key={n.to}>
+                <Link to={n.to} className="hover:text-brand-red">{n.label}</Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+        <div>
+          <h4 className="text-xs uppercase tracking-widest text-brand-red font-semibold">Company</h4>
+          <ul className="mt-4 space-y-2 text-sm">
+            <li><Link to="/enquiry" className="hover:text-brand-red">Enquiry</Link></li>
+            <li><Link to="/contact" className="hover:text-brand-red">Contact</Link></li>
+            <li><Link to="/rental" className="hover:text-brand-red">Rental</Link></li>
+          </ul>
+        </div>
+        <div>
+          <h4 className="text-xs uppercase tracking-widest text-brand-red font-semibold">Contact</h4>
+          <ul className="mt-4 space-y-2 text-sm text-muted-foreground">
+            <li>+971 4 251 5596</li>
+            <li>+971 55 209 8628</li>
+            <li>Dubai, United Arab Emirates</li>
+          </ul>
+        </div>
+      </div>
+      <div className="border-t">
+        <div className="container-page py-5 text-xs text-muted-foreground flex flex-wrap justify-between gap-2">
+          <span>© {new Date().getFullYear()} Promist Misting Systems. All rights reserved.</span>
+          <span>Humidity and Control</span>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
 function NotFoundComponent() {
   return (
-    <div className="flex min-h-screen items-center justify-center bg-background px-4">
+    <div className="flex min-h-[70vh] items-center justify-center px-4">
       <div className="max-w-md text-center">
-        <h1 className="text-7xl font-bold text-foreground">404</h1>
-        <h2 className="mt-4 text-xl font-semibold text-foreground">Page not found</h2>
+        <h1 className="text-7xl font-black text-brand-red">404</h1>
+        <h2 className="mt-4 text-xl font-semibold">Page not found</h2>
         <p className="mt-2 text-sm text-muted-foreground">
           The page you're looking for doesn't exist or has been moved.
         </p>
-        <div className="mt-6">
-          <Link
-            to="/"
-            className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
-          >
-            Go home
-          </Link>
-        </div>
+        <Link to="/" className="mt-6 inline-flex rounded-md bg-brand-red text-white px-5 py-2.5 text-sm font-medium hover:opacity-90">
+          Go home
+        </Link>
       </div>
     </div>
   );
@@ -40,32 +170,17 @@ function ErrorComponent({ error, reset }: { error: Error; reset: () => void }) {
   useEffect(() => {
     reportLovableError(error, { boundary: "tanstack_root_error_component" });
   }, [error]);
-
   return (
-    <div className="flex min-h-screen items-center justify-center bg-background px-4">
+    <div className="flex min-h-[70vh] items-center justify-center px-4">
       <div className="max-w-md text-center">
-        <h1 className="text-xl font-semibold tracking-tight text-foreground">
-          This page didn't load
-        </h1>
-        <p className="mt-2 text-sm text-muted-foreground">
-          Something went wrong on our end. You can try refreshing or head back home.
-        </p>
-        <div className="mt-6 flex flex-wrap justify-center gap-2">
+        <h1 className="text-xl font-semibold">This page didn't load</h1>
+        <p className="mt-2 text-sm text-muted-foreground">Something went wrong. Try again or head home.</p>
+        <div className="mt-6 flex justify-center gap-2">
           <button
-            onClick={() => {
-              router.invalidate();
-              reset();
-            }}
-            className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
-          >
-            Try again
-          </button>
-          <a
-            href="/"
-            className="inline-flex items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-accent"
-          >
-            Go home
-          </a>
+            onClick={() => { router.invalidate(); reset(); }}
+            className="rounded-md bg-brand-red text-white px-4 py-2 text-sm font-medium"
+          >Try again</button>
+          <a href="/" className="rounded-md border px-4 py-2 text-sm font-medium">Go home</a>
         </div>
       </div>
     </div>
@@ -77,21 +192,19 @@ export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()(
     meta: [
       { charSet: "utf-8" },
       { name: "viewport", content: "width=device-width, initial-scale=1" },
-      { title: "Lovable App" },
-      { name: "description", content: "Lovable Generated Project" },
-      { name: "author", content: "Lovable" },
-      { property: "og:title", content: "Lovable App" },
-      { property: "og:description", content: "Lovable Generated Project" },
+      { title: "Promist Misting Systems — Humidity and Control" },
+      { name: "description", content: "High-pressure misting systems for outdoor cooling, humidification, dust suppression and sanitization in the UAE since 1979." },
+      { property: "og:title", content: "Promist Misting Systems" },
+      { property: "og:description", content: "High-pressure misting for cooling, humidification and dust suppression." },
       { property: "og:type", content: "website" },
       { name: "twitter:card", content: "summary_large_image" },
-      { name: "twitter:site", content: "@Lovable" },
     ],
     links: [
-      {
-        rel: "stylesheet",
-        href: appCss,
-      },
+      { rel: "stylesheet", href: appCss },
       { rel: "icon", href: "/favicon.ico", type: "image/x-icon" },
+      { rel: "preconnect", href: "https://fonts.googleapis.com" },
+      { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" },
+      { rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700;800;900&display=swap" },
     ],
   }),
   shellComponent: RootShell,
@@ -103,24 +216,22 @@ export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()(
 function RootShell({ children }: { children: ReactNode }) {
   return (
     <html lang="en">
-      <head>
-        <HeadContent />
-      </head>
-      <body>
-        {children}
-        <Scripts />
-      </body>
+      <head><HeadContent /></head>
+      <body>{children}<Scripts /></body>
     </html>
   );
 }
 
 function RootComponent() {
   const { queryClient } = Route.useRouteContext();
-
   return (
     <QueryClientProvider client={queryClient}>
-      {/* Required: nested routes render here. Removing <Outlet /> breaks all child routes. */}
-      <Outlet />
+      <TopBar />
+      <Header />
+      <main>
+        <Outlet />
+      </main>
+      <Footer />
     </QueryClientProvider>
   );
 }
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index bcc1ab7..958e31c 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,24 +1,270 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { ArrowUpRight, Droplets, Wind, Factory, Sparkles, Gauge, ShieldCheck } from "lucide-react";
 
-// No head() here: the home route inherits title/description/og/twitter from
-// __root.tsx, and ships no og:image so serve-time hosting can inject the
-// project's social preview (explicit og:image or latest screenshot).
 export const Route = createFileRoute("/")({
-  component: Index,
+  head: () => ({
+    meta: [
+      { title: "Promist — High-Pressure Misting for Cooling & Humidity" },
+      { name: "description", content: "Turnkey misting systems for outdoor cooling, humidification, dust suppression, sanitization and special effects. Manufactured in the UAE since 1979." },
+      { property: "og:title", content: "Promist — Humidity and Control" },
+      { property: "og:description", content: "Misting systems for cooling, humidification and dust suppression." },
+    ],
+  }),
+  component: Home,
 });
 
-// IMPORTANT: Replace this placeholder. See ./README.md for routing conventions.
-function Index() {
+const IMG = {
+  nozzle: "https://promistcool.com/wp-content/uploads/2020/04/banner-sanitz.jpg",
+  booth: "https://promistcool.com/wp-content/uploads/2020/04/image-002.png",
+  humid: "https://promistcool.com/wp-content/uploads/2016/03/humidification-misting.jpg",
+  commercial: "https://promistcool.com/wp-content/uploads/2016/03/commercial-misting.jpg",
+  industrial: "https://promistcool.com/wp-content/uploads/2016/03/industrial-misting.jpg",
+  project1: "https://promistcool.com/wp-content/uploads/2017/04/banner4.jpg",
+  project2: "https://promistcool.com/wp-content/uploads/2017/04/banner2.jpg",
+  project3: "https://promistcool.com/wp-content/uploads/2017/04/banner3.jpg",
+  banner: "https://promistcool.com/wp-content/uploads/2017/04/new-banner.jpg",
+};
+
+function Home() {
   return (
-    <div
-      className="flex min-h-screen items-center justify-center"
-      style={{ backgroundColor: "#fcfbf8" }}
-    >
-      <img
-        data-lovable-blank-page-placeholder="REMOVE_THIS"
-        src="https://cdn.gpteng.co/blank-app-v1.svg"
-        alt="Your app will live here!"
-      />
-    </div>
+    <>
+      {/* HERO */}
+      <section className="relative overflow-hidden border-b">
+        <div className="container-page grid lg:grid-cols-12 gap-10 py-16 lg:py-24 items-center">
+          <div className="lg:col-span-6">
+            <div className="inline-flex items-center gap-2 text-xs uppercase tracking-[0.25em] text-brand-blue font-semibold">
+              <span className="rule-blue" /> Since 1979
+            </div>
+            <h1 className="mt-6 font-display text-5xl md:text-7xl font-black leading-[0.95]">
+              Humidity
+              <br />
+              <span className="text-brand-blue">and</span>{" "}
+              <span className="text-brand-red italic">Control.</span>
+            </h1>
+            <p className="mt-6 text-lg text-muted-foreground max-w-xl">
+              We engineer high-pressure misting systems that cool, humidify, suppress dust and sanitize —
+              from residential patios to industrial factories across the region.
+            </p>
+            <div className="mt-8 flex flex-wrap gap-3">
+              <Link to="/enquiry" className="inline-flex items-center gap-2 bg-brand-red text-white px-6 py-3.5 rounded-md text-sm font-semibold hover:opacity-90">
+                Request a quote <ArrowUpRight className="h-4 w-4" />
+              </Link>
+              <Link to="/products" className="inline-flex items-center gap-2 border border-foreground/20 px-6 py-3.5 rounded-md text-sm font-semibold hover:border-brand-blue hover:text-brand-blue">
+                Explore products
+              </Link>
+            </div>
+            <dl className="mt-12 grid grid-cols-3 gap-6 max-w-lg">
+              {[
+                ["45+", "Years of expertise"],
+                ["1000+", "Projects delivered"],
+                ["70 bar", "High-pressure precision"],
+              ].map(([k, v]) => (
+                <div key={k}>
+                  <dt className="font-display text-3xl font-black text-brand-red">{k}</dt>
+                  <dd className="text-xs uppercase tracking-wider text-muted-foreground mt-1">{v}</dd>
+                </div>
+              ))}
+            </dl>
+          </div>
+          <div className="lg:col-span-6">
+            <div className="relative">
+              <div className="absolute -inset-4 bg-gradient-to-br from-brand-blue/10 to-brand-red/10 blur-2xl" />
+              <img src={IMG.nozzle} alt="Promist misting nozzle" className="relative w-full h-[520px] object-cover" />
+              <div className="absolute bottom-0 left-0 right-0 bg-background/90 backdrop-blur border-t border-l border-r px-6 py-4 flex items-center justify-between">
+                <div>
+                  <div className="text-xs uppercase tracking-widest text-muted-foreground">Featured</div>
+                  <div className="font-display text-xl font-bold">Sanitization Booth</div>
+                </div>
+                <Link to="/products" className="text-sm font-semibold text-brand-red inline-flex items-center gap-1">
+                  View <ArrowUpRight className="h-4 w-4" />
+                </Link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* APPLICATIONS */}
+      <section className="py-24">
+        <div className="container-page">
+          <div className="flex flex-wrap items-end justify-between gap-6 mb-14">
+            <div>
+              <span className="rule-red" />
+              <h2 className="mt-4 font-display text-4xl md:text-5xl font-black">Applications</h2>
+              <p className="mt-4 max-w-2xl text-muted-foreground">
+                A cost-effective solution for outdoor cooling and humidification across industrial, commercial,
+                residential, warehouses, greenhouses, gardens, patios, parks and amusement areas.
+              </p>
+            </div>
+            <Link to="/applications" className="text-sm font-semibold text-brand-blue inline-flex items-center gap-1">
+              All applications <ArrowUpRight className="h-4 w-4" />
+            </Link>
+          </div>
+
+          <div className="grid md:grid-cols-3 divide-y md:divide-y-0 md:divide-x border-y">
+            {[
+              { img: IMG.humid, title: "Humidification", desc: "Commercial and industrial environments where controlled humidity or temperature drive profitability.", icon: Droplets },
+              { img: IMG.commercial, title: "Commercial Outdoor Cooling", desc: "Reclaim patio dining and outdoor bars once temperatures push past 45°C.", icon: Wind },
+              { img: IMG.industrial, title: "Industrial Cooling", desc: "A safer, more productive floor — cooling employees, equipment and processes.", icon: Factory },
+            ].map((a) => (
+              <article key={a.title} className="p-8 group">
+                <div className="aspect-[4/3] overflow-hidden">
+                  <img src={a.img} alt={a.title} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" />
+                </div>
+                <div className="mt-6 flex items-center gap-3">
+                  <a.icon className="h-5 w-5 text-brand-red" />
+                  <h3 className="font-display text-xl font-bold">{a.title}</h3>
+                </div>
+                <p className="mt-3 text-sm text-muted-foreground">{a.desc}</p>
+                <Link to="/applications" className="mt-5 inline-flex items-center gap-1 text-sm font-semibold text-brand-red">
+                  Details <ArrowUpRight className="h-4 w-4" />
+                </Link>
+              </article>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* SANITIZATION BOOTH FEATURE */}
+      <section className="bg-muted/40 py-24 border-y">
+        <div className="container-page grid lg:grid-cols-2 gap-14 items-center">
+          <div>
+            <span className="rule-blue" />
+            <h2 className="mt-4 font-display text-4xl md:text-5xl font-black">Sanitization Booth</h2>
+            <p className="mt-4 text-muted-foreground max-w-lg">
+              A turnkey solution for your disinfectant needs — engineered for continuous public use.
+            </p>
+            <ul className="mt-8 grid sm:grid-cols-2 gap-x-8 gap-y-4 text-sm">
+              {[
+                "Transparent plastic cover with aluminium structure",
+                "Electric control panel",
+                "Optimised water consumption",
+                "Reflective sensor",
+                "12-month warranty from installation",
+                "234 × 110 × 238 cm",
+              ].map((f) => (
+                <li key={f} className="flex gap-3 border-b border-dashed pb-3">
+                  <span className="text-brand-red font-black">/</span>
+                  <span>{f}</span>
+                </li>
+              ))}
+            </ul>
+            <Link to="/products" className="mt-8 inline-flex items-center gap-2 bg-brand-blue text-white px-6 py-3 rounded-md text-sm font-semibold hover:opacity-90">
+              View details <ArrowUpRight className="h-4 w-4" />
+            </Link>
+          </div>
+          <div>
+            <img src={IMG.booth} alt="Sanitization Booth" className="w-full max-h-[560px] object-contain" />
+          </div>
+        </div>
+      </section>
+
+      {/* 5 REASONS */}
+      <section className="py-24">
+        <div className="container-page">
+          <div className="max-w-2xl">
+            <span className="rule-red" />
+            <h2 className="mt-4 font-display text-4xl md:text-5xl font-black">
+              Five great reasons <span className="text-brand-blue">to choose us</span>
+            </h2>
+          </div>
+          <ol className="mt-14 grid md:grid-cols-5 gap-0 border-t">
+            {[
+              "Best product quality",
+              "100% customer satisfaction",
+              "Comprehensive range of services",
+              "Always available for you",
+              "Services guarantee",
+            ].map((r, i) => (
+              <li key={r} className="border-b md:border-b-0 md:border-r last:md:border-r-0 p-8">
+                <div className="font-display text-5xl font-black text-brand-red/20">
+                  0{i + 1}
+                </div>
+                <div className="mt-4 font-display text-lg font-bold leading-snug">{r}</div>
+              </li>
+            ))}
+          </ol>
+        </div>
+      </section>
+
+      {/* FULL SERVICES */}
+      <section className="bg-foreground text-background py-24">
+        <div className="container-page">
+          <div className="grid lg:grid-cols-12 gap-10 items-start">
+            <div className="lg:col-span-4">
+              <span className="rule-blue" />
+              <h2 className="mt-4 font-display text-4xl md:text-5xl font-black">
+                Promist is a<br />full-service<br />
+                <span className="text-brand-red italic">misting technology</span>
+              </h2>
+              <p className="mt-6 text-background/70 max-w-sm">
+                By forcing water through specially designed nozzles at high pressure, we create an ultra-fine
+                mist — the science behind every one of our systems.
+              </p>
+            </div>
+            <div className="lg:col-span-8 grid sm:grid-cols-2 gap-x-10 gap-y-10">
+              {[
+                { i: Droplets, t: "Humidification", d: "The most efficient way to keep the right humidity levels for food, materials and processes." },
+                { i: Sparkles, t: "Special effects", d: "Elevate landscapes, pools, events, expos, amusement parks and sports events." },
+                { i: Gauge, t: "Cooling principle", d: "Billions of tiny droplets evaporate into vapor — the phase change cools the surrounding air." },
+                { i: ShieldCheck, t: "Dust suppression", d: "Extremely effective solutions for airborne dust suppression and air filtration." },
+              ].map((s) => (
+                <div key={s.t} className="border-t border-background/20 pt-6">
+                  <s.i className="h-6 w-6 text-brand-red" />
+                  <h3 className="mt-4 font-display text-2xl font-bold">{s.t}</h3>
+                  <p className="mt-2 text-background/70 text-sm">{s.d}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* PROJECTS */}
+      <section className="py-24">
+        <div className="container-page">
+          <div className="flex flex-wrap items-end justify-between gap-6 mb-12">
+            <div>
+              <span className="rule-red" />
+              <h2 className="mt-4 font-display text-4xl md:text-5xl font-black">Recent projects</h2>
+            </div>
+            <Link to="/projects" className="text-sm font-semibold text-brand-blue inline-flex items-center gap-1">
+              View more <ArrowUpRight className="h-4 w-4" />
+            </Link>
+          </div>
+          <div className="grid md:grid-cols-3 gap-1">
+            {[IMG.project1, IMG.project2, IMG.project3].map((src, i) => (
+              <a key={src} href={src} className="group relative overflow-hidden aspect-[4/5]">
+                <img src={src} alt={`Project ${i + 1}`} className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" />
+                <div className="absolute inset-0 bg-gradient-to-t from-brand-red/70 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
+                <div className="absolute bottom-0 left-0 p-6 text-white translate-y-4 group-hover:translate-y-0 opacity-0 group-hover:opacity-100 transition-all">
+                  <div className="text-xs uppercase tracking-widest">Case study</div>
+                  <div className="font-display text-2xl font-bold">Project 0{i + 1}</div>
+                </div>
+              </a>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* CONTACT BAND */}
+      <section className="relative overflow-hidden">
+        <img src={IMG.banner} alt="" className="absolute inset-0 w-full h-full object-cover" />
+        <div className="absolute inset-0 bg-brand-blue-dark/80" />
+        <div className="container-page relative py-20 grid md:grid-cols-2 gap-8 items-center text-white">
+          <div>
+            <span className="rule-red" />
+            <h2 className="mt-4 font-display text-4xl md:text-5xl font-black">
+              Questions? <br />Call now: <span className="text-white/90">+971 4 251 5596</span>
+            </h2>
+          </div>
+          <div className="flex md:justify-end">
+            <Link to="/enquiry" className="inline-flex items-center gap-2 bg-brand-red text-white px-8 py-4 rounded-md text-sm font-semibold hover:opacity-90">
+              Request a quote <ArrowUpRight className="h-4 w-4" />
+            </Link>
+          </div>
+        </div>
+      </section>
+    </>
   );
 }