Changes

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

src/components/page-shell.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute, Link } from "@tanstack/react-router";
+import { Link } from "@tanstack/react-router";
 import { ArrowUpRight, type LucideIcon } from "lucide-react";
 
 export function PageHero({ eyebrow, title, lede }: { eyebrow: string; title: string; lede?: string }) {
@@ -6,9 +6,7 @@ export function PageHero({ eyebrow, title, lede }: { eyebrow: string; title: str
     <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]">
+        <h1 className="mt-4 font-display text-5xl md:text-6xl font-black leading-[1]">{title}</h1>
-          {title}
-        </h1>
         {lede && <p className="mt-6 max-w-2xl text-lg text-muted-foreground">{lede}</p>}
       </div>
     </section>
@@ -26,7 +24,7 @@ export function FeatureRow({ img, title, body, reverse, Icon }: { img: string; t
       <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>
+        <p className="mt-4 text-muted-foreground whitespace-pre-line">{body}</p>
       </div>
     </div>
   );
@@ -47,6 +45,3 @@ export function CTA() {
     </section>
   );
 }
-
-// Dummy export so this file is treated as a module but not a route.
-export const Route = createFileRoute("/_shared")({ component: () => null });

src/routes/about.tsx

@@ -0,0 +1,56 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { PageHero, Section, CTA } from "@/components/page-shell";
+
+export const Route = createFileRoute("/about")({
+  head: () => ({
+    meta: [
+      { title: "About Promist — Misting Systems Since 1979" },
+      { name: "description", content: "Promist manufactures and sells high-quality misting systems and misting fans at factory-direct prices since 1979." },
+      { property: "og:title", content: "About Promist" },
+      { property: "og:description", content: "Misting systems and misting fans manufactured since 1979." },
+    ],
+  }),
+  component: About,
+});
+
+function About() {
+  return (
+    <>
+      <PageHero
+        eyebrow="About us"
+        title="Manufacturers of high-pressure misting since 1979."
+        lede="We design, build and install misting systems for cooling, humidification, dust suppression and sanitization — from residential patios to industrial factories."
+      />
+      <Section>
+        <div className="grid lg:grid-cols-3 gap-12">
+          <div className="lg:col-span-2 space-y-6 text-lg text-muted-foreground">
+            <p>
+              For more than four decades, Promist has been engineering high-pressure misting systems for the harshest climates in
+              the region. Our systems force water through specially designed nozzles, creating an ultra-fine mist that evaporates
+              instantly to cool the surrounding air.
+            </p>
+            <p>
+              We manufacture and sell at factory-direct prices, giving our customers full control over quality, delivery and cost.
+              From the smallest residential patio to full industrial deployments, every project is engineered from first principles.
+            </p>
+          </div>
+          <div className="border-l pl-8 space-y-6">
+            <div>
+              <div className="text-xs uppercase tracking-widest text-brand-red font-semibold">Mission</div>
+              <p className="mt-2">Deliver reliable humidity and cooling control, everywhere it's needed.</p>
+            </div>
+            <div>
+              <div className="text-xs uppercase tracking-widest text-brand-red font-semibold">Vision</div>
+              <p className="mt-2">To be the region's most trusted misting technology partner.</p>
+            </div>
+            <div>
+              <div className="text-xs uppercase tracking-widest text-brand-red font-semibold">Values</div>
+              <p className="mt-2">Craft, quality, and unwavering customer service.</p>
+            </div>
+          </div>
+        </div>
+      </Section>
+      <CTA />
+    </>
+  );
+}

src/routes/applications.tsx

@@ -0,0 +1,42 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { PageHero, Section, FeatureRow, CTA } from "@/components/page-shell";
+import { Droplets, Wind, Factory, Sparkles, TreePine, Warehouse } from "lucide-react";
+
+export const Route = createFileRoute("/applications")({
+  head: () => ({
+    meta: [
+      { title: "Applications — Promist Misting Systems" },
+      { name: "description", content: "Cost-effective misting solutions for industrial, commercial, residential, warehouses, greenhouses, gardens, patios and more." },
+      { property: "og:title", content: "Applications" },
+      { property: "og:description", content: "Misting applications across industrial, commercial and residential settings." },
+    ],
+  }),
+  component: Applications,
+});
+
+const APPS = [
+  { img: "https://promistcool.com/wp-content/uploads/2016/03/humidification-misting.jpg", title: "Humidification", body: "Commercial and industrial environments where controlling humidity or temperature provides enhanced profitability, product quality and process reliability.", Icon: Droplets },
+  { img: "https://promistcool.com/wp-content/uploads/2016/03/commercial-misting.jpg", title: "Commercial Outdoor Cooling", body: "When temperatures rise into the 45s and above, patio dining and outdoor bar areas become uninhabitable money losers. Misting brings them back to life.", Icon: Wind, reverse: true },
+  { img: "https://promistcool.com/wp-content/uploads/2016/03/industrial-misting.jpg", title: "Industrial Cooling", body: "Create a safer and more productive working environment. Cooling employees, equipment and processes across factories and warehouses.", Icon: Factory },
+  { img: "https://promistcool.com/wp-content/uploads/2020/04/banner-sanitz.jpg", title: "Special Effects", body: "Showcase incredible landscapes, swimming pools, events, expos, amusement parks and sports events with an atmospheric mist.", Icon: Sparkles, reverse: true },
+  { img: "https://promistcool.com/wp-content/uploads/2017/04/new-banner.jpg", title: "Greenhouses & Gardens", body: "Precise humidity control keeps plants healthy, improves yields and reduces water consumption compared to traditional irrigation.", Icon: TreePine },
+  { img: "https://promistcool.com/wp-content/uploads/2017/04/banner4.jpg", title: "Warehouses & Factories", body: "Suppress airborne dust, cool loading bays and keep goods in ideal conditions — even during the hottest months.", Icon: Warehouse, reverse: true },
+];
+
+function Applications() {
+  return (
+    <>
+      <PageHero
+        eyebrow="Applications"
+        title="A cost-effective solution for cooling and humidification."
+        lede="Promist misting systems adapt to industrial, commercial, residential, warehouses, greenhouses, gardens, zoos, patios, parks and amusement areas."
+      />
+      <Section>
+        <div className="space-y-24">
+          {APPS.map((a) => <FeatureRow key={a.title} {...a} />)}
+        </div>
+      </Section>
+      <CTA />
+    </>
+  );
+}

src/routes/contact.tsx

@@ -0,0 +1,41 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { PageHero, Section, CTA } from "@/components/page-shell";
+import { Phone, Mail, MapPin } from "lucide-react";
+
+export const Route = createFileRoute("/contact")({
+  head: () => ({
+    meta: [
+      { title: "Contact Promist — Dubai, UAE" },
+      { name: "description", content: "Contact Promist for misting system enquiries, service and support in the UAE." },
+      { property: "og:title", content: "Contact Promist" },
+      { property: "og:description", content: "Reach the Promist team in Dubai, UAE." },
+    ],
+  }),
+  component: Contact,
+});
+
+function Contact() {
+  return (
+    <>
+      <PageHero eyebrow="Contact" title="Get in touch." lede="Our team is available across office hours to answer questions and provide quotes." />
+      <Section>
+        <div className="grid md:grid-cols-3 gap-10">
+          {[
+            { I: Phone, t: "Call", l: ["+971 4 251 5596", "+971 55 209 8628"] },
+            { I: Mail, t: "Email", l: ["info@promistcool.com", "sales@promistcool.com"] },
+            { I: MapPin, t: "Visit", l: ["Dubai, United Arab Emirates"] },
+          ].map((c) => (
+            <div key={c.t} className="border-t pt-6">
+              <c.I className="h-6 w-6 text-brand-red" />
+              <h3 className="mt-4 font-display text-2xl font-black">{c.t}</h3>
+              <div className="mt-3 space-y-1 text-muted-foreground">
+                {c.l.map((line) => <p key={line}>{line}</p>)}
+              </div>
+            </div>
+          ))}
+        </div>
+      </Section>
+      <CTA />
+    </>
+  );
+}

src/routes/enquiry.tsx

@@ -0,0 +1,71 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { PageHero, Section } from "@/components/page-shell";
+import { useState } from "react";
+import { ArrowUpRight } from "lucide-react";
+
+export const Route = createFileRoute("/enquiry")({
+  head: () => ({
+    meta: [
+      { title: "Enquiry — Request a Misting System Quote" },
+      { name: "description", content: "Send a quick enquiry to Promist for a misting system quote or consultation." },
+      { property: "og:title", content: "Enquiry" },
+      { property: "og:description", content: "Request a Promist misting system quote." },
+    ],
+  }),
+  component: Enquiry,
+});
+
+function Enquiry() {
+  const [sent, setSent] = useState(false);
+  return (
+    <>
+      <PageHero
+        eyebrow="Enquiry"
+        title="Tell us about your project."
+        lede="A Promist engineer will get back to you with sizing, pricing and delivery details."
+      />
+      <Section>
+        <div className="grid lg:grid-cols-5 gap-16">
+          <form
+            className="lg:col-span-3 space-y-6"
+            onSubmit={(e) => { e.preventDefault(); setSent(true); }}
+          >
+            {[
+              { l: "Full name", n: "name", t: "text" },
+              { l: "Email address", n: "email", t: "email" },
+              { l: "Phone", n: "phone", t: "tel" },
+              { l: "Company (optional)", n: "company", t: "text" },
+            ].map((f) => (
+              <label key={f.n} className="block">
+                <span className="text-xs uppercase tracking-widest text-muted-foreground">{f.l}</span>
+                <input required={f.n !== "company"} type={f.t} name={f.n} className="mt-2 w-full border-b bg-transparent py-3 outline-none focus:border-brand-red" />
+              </label>
+            ))}
+            <label className="block">
+              <span className="text-xs uppercase tracking-widest text-muted-foreground">How can we help?</span>
+              <textarea required name="message" rows={5} className="mt-2 w-full border-b bg-transparent py-3 outline-none focus:border-brand-red resize-none" />
+            </label>
+            <button type="submit" 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">
+              {sent ? "Thanks — we'll be in touch" : "Submit enquiry"} <ArrowUpRight className="h-4 w-4" />
+            </button>
+          </form>
+          <aside className="lg:col-span-2 border-l pl-10 space-y-8">
+            <div>
+              <div className="text-xs uppercase tracking-widest text-brand-red font-semibold">Call</div>
+              <p className="mt-2 font-display text-2xl font-bold">+971 4 251 5596</p>
+              <p className="font-display text-2xl font-bold">+971 55 209 8628</p>
+            </div>
+            <div>
+              <div className="text-xs uppercase tracking-widest text-brand-red font-semibold">Email</div>
+              <p className="mt-2">info@promistcool.com</p>
+            </div>
+            <div>
+              <div className="text-xs uppercase tracking-widest text-brand-red font-semibold">Location</div>
+              <p className="mt-2">Dubai, United Arab Emirates</p>
+            </div>
+          </aside>
+        </div>
+      </Section>
+    </>
+  );
+}

src/routes/products.tsx

@@ -0,0 +1,49 @@
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { PageHero, Section, CTA } from "@/components/page-shell";
+import { ArrowUpRight } from "lucide-react";
+
+export const Route = createFileRoute("/products")({
+  head: () => ({
+    meta: [
+      { title: "Products — Nozzles, Pumps & Sanitization Booth" },
+      { name: "description", content: "High-pressure pumps, misting nozzles, control panels and the Promist Sanitization Booth." },
+      { property: "og:title", content: "Promist Products" },
+      { property: "og:description", content: "Pumps, nozzles, panels and sanitization systems." },
+    ],
+  }),
+  component: Products,
+});
+
+const PRODUCTS = [
+  { img: "https://promistcool.com/wp-content/uploads/2020/04/banner-sanitz.jpg", title: "Misting Nozzles", desc: "Precision brass and stainless-steel nozzles engineered for ultra-fine mist and long service life." },
+  { img: "https://promistcool.com/wp-content/uploads/2017/04/new-banner.jpg", title: "High-Pressure Pumps", desc: "Reliable pumps up to 70 bar for residential, commercial and industrial deployments." },
+  { img: "https://promistcool.com/wp-content/uploads/2020/04/image-002.png", title: "Sanitization Booth", desc: "Turnkey walk-through booth with electric control panel, reflective sensor and 12-month warranty." },
+  { img: "https://promistcool.com/wp-content/uploads/2017/04/banner4.jpg", title: "Misting Fans", desc: "Portable and fixed misting fans for events, patios, factories and open spaces." },
+];
+
+function Products() {
+  return (
+    <>
+      <PageHero
+        eyebrow="Products"
+        title="Engineered components. Complete systems."
+        lede="Every part of a Promist system — from nozzle to pump to control panel — is built to work as one."
+      />
+      <Section>
+        <div className="grid md:grid-cols-2 gap-x-14 gap-y-20">
+          {PRODUCTS.map((p) => (
+            <article key={p.title}>
+              <img src={p.img} alt={p.title} className="w-full h-[320px] object-cover" />
+              <h3 className="mt-6 font-display text-2xl font-black">{p.title}</h3>
+              <p className="mt-3 text-muted-foreground">{p.desc}</p>
+              <Link to="/enquiry" className="mt-4 inline-flex items-center gap-1 text-sm font-semibold text-brand-red">
+                Enquire <ArrowUpRight className="h-4 w-4" />
+              </Link>
+            </article>
+          ))}
+        </div>
+      </Section>
+      <CTA />
+    </>
+  );
+}

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 />
+    </>
+  );
+}

