Yusuf-Sabuwala/promist
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changes

Browse Source 
Co-authored-by: yusuf-intern <248833874+yusuf-intern@users.noreply.github.com>
This commit is contained in:
gpt-engineer-app[bot]
2026-07-21 17:14:31 +00:00
parent c50a5bfaa8
commit 744e14f58a
3 changed files with 429 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

280
src/routes/index.tsx
View File

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