49 lines
1.9 KiB
TypeScript
49 lines
1.9 KiB
TypeScript
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 />
|
|
</>
|
|
);
|
|
}
|