362 lines
17 KiB
TypeScript
362 lines
17 KiB
TypeScript
import { createFileRoute, Link } from "@tanstack/react-router";
|
|
import { ArrowUpRight, Droplets, Wind, Factory, Sparkles, Gauge, ShieldCheck } from "lucide-react";
|
|
import { useState, useCallback, useEffect } from "react";
|
|
import useEmblaCarousel from "embla-carousel-react";
|
|
import Autoplay from "embla-carousel-autoplay";
|
|
|
|
export const Route = createFileRoute("/")({
|
|
head: () => ({
|
|
meta: [
|
|
{ title: "Promist — High-Pressure Misting for Cooling & Humidity" },
|
|
{ name: "description", content: "Turnkey misting systems for outdoor cooling, humidification, dust suppression 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,
|
|
});
|
|
|
|
const IMG = {
|
|
nozzle: "/wp-uploads/2020/04/banner-sanitz.jpg",
|
|
humid: "/wp-uploads/2016/03/humidification-misting.jpg",
|
|
commercial: "/wp-uploads/2016/03/commercial-misting.jpg",
|
|
industrial: "/wp-uploads/2016/03/industrial-misting.jpg",
|
|
project1: "/wp-uploads/2017/04/banner4.jpg",
|
|
project2: "/wp-uploads/2017/04/banner2.jpg",
|
|
project3: "/wp-uploads/2017/04/banner3.jpg",
|
|
banner: "/wp-uploads/2017/04/new-banner.jpg",
|
|
};
|
|
|
|
const SLIDES = [
|
|
{
|
|
img: "/wp-uploads/2017/04/nozzle-banner1.jpg",
|
|
title: "Misting Solutions",
|
|
subtitle: "Turnkey high-pressure misting for outdoor cooling, humidification, dust suppression and special effects — engineered in the UAE since 1979.",
|
|
cta: "Discover solutions",
|
|
ctaTo: "/misting-technology",
|
|
},
|
|
{
|
|
img: "/slide-residential.jpg",
|
|
title: "Residential Outdoor Cooling",
|
|
subtitle: "Reclaim your outdoor spaces with high-pressure misting — even when temperatures push past 45°C.",
|
|
cta: "Explore applications",
|
|
ctaTo: "/applications",
|
|
},
|
|
{
|
|
img: "/slide-humidity.jpg",
|
|
title: "Humidity & Control",
|
|
subtitle: "The most efficient way to keep the right humidity levels for industrial and commercial environments.",
|
|
cta: "Request a quote",
|
|
ctaTo: "/enquiry",
|
|
},
|
|
];
|
|
|
|
const APP_CARDS = [
|
|
{ img: IMG.humid, title: "Humidification", desc: "Commercial and industrial environments where controlled humidity or temperature drive profitability.", icon: Droplets, href: "/applications/humidification" },
|
|
{ img: IMG.commercial, title: "Commercial Outdoor Cooling", desc: "Reclaim patio dining and outdoor bars once temperatures push past 45°C.", icon: Wind, href: "/applications/commercial-outdoor-cooling" },
|
|
{ img: IMG.industrial, title: "Industrial Cooling", desc: "A safer, more productive floor — cooling employees, equipment and processes.", icon: Factory, href: "/applications/industrial-outdoor-cooling" },
|
|
];
|
|
|
|
function HeroSlider() {
|
|
const [emblaRef, emblaApi] = useEmblaCarousel(
|
|
{ loop: true, duration: 40 },
|
|
[Autoplay({ delay: 5000, stopOnInteraction: true })],
|
|
);
|
|
const [selectedIndex, setSelectedIndex] = useState(0);
|
|
|
|
const scrollTo = useCallback(
|
|
(index: number) => emblaApi && emblaApi.scrollTo(index),
|
|
[emblaApi],
|
|
);
|
|
|
|
const onSelect = useCallback(() => {
|
|
if (!emblaApi) return;
|
|
setSelectedIndex(emblaApi.selectedScrollSnap());
|
|
}, [emblaApi]);
|
|
|
|
useEffect(() => {
|
|
if (!emblaApi) return;
|
|
onSelect();
|
|
emblaApi.on("select", onSelect);
|
|
return () => {
|
|
emblaApi.off("select", onSelect);
|
|
};
|
|
}, [emblaApi, onSelect]);
|
|
|
|
return (
|
|
<section className="relative overflow-hidden">
|
|
<div ref={emblaRef} className="overflow-hidden">
|
|
<div className="flex">
|
|
{SLIDES.map((slide, i) => (
|
|
<div
|
|
key={i}
|
|
className="relative min-w-0 shrink-0 grow-0 basis-full"
|
|
>
|
|
<div className="relative h-[75vh] min-h-[500px] max-h-[800px]">
|
|
<img
|
|
src={slide.img}
|
|
alt={slide.title}
|
|
className="absolute inset-0 w-full h-full object-cover"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-r from-black/70 via-black/40 to-black/30" />
|
|
<div className="absolute inset-0 flex items-center">
|
|
<div className="container-page">
|
|
<div className="max-w-2xl">
|
|
<div className="inline-flex items-center gap-2 text-xs uppercase tracking-[0.25em] text-white/80 font-semibold mb-4">
|
|
<span className="block w-8 h-0.5 bg-brand-red" /> Since 1979
|
|
</div>
|
|
<h1 className="font-display text-5xl md:text-7xl lg:text-8xl font-black leading-[0.95] text-white">
|
|
{slide.title}
|
|
</h1>
|
|
<p className="mt-6 text-lg md:text-xl text-white/80 max-w-xl">
|
|
{slide.subtitle}
|
|
</p>
|
|
<div className="mt-8 flex flex-wrap gap-3">
|
|
<Link
|
|
to={slide.ctaTo as any}
|
|
className="inline-flex items-center gap-2 bg-brand-red text-white px-7 py-3.5 rounded-md text-sm font-semibold hover:opacity-90 transition-opacity"
|
|
>
|
|
{slide.cta} <ArrowUpRight className="h-4 w-4" />
|
|
</Link>
|
|
<Link
|
|
to="/contact"
|
|
className="inline-flex items-center gap-2 bg-white/10 backdrop-blur-sm text-white border border-white/30 px-7 py-3.5 rounded-md text-sm font-semibold hover:bg-white/20 transition-colors"
|
|
>
|
|
Contact us
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Dots */}
|
|
<div className="absolute bottom-6 left-1/2 -translate-x-1/2 flex items-center gap-2.5">
|
|
{SLIDES.map((_, i) => (
|
|
<button
|
|
key={i}
|
|
onClick={() => scrollTo(i)}
|
|
className={`rounded-full transition-all duration-300 ${
|
|
i === selectedIndex
|
|
? "w-8 h-2.5 bg-brand-red"
|
|
: "w-2.5 h-2.5 bg-white/50 hover:bg-white/80"
|
|
}`}
|
|
aria-label={`Go to slide ${i + 1}`}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{/* Arrows */}
|
|
<button
|
|
onClick={() => emblaApi?.scrollPrev()}
|
|
className="hidden sm:flex absolute left-4 top-1/2 -translate-y-1/2 w-11 h-11 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 items-center justify-center text-white hover:bg-white/20 transition-colors"
|
|
aria-label="Previous slide"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
</button>
|
|
<button
|
|
onClick={() => emblaApi?.scrollNext()}
|
|
className="hidden sm:flex absolute right-4 top-1/2 -translate-y-1/2 w-11 h-11 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 items-center justify-center text-white hover:bg-white/20 transition-colors"
|
|
aria-label="Next slide"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</button>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function Home() {
|
|
return (
|
|
<>
|
|
{/* HERO SLIDER */}
|
|
<HeroSlider />
|
|
|
|
{/* HIGH-PRESSURE MISTING SOLUTIONS 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">High-Pressure Misting Solutions</h2>
|
|
<p className="mt-4 text-muted-foreground max-w-lg">
|
|
From residential patios to industrial facilities, our high-pressure misting systems cool the air, control humidity, suppress dust and elevate spaces — designed, built and installed in the UAE since 1979.
|
|
</p>
|
|
<ul className="mt-8 grid sm:grid-cols-2 gap-x-8 gap-y-4 text-sm">
|
|
{[
|
|
"Outdoor cooling up to 45°C and beyond",
|
|
"Industrial & commercial humidification",
|
|
"Dust suppression & air filtration",
|
|
"Special effects for events & landscapes",
|
|
"Custom system design & installation",
|
|
"12-month warranty from installation",
|
|
].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="/misting-technology" 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">
|
|
Discover solutions <ArrowUpRight className="h-4 w-4" />
|
|
</Link>
|
|
</div>
|
|
<div>
|
|
<img src="/wp-uploads/2017/04/commercial.jpg" alt="Misting Solutions" className="w-full max-h-[560px] object-contain" />
|
|
</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">
|
|
{APP_CARDS.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={a.href} 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>
|
|
|
|
{/* 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>
|
|
</>
|
|
);
|
|
}
|