/* global React, DEMO_PHOTOS, PageHero */ // Neutral fallback swatch for quartz colours (real slab photos load over it; // the gradient only shows if a photo is missing). const Q = "linear-gradient(135deg, #f4f2ee, #ded8cf)"; // Photos for a colour are discovered by its `slug` from /images/: // [slug]-slab.jpg (main), [slug]-close.jpg, [slug]-close-2.jpg, [slug]-1.jpg ... // Drop more files with the same slug and they appear automatically (see imageUrls()). const MATERIALS = [ { id: "quartz", name: "Quartz", tagline: "The everyday luxury.", desc: "Ninety-three percent crushed natural quartz, seven percent resin and pigment. The result is a worktop that looks like stone, behaves like a laboratory surface, and asks almost nothing of you for thirty years. Our most-fitted material - and for good reason.", cls: "stone-quartz", showpiece: "quartz-circe", // slab shown as the big tile on the main pages props: ["Non-porous", "Scratch resistant", "Low maintenance", "No sealing"], suits: "Busy family kitchens, islands, splashbacks.", cap: "Not for outdoor use - resin degrades in direct UV.", // Fasa Stone quartz range — photos in /images/ as quartz-[slug]-slab.jpg etc. // bracket = pricing tier (1 standard · 2 premium · 3 super-premium). All set // to 1 as a placeholder — TODO: Sean to confirm the real tier per colour. // Two ranges (same quality, different pricing): "Zeal" (bracket 1) and "Exo" // (bracket 2 — small uplift). only20mm flags stones we only stock at 20mm. colours: [ { name: "Ariston", slug: "quartz-ariston", swatch: Q, bracket: 2 }, { name: "Armelia", slug: "quartz-armelia", swatch: Q, bracket: 2 }, { name: "Artic", slug: "quartz-artic", swatch: Q, bracket: 1 }, { name: "Calescato", slug: "quartz-calescato", swatch: Q, bracket: 2 }, { name: "Carmen", slug: "quartz-carmen", swatch: Q, bracket: 2, only20mm: true }, { name: "Circe", slug: "quartz-circe", swatch: Q, bracket: 1 }, { name: "Dalai", slug: "quartz-dalai", swatch: Q, bracket: 1 }, { name: "Eirene", slug: "quartz-eirene", swatch: Q, bracket: 1 }, { name: "Fausto", slug: "quartz-fausto", swatch: Q, bracket: 2, only20mm: true }, { name: "Fausto Full Body", slug: "quartz-fausto-full-body", swatch: Q, bracket: 2 }, { name: "Georgia", slug: "quartz-georgia", swatch: Q, bracket: 1 }, { name: "Iceberg", slug: "quartz-iceberg", swatch: Q, bracket: 1 }, { name: "K2", slug: "quartz-k2", swatch: Q, bracket: 2, only20mm: true }, { name: "Kells", slug: "quartz-kells", swatch: Q, bracket: 1 }, { name: "Liberty", slug: "quartz-liberty", swatch: Q, bracket: 2 }, { name: "Muse", slug: "quartz-muse", swatch: Q, bracket: 2 }, { name: "Norma", slug: "quartz-norma", swatch: Q, bracket: 2, only20mm: true }, { name: "Paradise", slug: "quartz-paradise", swatch: Q, bracket: 2 }, { name: "Patagonia", slug: "quartz-patagonia", swatch: Q, bracket: 1 }, { name: "Rhapsody", slug: "quartz-rhapsody", swatch: Q, bracket: 1 }, { name: "River Deep", slug: "quartz-river-deep", swatch: Q, bracket: 1 }, { name: "Sonoro", slug: "quartz-sonoro", swatch: Q, bracket: 2, only20mm: true }, { name: "Sweet Caroline", slug: "quartz-sweet-caroline", swatch: Q, bracket: 1 }, { name: "Tagore", slug: "quartz-tagore", swatch: Q, bracket: 1 }, { name: "Taj", slug: "quartz-taj", swatch: Q, bracket: 2, only20mm: true }, { name: "Teresa", slug: "quartz-teresa", swatch: Q, bracket: 2 }, { name: "Tosca", slug: "quartz-tosca", swatch: Q, bracket: 2 }, { name: "Violuxe", slug: "quartz-violuxe", swatch: Q, bracket: 2 }, { name: "White Shimmer", slug: "quartz-white-shimmer", swatch: Q, bracket: 1 }, { name: "White Water", slug: "quartz-white-water", swatch: Q, bracket: 1 }, { name: "Belvedere", slug: "quartz-belvedere", swatch: Q, bracket: 2 }, { name: "BVLGARI", slug: "quartz-bvlgari", swatch: Q, bracket: 1 }, { name: "Frozen", slug: "quartz-frozen", swatch: Q, bracket: 1 }, { name: "Layla", slug: "quartz-layla", swatch: Q, bracket: 1 }, { name: "Mercury", slug: "quartz-mercury", swatch: "linear-gradient(135deg, #b9bcbe, #7e8488)", bracket: 1 }, { name: "Misty Brown", slug: "quartz-misty-brown", swatch: "linear-gradient(135deg, #c9bdae, #8d8071)", bracket: 1 }, { name: "Otello", slug: "quartz-otello", swatch: Q, bracket: 2, only20mm: true }, { name: "Peace", slug: "quartz-peace", swatch: Q, bracket: 2, only20mm: true }, { name: "Rigoletto", slug: "quartz-rigoletto", swatch: Q, bracket: 2, only20mm: true }, { name: "Uyuni", slug: "quartz-uyuni", swatch: Q, bracket: 1 }, { name: "Victoria", slug: "quartz-victoria", swatch: Q, bracket: 1 }, ], }, { id: "granite", name: "Granite", tagline: "The original.", desc: "Drawn from the earth, sawn into slabs, polished by hand. No two pieces are ever alike.", cls: "stone-granite", showpiece: "granite-perecimo", // slab shown as the big tile on the main pages props: ["Heat resistant", "Extremely durable", "Unique veining"], suits: "Heavy-use kitchens, outdoor counters, fireplaces.", cap: "Some dark granites can show watermarks until sealed.", // Only the colours we currently stock/have photos for. Add more with the // same slug convention (granite-[colour]-slab.jpg / -close.jpg). colours: [ { name: "Jet Black", slug: "granite-jet-black", swatch: "linear-gradient(135deg, #1a1a1a, #050505)", bracket: 1 }, { name: "BG Black", slug: "granite-bg-black", swatch: "linear-gradient(135deg, #1b1815, #060504)", bracket: 1 }, { name: "Perecimo", slug: "granite-perecimo", swatch: "linear-gradient(135deg, #6f6a63, #36322d)", bracket: 1 }, ], }, { id: "porcelain", hidden: true, // PORCELAIN_HIDDEN — restore when stock is sufficient name: "Porcelain", tagline: "The modern hard-case.", desc: "Fired at 1,200C into a sheet harder than granite and lighter than quartz. The colours go through the body, the surface is impervious, and the finish is crisp, slim and architectural. The choice for modern kitchens and outdoor counters.", cls: "stone-porcelain", props: ["Heat-proof", "UV stable", "Stain proof", "3mm or 12mm slab", "Indoor + outdoor"], suits: "Minimalist kitchens, outdoor BBQs, vanity tops.", cap: "Thinner slabs require expert handling - which we have.", colours: [ { name: "Statuario", swatch: "linear-gradient(135deg, #f7f7f3 0 38%, #8b9295 39% 41%, #f1f0ea 42% 100%)", photo: "/images/porcelain-statuario.jpg", bracket: 1 }, { name: "Calacatta", swatch: "linear-gradient(135deg, #fbfaf4, #d0b16e 34%, #f2efe5 38%, #ffffff)", photo: "/images/porcelain-calacatta.jpg", bracket: 1 }, { name: "Travertine", swatch: "repeating-linear-gradient(0deg, #d2c2ad 0 8px, #bca98f 9px 11px, #e3d6c3 12px 20px)", photo: "/images/porcelain-travertine.jpg", bracket: 1 }, { name: "Concrete", swatch: "linear-gradient(135deg, #b4b7b8, #7d8387)", photo: "/images/porcelain-concrete.jpg", bracket: 1 }, { name: "Basalt", swatch: "linear-gradient(135deg, #43484c, #171a1e)", photo: "/images/porcelain-basalt.jpg", bracket: 1 }, { name: "Iron Grey", swatch: "linear-gradient(135deg, #55585a, #24272a 48%, #73706c 50%, #333638)", photo: "/images/porcelain-iron-grey.jpg", bracket: 1 }, ], }, ]; function Materials({ navigate }) { const visibleMaterials = MATERIALS.filter(m => !m.hidden); // PORCELAIN_HIDDEN return ( {/* Hero */}
The Lookbook - Three core materials