src/routes/rental.tsx

@@ -0,0 +1,52 @@
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { PageHero, Section } from "@/components/page-shell";
+import { ArrowUpRight } from "lucide-react";
+
+export const Route = createFileRoute("/rental")({
+  head: () => ({
+    meta: [
+      { title: "Rental — Misting Systems for Events & Short-Term Use" },
+      { name: "description", content: "Rent Promist misting fans and systems for events, expos, weddings and short-term outdoor cooling needs." },
+      { property: "og:title", content: "Promist Rental" },
+      { property: "og:description", content: "Short-term misting rentals for events and outdoor spaces." },
+    ],
+  }),
+  component: Rental,
+});
+
+function Rental() {
+  return (
+    <>
+      <PageHero
+        eyebrow="Rental"
+        title="Cool on demand — for a day, a week or a season."
+        lede="Rent complete Promist misting systems and fans for events, expos, weddings, film sets and temporary outdoor installations."
+      />
+      <Section>
+        <div className="grid lg:grid-cols-2 gap-14">
+          <div>
+            <img src="https://promistcool.com/wp-content/uploads/2017/04/new-banner.jpg" alt="Rental misting" className="w-full h-[440px] object-cover" />
+          </div>
+          <div>
+            <ul className="space-y-4">
+              {[
+                "Delivery, installation and pickup included",
+                "Flexible terms — daily, weekly, monthly",
+                "Portable fans and full pump-driven systems",
+                "24/7 technical support during rental period",
+                "Custom sizing based on your site plan",
+              ].map((f) => (
+                <li key={f} className="flex gap-4 border-b pb-4">
+                  <span className="text-brand-red font-black">/</span><span>{f}</span>
+                </li>
+              ))}
+            </ul>
+            <Link to="/enquiry" className="mt-8 inline-flex items-center gap-2 bg-brand-red text-white px-6 py-3.5 rounded-md text-sm font-semibold">
+              Request rental pricing <ArrowUpRight className="h-4 w-4" />
+            </Link>
+          </div>
+        </div>
+      </Section>
+    </>
+  );
+}

