From 998300277d8db9c93a969fdff26b4dc79acc03fe 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:12:37 +0000 Subject: [PATCH 1/6] Work in progress --- bun.lock | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/bun.lock b/bun.lock index 796aa29..5d1e794 100644 --- a/bun.lock +++ b/bun.lock @@ -60,7 +60,7 @@ }, "devDependencies": { "@eslint/js": "^9.32.0", - "@lovable.dev/vite-tanstack-config": "^2.7.6", + "@lovable.dev/vite-tanstack-config": "2.7.7", "@types/node": "^22.16.5", "@types/react": "^19.2.0", "@types/react-dom": "^19.2.0", @@ -232,7 +232,7 @@ "@lovable.dev/vite-plugin-hmr-gate": ["@lovable.dev/vite-plugin-hmr-gate@1.1.3", "", { "peerDependencies": { "vite": ">=5.0.0 <9.0.0" } }, "sha512-edEZzJloDj2IO7lf380So7k1SiNeYDbFLqeLzuqsP8J1qSetKWqTBTR2gAfGxBlLXHZrlayb/dU8Y9S9AlqW0Q=="], - "@lovable.dev/vite-tanstack-config": ["@lovable.dev/vite-tanstack-config@2.7.6", "", { "dependencies": { "@lovable.dev/vite-plugin-dev-server-bridge": "^1.1.1", "@lovable.dev/vite-plugin-hmr-gate": "^1.1.3", "@tanstack/devtools-vite": "^0.8.1", "lightningcss": "^1.30.0" }, "peerDependencies": { "@tailwindcss/vite": ">=4.0.0", "@tanstack/react-start": ">=1.100.0", "@vitejs/plugin-react": ">=4.0.0", "nitro": ">=3.0.260603-beta", "vite": ">=5.0.0 <9.0.0", "vite-tsconfig-paths": ">=6.0.0" }, "optionalPeers": ["nitro"] }, "sha512-OxmPom+MWV54Itezoapqa/T6zN8oSHap4kHG7mse4iiCMGGD+E4qa+q1SctacU6wEDkJiqJHhYPG+QEsSY3IUw=="], + "@lovable.dev/vite-tanstack-config": ["@lovable.dev/vite-tanstack-config@2.7.7", "https://europe-west1-npm.pkg.dev/lovable-core-prod/sandbox-npm-cache/@lovable.dev/vite-tanstack-config/-/vite-tanstack-config-2.7.7.tgz", { "dependencies": { "@lovable.dev/vite-plugin-dev-server-bridge": "^1.2.1", "@lovable.dev/vite-plugin-hmr-gate": "^1.1.3", "@tanstack/devtools-vite": "^0.8.1", "lightningcss": "^1.30.0" }, "peerDependencies": { "@tailwindcss/vite": ">=4.0.0", "@tanstack/react-start": ">=1.100.0", "@vitejs/plugin-react": ">=4.0.0", "nitro": ">=3.0.260603-beta", "vite": ">=5.0.0 <9.0.0", "vite-tsconfig-paths": ">=6.0.0" }, "optionalPeers": ["nitro"] }, "sha512-J7IXGzGaMfsFiEpNUaG3utmA1d/tXv4a7XPJb9ONlG7xyfq7LjPebJ10J087sou4lRl08ndJkJ/reE5paAJH2w=="], "@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.1.4", "", { "dependencies": { "@tybys/wasm-util": "^0.10.1" }, "peerDependencies": { "@emnapi/core": "^1.7.1", "@emnapi/runtime": "^1.7.1" } }, "sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow=="], diff --git a/package.json b/package.json index d6fafde..84b8474 100644 --- a/package.json +++ b/package.json @@ -67,7 +67,7 @@ }, "devDependencies": { "@eslint/js": "^9.32.0", - "@lovable.dev/vite-tanstack-config": "^2.7.6", + "@lovable.dev/vite-tanstack-config": "2.7.7", "@types/node": "^22.16.5", "@types/react": "^19.2.0", "@types/react-dom": "^19.2.0", From c50a5bfaa83a5b63d75edc02b1054e931e647572 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:13:12 +0000 Subject: [PATCH 2/6] Changes Co-authored-by: yusuf-intern <248833874+yusuf-intern@users.noreply.github.com> --- src/styles.css | 160 +++++++++++++------------------------------------ 1 file changed, 43 insertions(+), 117 deletions(-) diff --git a/src/styles.css b/src/styles.css index a9806b4..18ca684 100644 --- a/src/styles.css +++ b/src/styles.css @@ -4,141 +4,67 @@ @custom-variant dark (&:is(.dark *)); -/* - * Design system definition. - * - * The @theme inline block maps CSS custom properties to Tailwind utility - * classes (e.g. --color-primary -> bg-primary, text-primary). - * - * The :root and .dark blocks define the actual color values using oklch. - * All colors MUST use oklch format. - * - * To add a new semantic color: - * 1. Add the variable to :root (light value) and .dark (dark value) - * 2. Register it in @theme inline as --color-: var(--) - */ - @theme inline { - --radius-sm: calc(var(--radius) - 4px); - --radius-md: calc(var(--radius) - 2px); - --radius-lg: var(--radius); - --radius-xl: calc(var(--radius) + 4px); - --radius-2xl: calc(var(--radius) + 8px); - --radius-3xl: calc(var(--radius) + 12px); - --radius-4xl: calc(var(--radius) + 16px); + --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif; + --font-display: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif; + --color-background: var(--background); --color-foreground: var(--foreground); - --color-card: var(--card); - --color-card-foreground: var(--card-foreground); - --color-popover: var(--popover); - --color-popover-foreground: var(--popover-foreground); - --color-primary: var(--primary); - --color-primary-foreground: var(--primary-foreground); - --color-secondary: var(--secondary); - --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); - --color-accent: var(--accent); - --color-accent-foreground: var(--accent-foreground); - --color-destructive: var(--destructive); - --color-destructive-foreground: var(--destructive-foreground); + --color-brand-red: var(--brand-red); + --color-brand-blue: var(--brand-blue); + --color-brand-blue-dark: var(--brand-blue-dark); --color-border: var(--border); - --color-input: var(--input); - --color-ring: var(--ring); - --color-ring-offset-background: var(--background); - --color-chart-1: var(--chart-1); - --color-chart-2: var(--chart-2); - --color-chart-3: var(--chart-3); - --color-chart-4: var(--chart-4); - --color-chart-5: var(--chart-5); - --color-sidebar: var(--sidebar); - --color-sidebar-foreground: var(--sidebar-foreground); - --color-sidebar-primary: var(--sidebar-primary); - --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); - --color-sidebar-accent: var(--sidebar-accent); - --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); - --color-sidebar-border: var(--sidebar-border); - --color-sidebar-ring: var(--sidebar-ring); + --color-primary: var(--brand-red); + --color-primary-foreground: oklch(1 0 0); + --color-accent: var(--brand-blue); + --color-accent-foreground: oklch(1 0 0); } :root { - --radius: 0.625rem; --background: oklch(1 0 0); - --foreground: oklch(0.129 0.042 264.695); - --card: oklch(1 0 0); - --card-foreground: oklch(0.129 0.042 264.695); - --popover: oklch(1 0 0); - --popover-foreground: oklch(0.129 0.042 264.695); - --primary: oklch(0.208 0.042 265.755); - --primary-foreground: oklch(0.984 0.003 247.858); - --secondary: oklch(0.968 0.007 247.896); - --secondary-foreground: oklch(0.208 0.042 265.755); - --muted: oklch(0.968 0.007 247.896); - --muted-foreground: oklch(0.554 0.046 257.417); - --accent: oklch(0.968 0.007 247.896); - --accent-foreground: oklch(0.208 0.042 265.755); - --destructive: oklch(0.577 0.245 27.325); - --destructive-foreground: oklch(0.984 0.003 247.858); - --border: oklch(0.929 0.013 255.508); - --input: oklch(0.929 0.013 255.508); - --ring: oklch(0.704 0.04 256.788); - --chart-1: oklch(0.646 0.222 41.116); - --chart-2: oklch(0.6 0.118 184.704); - --chart-3: oklch(0.398 0.07 227.392); - --chart-4: oklch(0.828 0.189 84.429); - --chart-5: oklch(0.769 0.188 70.08); - --sidebar: oklch(0.984 0.003 247.858); - --sidebar-foreground: oklch(0.129 0.042 264.695); - --sidebar-primary: oklch(0.208 0.042 265.755); - --sidebar-primary-foreground: oklch(0.984 0.003 247.858); - --sidebar-accent: oklch(0.968 0.007 247.896); - --sidebar-accent-foreground: oklch(0.208 0.042 265.755); - --sidebar-border: oklch(0.929 0.013 255.508); - --sidebar-ring: oklch(0.704 0.04 256.788); -} + --foreground: oklch(0.18 0.02 250); + --muted: oklch(0.97 0.005 250); + --muted-foreground: oklch(0.45 0.02 250); + --border: oklch(0.9 0.01 250); -.dark { - --background: oklch(0.129 0.042 264.695); - --foreground: oklch(0.984 0.003 247.858); - --card: oklch(0.208 0.042 265.755); - --card-foreground: oklch(0.984 0.003 247.858); - --popover: oklch(0.208 0.042 265.755); - --popover-foreground: oklch(0.984 0.003 247.858); - --primary: oklch(0.929 0.013 255.508); - --primary-foreground: oklch(0.208 0.042 265.755); - --secondary: oklch(0.279 0.041 260.031); - --secondary-foreground: oklch(0.984 0.003 247.858); - --muted: oklch(0.279 0.041 260.031); - --muted-foreground: oklch(0.704 0.04 256.788); - --accent: oklch(0.279 0.041 260.031); - --accent-foreground: oklch(0.984 0.003 247.858); - --destructive: oklch(0.704 0.191 22.216); - --destructive-foreground: oklch(0.984 0.003 247.858); - --border: oklch(1 0 0 / 10%); - --input: oklch(1 0 0 / 15%); - --ring: oklch(0.551 0.027 264.364); - --chart-1: oklch(0.488 0.243 264.376); - --chart-2: oklch(0.696 0.17 162.48); - --chart-3: oklch(0.769 0.188 70.08); - --chart-4: oklch(0.627 0.265 303.9); - --chart-5: oklch(0.645 0.246 16.439); - --sidebar: oklch(0.208 0.042 265.755); - --sidebar-foreground: oklch(0.984 0.003 247.858); - --sidebar-primary: oklch(0.488 0.243 264.376); - --sidebar-primary-foreground: oklch(0.984 0.003 247.858); - --sidebar-accent: oklch(0.279 0.041 260.031); - --sidebar-accent-foreground: oklch(0.984 0.003 247.858); - --sidebar-border: oklch(1 0 0 / 10%); - --sidebar-ring: oklch(0.551 0.027 264.364); + --brand-red: oklch(0.58 0.22 27); /* Promist red */ + --brand-blue: oklch(0.62 0.16 240); /* Promist blue */ + --brand-blue-dark: oklch(0.42 0.14 245); } @layer base { * { border-color: var(--color-border); } - - body { + html, body { background-color: var(--color-background); color: var(--color-foreground); + font-family: var(--font-sans); + -webkit-font-smoothing: antialiased; + } + h1, h2, h3, h4 { + font-family: var(--font-display); + letter-spacing: -0.02em; } } + +@utility container-page { + max-width: 1240px; + margin-inline: auto; + padding-inline: 1.5rem; +} + +@utility rule-red { + display: block; + width: 64px; + height: 3px; + background: var(--brand-red); +} +@utility rule-blue { + display: block; + width: 64px; + height: 3px; + background: var(--brand-blue); +} From 744e14f58adc304ddb29dddc4ea7404e5da0ca10 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:31 +0000 Subject: [PATCH 3/6] Changes Co-authored-by: yusuf-intern <248833874+yusuf-intern@users.noreply.github.com> --- src/routeTree.gen.ts | 10 -- src/routes/__root.tsx | 221 ++++++++++++++++++++++++--------- src/routes/index.tsx | 280 +++++++++++++++++++++++++++++++++++++++--- 3 files changed, 429 insertions(+), 82 deletions(-) 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() - -import type { getRouter } from './router.tsx' -import type { startInstance } from './start.ts' -declare module '@tanstack/react-start' { - interface Register { - ssr: true - router: Awaited> - config: Awaited> - } -} 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 ( + + ); +} + +function Header() { + const [open, setOpen] = useState(false); + return ( +
+
+ + + Pro + mist + + + Misting Systems + + + + +
+ {open && ( +
+
+ {NAV.map((n) => ( + setOpen(false)} + className="text-foreground/80 hover:text-brand-red" + activeProps={{ className: "text-brand-red" }} + activeOptions={{ exact: n.to === "/" }} + > + {n.label} + + ))} +
+
+ )} +
+ ); +} + +function Footer() { + return ( +
+
+
+
+ Pro + mist +
+

+ High-pressure misting systems for cooling, humidification and dust suppression since 1979. +

+
+
+

Explore

+
    + {NAV.slice(1, 6).map((n) => ( +
  • + {n.label} +
    • + ))} +
+
+
+

Company

+
    +
  • Enquiry
    • +
  • Contact
    • +
  • Rental
    • +
+
+
+

Contact

+
    +
  • +971 4 251 5596
    • +
  • +971 55 209 8628
    • +
  • Dubai, United Arab Emirates
    • +
+
+
+
+
+ © {new Date().getFullYear()} Promist Misting Systems. All rights reserved. + Humidity and Control +
+
+
+ ); +} + function NotFoundComponent() { return ( -
+
-

404

-

Page not found

+

404

+

Page not found

The page you're looking for doesn't exist or has been moved.

-
- - Go home - -
+ + Go home +
); @@ -40,32 +170,17 @@ function ErrorComponent({ error, reset }: { error: Error; reset: () => void }) { useEffect(() => { reportLovableError(error, { boundary: "tanstack_root_error_component" }); }, [error]); - return ( -
+
-

- This page didn't load -

-

- Something went wrong on our end. You can try refreshing or head back home. -

-
+

This page didn't load

+

Something went wrong. Try again or head home.

+
- - Go home - + onClick={() => { router.invalidate(); reset(); }} + className="rounded-md bg-brand-red text-white px-4 py-2 text-sm font-medium" + >Try again + Go home
@@ -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 ( - - - - - {children} - - + + {children} ); } function RootComponent() { const { queryClient } = Route.useRouteContext(); - return ( - {/* Required: nested routes render here. Removing breaks all child routes. */} - + +
+
+ +
+
); } 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 ( -
- Your app will live here! -
+ <> + {/* HERO */} +
+
+
+
+ Since 1979 +
+

+ Humidity +
+ and{" "} + Control. +

+

+ We engineer high-pressure misting systems that cool, humidify, suppress dust and sanitize — + from residential patios to industrial factories across the region. +

+
+ + Request a quote + + + Explore products + +
+
+ {[ + ["45+", "Years of expertise"], + ["1000+", "Projects delivered"], + ["70 bar", "High-pressure precision"], + ].map(([k, v]) => ( +
+
{k}
+
{v}
+
+ ))} +
+
+
+
+
+ Promist misting nozzle +
+
+
Featured
+
Sanitization Booth
+
+ + View + +
+
+
+
+
+ + {/* APPLICATIONS */} +
+
+
+
+ +

Applications

+

+ A cost-effective solution for outdoor cooling and humidification across industrial, commercial, + residential, warehouses, greenhouses, gardens, patios, parks and amusement areas. +

+
+ + All applications + +
+ +
+ {[ + { 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) => ( +
+
+ {a.title} +
+
+ +

{a.title}

+
+

{a.desc}

+ + Details + +
+ ))} +
+
+
+ + {/* SANITIZATION BOOTH FEATURE */} +
+
+
+ +

Sanitization Booth

+

+ A turnkey solution for your disinfectant needs — engineered for continuous public use. +

+
    + {[ + "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) => ( +
  • + / + {f} +
    • + ))} +
+ + View details + +
+
+ Sanitization Booth +
+
+
+ + {/* 5 REASONS */} +
+
+
+ +

+ Five great reasons to choose us +

+
+
    + {[ + "Best product quality", + "100% customer satisfaction", + "Comprehensive range of services", + "Always available for you", + "Services guarantee", + ].map((r, i) => ( +
  1. +
    + 0{i + 1} +
    +
    {r}
    +
    2. + ))} +
+
+
+ + {/* FULL SERVICES */} +
+
+
+
+ +

+ Promist is a
full-service
+ misting technology +

+

+ By forcing water through specially designed nozzles at high pressure, we create an ultra-fine + mist — the science behind every one of our systems. +

+
+
+ {[ + { 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) => ( +
+ +

{s.t}

+

{s.d}

+
+ ))} +
+
+
+
+ + {/* PROJECTS */} +
+
+
+
+ +

Recent projects

+
+ + View more + +
+
+ {[IMG.project1, IMG.project2, IMG.project3].map((src, i) => ( + + {`Project + +
+
+ + {/* CONTACT BAND */} +
+ +
+
+
+ +

+ Questions?
Call now: +971 4 251 5596 +

+
+
+ + Request a quote + +
+
+
+ ); } 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 4/6] 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 ( +
+
+
{eyebrow}
+

+ {title} +

+ {lede &&

{lede}

} +
+
+ ); +} + +export function Section({ children, className = "" }: { children: React.ReactNode; className?: string }) { + return
{children}
; +} + +export function FeatureRow({ img, title, body, reverse, Icon }: { img: string; title: string; body: string; reverse?: boolean; Icon?: LucideIcon }) { + return ( +
*:first-child]:order-2" : ""}`}> + {title} +
+ {Icon && } +

{title}

+

{body}

+
+
+ ); +} + +export function CTA() { + return ( +
+
+
+
Ready when you are
+

Let's design your misting system.

+
+ + Request a quote + +
+
+ ); +} + +// Dummy export so this file is treated as a module but not a route. +export const Route = createFileRoute("/_shared")({ component: () => null }); From 6127cbd8b3aa973954f2f3ffe11dffad7081b93c 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:15:57 +0000 Subject: [PATCH 5/6] Changes Co-authored-by: yusuf-intern <248833874+yusuf-intern@users.noreply.github.com> --- src/components/page-shell.tsx | 11 ++---- src/routes/about.tsx | 56 +++++++++++++++++++++++++++ src/routes/applications.tsx | 42 +++++++++++++++++++++ src/routes/contact.tsx | 41 ++++++++++++++++++++ src/routes/enquiry.tsx | 71 +++++++++++++++++++++++++++++++++++ src/routes/products.tsx | 49 ++++++++++++++++++++++++ src/routes/projects.tsx | 48 +++++++++++++++++++++++ src/routes/rental.tsx | 52 +++++++++++++++++++++++++ src/routes/solutions.tsx | 48 +++++++++++++++++++++++ 9 files changed, 410 insertions(+), 8 deletions(-) create mode 100644 src/routes/about.tsx create mode 100644 src/routes/applications.tsx create mode 100644 src/routes/contact.tsx create mode 100644 src/routes/enquiry.tsx create mode 100644 src/routes/products.tsx create mode 100644 src/routes/projects.tsx create mode 100644 src/routes/rental.tsx create mode 100644 src/routes/solutions.tsx diff --git a/src/components/page-shell.tsx b/src/components/page-shell.tsx index 88972d3..5551a97 100644 --- a/src/components/page-shell.tsx +++ b/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
{eyebrow}
-

- {title} -

+

{title}

{lede &&

{lede}

}
@@ -26,7 +24,7 @@ export function FeatureRow({ img, title, body, reverse, Icon }: { img: string; t
{Icon && }

{title}

-

{body}

+

{body}

); @@ -47,6 +45,3 @@ export function CTA() { ); } - -// Dummy export so this file is treated as a module but not a route. -export const Route = createFileRoute("/_shared")({ component: () => null }); diff --git a/src/routes/about.tsx b/src/routes/about.tsx new file mode 100644 index 0000000..49320d6 --- /dev/null +++ b/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 ( + <> + +
+
+
+

+ 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. +

+

+ 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. +

+
+
+
+
Mission
+

Deliver reliable humidity and cooling control, everywhere it's needed.

+
+
+
Vision
+

To be the region's most trusted misting technology partner.

+
+
+
Values
+

Craft, quality, and unwavering customer service.

+
+
+
+
+ + + ); +} diff --git a/src/routes/applications.tsx b/src/routes/applications.tsx new file mode 100644 index 0000000..482bef4 --- /dev/null +++ b/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 ( + <> + +
+
+ {APPS.map((a) => )} +
+
+ + + ); +} diff --git a/src/routes/contact.tsx b/src/routes/contact.tsx new file mode 100644 index 0000000..0e19069 --- /dev/null +++ b/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 ( + <> + +
+
+ {[ + { 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) => ( +
+ +

{c.t}

+
+ {c.l.map((line) =>

{line}

)} +
+
+ ))} +
+
+ + + ); +} diff --git a/src/routes/enquiry.tsx b/src/routes/enquiry.tsx new file mode 100644 index 0000000..558bbc6 --- /dev/null +++ b/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 ( + <> + +
+
+
{ 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) => ( + + ))} +