Stone, as
it should be chosen.

Below is an honest introduction to the core materials we hold and fit in volume - what each one is for, what it is not, and where it shines. Tap any material to browse its colours close-up, then come and see them in person at our Kilbeggan yard.

{/* Quick index */}
{visibleMaterials.map((m, i) => (
0{i + 1}
{m.name}
 ))}
{/* Material sections */} {visibleMaterials.map((m, i) => { const isReverse = i % 2 === 1; return (
{ e.preventDefault(); navigate(`materials/${m.id}`); }}>
{m.showpiece && {m.name} { e.currentTarget.style.display = "none"; }} />}
Browse {m.name.toLowerCase()} colours {"->"}
0{i + 1} - {m.tagline}

{m.name}

{m.desc}

{/* Properties grid */}
{m.props.map((p, j) => (
{p}
))}
Best for
{m.suits}
Honest caveat
{m.cap}
{ e.preventDefault(); navigate(`materials/${m.id}`); }}> Browse all {m.name.toLowerCase()} colours {"->"}
{m.colours.length} popular colours with photos · more to see in person at the yard
{ e.preventDefault(); navigate("work"); }} style={{marginTop: 36, display: "inline-flex"}}> See projects in {m.name.toLowerCase()} {"->"}
); })} {/* Showroom CTA */}
The showroom

