From b28d936b54401e4782320275afa7b6f05d2c57ae Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Tue, 21 Jul 2026 17:14:45 +0000
Subject: [PATCH] Changes

Co-authored-by: yusuf-intern <248833874+yusuf-intern@users.noreply.github.com>
---
 src/components/page-shell.tsx | 52 +++++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 src/components/page-shell.tsx

diff --git a/src/components/page-shell.tsx b/src/components/page-shell.tsx
new file mode 100644
index 0000000..88972d3
--- /dev/null
+++ b/src/components/page-shell.tsx
@@ -0,0 +1,52 @@
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { ArrowUpRight, type LucideIcon } from "lucide-react";
+
+export function PageHero({ eyebrow, title, lede }: { eyebrow: string; title: string; lede?: string }) {
+  return (
+    <section className="border-b">
+      <div className="container-page py-20">
+        <div className="text-xs uppercase tracking-[0.25em] text-brand-blue font-semibold">{eyebrow}</div>
+        <h1 className="mt-4 font-display text-5xl md:text-6xl font-black leading-[1]">
+          {title}
+        </h1>
+        {lede && <p className="mt-6 max-w-2xl text-lg text-muted-foreground">{lede}</p>}
+      </div>
+    </section>
+  );
+}
+
+export function Section({ children, className = "" }: { children: React.ReactNode; className?: string }) {
+  return <section className={`py-20 ${className}`}><div className="container-page">{children}</div></section>;
+}
+
+export function FeatureRow({ img, title, body, reverse, Icon }: { img: string; title: string; body: string; reverse?: boolean; Icon?: LucideIcon }) {
+  return (
+    <div className={`grid lg:grid-cols-2 gap-10 items-center ${reverse ? "lg:[&>*:first-child]:order-2" : ""}`}>
+      <img src={img} alt={title} className="w-full h-[380px] object-cover" />
+      <div>
+        {Icon && <Icon className="h-6 w-6 text-brand-red" />}
+        <h3 className="mt-4 font-display text-3xl font-black">{title}</h3>
+        <p className="mt-4 text-muted-foreground">{body}</p>
+      </div>
+    </div>
+  );
+}
+
+export function CTA() {
+  return (
+    <section className="bg-foreground text-background">
+      <div className="container-page py-16 flex flex-wrap items-center justify-between gap-6">
+        <div>
+          <div className="text-xs uppercase tracking-widest text-brand-red">Ready when you are</div>
+          <h3 className="mt-2 font-display text-3xl font-black">Let's design your misting system.</h3>
+        </div>
+        <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">
+          Request a quote <ArrowUpRight className="h-4 w-4" />
+        </Link>
+      </div>
+    </section>
+  );
+}
+
+// Dummy export so this file is treated as a module but not a route.
+export const Route = createFileRoute("/_shared")({ component: () => null });