Changes

Co-authored-by: yusuf-intern <248833874+yusuf-intern@users.noreply.github.com>

src/routes/projects.tsx

@@ -0,0 +1,48 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { PageHero, Section, CTA } from "@/components/page-shell";
+
+export const Route = createFileRoute("/projects")({
+  head: () => ({
+    meta: [
+      { title: "Projects — Promist Misting Installations" },
+      { name: "description", content: "A selection of misting system installations delivered by Promist across the region." },
+      { property: "og:title", content: "Projects" },
+      { property: "og:description", content: "Recent Promist misting installations." },
+    ],
+  }),
+  component: Projects,
+});
+
+const IMGS = [
+  "https://promistcool.com/wp-content/uploads/2017/04/banner4.jpg",
+  "https://promistcool.com/wp-content/uploads/2017/04/banner2.jpg",
+  "https://promistcool.com/wp-content/uploads/2017/04/banner3.jpg",
+  "https://promistcool.com/wp-content/uploads/2020/04/banner-sanitz.jpg",
+  "https://promistcool.com/wp-content/uploads/2017/04/new-banner.jpg",
+  "https://promistcool.com/wp-content/uploads/2016/03/commercial-misting.jpg",
+  "https://promistcool.com/wp-content/uploads/2016/03/industrial-misting.jpg",
+  "https://promistcool.com/wp-content/uploads/2016/03/humidification-misting.jpg",
+];
+
+function Projects() {
+  return (
+    <>
+      <PageHero
+        eyebrow="Projects"
+        title="Selected installations."
+        lede="A cross-section of Promist deployments — residential, commercial and industrial."
+      />
+      <Section>
+        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-1">
+          {IMGS.map((src, i) => (
+            <a key={src} href={src} className="group relative overflow-hidden aspect-square">
+              <img src={src} alt={`Promist project ${i + 1}`} className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" />
+              <div className="absolute inset-0 bg-brand-red/0 group-hover:bg-brand-red/30 transition-colors" />
+            </a>
+          ))}
+        </div>
+      </Section>
+      <CTA />
+    </>
+  );
+}