Not sure which
Come to Kilbeggan.

Quartz, granite and ceramic slabs on rotating display in our yard, lit at kitchen-counter height. You walk between them, we answer questions, nobody pressures you. An hour from Dublin, fifty minutes from Galway.

{ e.preventDefault(); navigate("booking"); }}>Book a Showroom Visit {"->"} { e.preventDefault(); navigate("story"); }}>About the Factory
Slabs on display, Kilbeggan yard
); } /* ============================================================ MaterialColours — per-material colour viewer (#/materials/:id) Photos live in /images/[material-id]-[colour-slug].jpg. Each card layers the real photo over its CSS swatch; if the photo is missing the onError hides it and the swatch shows through, so Sean can drop images into /images/ with no code change. ============================================================ */ // Main thumbnail for a colour: the slab photo (by slug) or a legacy single photo. function slabUrl(c) { return c.slug ? "/images/" + c.slug + "-slab.jpg" : (c.photo || null); } // Candidate gallery URLs to probe for a colour, in display order (slab first). function candidateUrls(c) { if (c.slug) { const b = "/images/" + c.slug; return ["-slab", "-close", "-close-2", "-close-3", "-1", "-2", "-3", "-4", "-5", "-6", "-7", "-8"].map(s => b + s + ".jpg"); } return c.photo ? [c.photo] : []; } function MaterialColours({ materialId, navigate }) { const material = MATERIALS.find(m => m.id === materialId && !m.hidden); const [active, setActive] = React.useState(null); // colour object for the lightbox const [gallery, setGallery] = React.useState([]); // photo URLs that loaded, in order const [slide, setSlide] = React.useState(0); const touchX = React.useRef(null); // Probe the candidate photos for the open colour; keep the ones that load. // Drop more files with the same slug and they appear here automatically. React.useEffect(() => { if (!active) { setGallery([]); setSlide(0); return; } let cancelled = false; Promise.all(candidateUrls(active).map(url => new Promise(res => { const img = new Image(); img.onload = () => res(url); img.onerror = () => res(null); img.src = url; }))).then(found => { if (!cancelled) { setGallery(found.filter(Boolean)); setSlide(0); } }); return () => { cancelled = true; }; }, [active]); // Keyboard: Esc closes, arrows page the carousel React.useEffect(() => { if (!active) return; const onKey = (e) => { if (e.key === "Escape") setActive(null); else if (e.key === "ArrowRight") setSlide(s => gallery.length ? (s + 1) % gallery.length : 0); else if (e.key === "ArrowLeft") setSlide(s => gallery.length ? (s - 1 + gallery.length) % gallery.length : 0); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [active, gallery.length]); const goMaterials = (e) => { e.preventDefault(); navigate("materials"); }; const goQuotes = (e) => { e.preventDefault(); setActive(null); navigate("quotes"); }; // Unknown / mistyped material id — fail gracefully back to the index if (!material) { return (
Back to materials {"->"}
); } const hideOnError = (e) => { e.currentTarget.style.display = "none"; }; return ( {material.name} colours.
{material.tagline} } sub={material.suits ? `Best for ${material.suits.charAt(0).toLowerCase() + material.suits.slice(1)}` : undefined} />
{"<-"} All materials

A selection of our most-requested {material.name.toLowerCase()} colours. Every slab is unique — these are a guide, and the full range is on display at our Kilbeggan yard. Tap any colour to see it larger.

{material.colours.map(c => ( ))}
Found one you like?
Get a quote in this colour
Get a quote {"->"}
{active && (
setActive(null)}>
e.stopPropagation()}>
{ touchX.current = e.touches[0].clientX; }} onTouchEnd={(e) => { if (touchX.current == null || gallery.length < 2) return; const dx = e.changedTouches[0].clientX - touchX.current; if (Math.abs(dx) > 40) setSlide(s => dx < 0 ? (s + 1) % gallery.length : (s - 1 + gallery.length) % gallery.length); touchX.current = null; }}>
{gallery[slide] && {active.name}
{gallery.length > 1 && (
{gallery.map((_, i) => (
)}
{material.name}{gallery.length > 1 ? ` · ${slide + 1} of ${gallery.length}` : ""}
{active.name}
Get a quote in {active.name} {"->"}
)} ); } window.Materials = Materials; window.MaterialColours = MaterialColours; window.MATERIALS = MATERIALS;