src/routes/solutions.tsx

@@ -0,0 +1,48 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { PageHero, Section, CTA } from "@/components/page-shell";
+import { Droplets, Sparkles, Gauge, ShieldCheck, Wind, Factory } from "lucide-react";
+
+export const Route = createFileRoute("/solutions")({
+  head: () => ({
+    meta: [
+      { title: "Solutions — Misting Technology by Promist" },
+      { name: "description", content: "Humidification, cooling, dust suppression and special effects — engineered by Promist." },
+      { property: "og:title", content: "Solutions" },
+      { property: "og:description", content: "Full-service misting technology solutions." },
+    ],
+  }),
+  component: Solutions,
+});
+
+const S = [
+  { i: Droplets, t: "Misting Technology", d: "By forcing water at high pressure through specially designed misting nozzles, we create an ultra-fine mist that evaporates instantly." },
+  { i: Gauge, t: "Cooling Principle", d: "Billions of tiny water droplets evaporate, becoming vapor. The energy used to change water to gas cools the surrounding air." },
+  { i: ShieldCheck, t: "Humidification", d: "The most efficient way to keep the right humidity levels for food, materials and industrial processes." },
+  { i: Wind, t: "Dust Suppression", d: "Extremely effective airborne dust suppression and air filtration for factories, warehouses and outdoor sites." },
+  { i: Sparkles, t: "Special Effects", d: "Elevate landscapes, pools, events, expos, amusement parks and sports events with atmospheric mist." },
+  { i: Factory, t: "Industrial Systems", d: "Custom engineered high-pressure systems designed to run continuously in demanding industrial environments." },
+];
+
+function Solutions() {
+  return (
+    <>
+      <PageHero
+        eyebrow="Solutions"
+        title="Promist is a full-service misting technology partner."
+        lede="From concept to commissioning, we deliver misting systems that just work — every day, in every climate."
+      />
+      <Section>
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-x-12 gap-y-14 border-t pt-14">
+          {S.map((x) => (
+            <div key={x.t} className="border-b pb-8">
+              <x.i className="h-7 w-7 text-brand-red" />
+              <h3 className="mt-5 font-display text-2xl font-black">{x.t}</h3>
+              <p className="mt-3 text-muted-foreground">{x.d}</p>
+            </div>
+          ))}
+        </div>
+      </Section>
+      <CTA />
+    </>
+  );
+}