/* ============================================================ Rainbow Group — sections.jsx Home body sections: Manifesto, Numbers, Work, Services, Clients, Testimonials, Leadership, Contact (+inline footer). Per DESIGN-SYSTEM.md §5.6–5.13. ============================================================ */ const { useState: useStateSx, useEffect: useEffectSx, useRef: useRefSx } = React; /* ---------- PROJECTS data (home Work) ---------- */ const PROJECTS = [ { id: '001', name: 'Haute Dolci', nameAr: 'هوت دولچي', year: '2025', loc: 'Kuwait', scope: 'Facade · GRG dome · Joinery', type: 'Hospitality', href: 'Haute Dolci - Case Study.html', imgs: ['assets/projects/hot-dolce-3.jpeg','assets/projects/hot-dolce-1.jpeg','assets/projects/hot-dolce-2.jpeg','assets/projects/hot-dolce-4.jpeg','assets/projects/hot-dolce-5.jpeg'] }, { id: '002', name: 'Tamdeen Square', nameAr: 'تمدين سكوير', year: '2022', loc: 'Salmiya', scope: 'Fit-out · Joinery', type: 'Residential', href: 'Tamdeen Square - Case Study.html', imgs: ['assets/projects/tamdeen-square.jpg','assets/projects/tamdeen-square-2.jpg','assets/projects/tamdeen-3.jpg','assets/projects/tamdeen-4.jpg'] }, { id: '003', name: 'Lexus Kuwait Showroom', nameAr: 'صالة لكزس', year: '2021', loc: 'Shuwaikh', scope: 'Showroom fit-out', type: 'Retail', href: 'Lexus - Case Study.html', imgs: ['assets/projects/lexus.jpg','assets/projects/lexus-2.png','assets/projects/lexus-3.png'] }, { id: '004', name: '360 Mall — Skylight Wing', nameAr: '٣٦٠ مول', year: '2023', loc: 'Zahra', scope: 'Ceilings · Finishes', type: 'Retail', href: '360 Mall - Case Study.html', imgs: ['assets/projects/360-skylight.png','assets/projects/360-mall.jpg','assets/projects/360-3.png'] }, { id: '005', name: 'Siddiqa Fatima Zahra Mosque', nameAr: 'مسجد السيدة فاطمة الزهراء', year: '2020', loc: 'Mahboula', scope: 'GRG dome · Specialty paint', type: 'Religious', href: 'Mosque - Case Study.html', imgs: ['assets/projects/fatima-zahra-mosque.png','assets/projects/mosque-2.jpg','assets/projects/mosque-3.webp'] }, { id: '007', name: 'Four Points by Sheraton', nameAr: 'فور بوينتس شيراتون', year: '2020', loc: 'Kuwait', scope: 'Hospitality fit-out', type: 'Hospitality', href: '#007', imgs: ['assets/projects/four-points.jpg','assets/projects/four-points-2.jpg','assets/projects/four-points-3.jpg'] }, { id: '008', name: 'Liwan Mall', nameAr: 'ليوان مول', year: '2021', loc: 'Kuwait', scope: 'Retail fit-out', type: 'Retail', href: '#008', imgs: ['assets/projects/liwan-mall.jpg'] }, { id: '009', name: 'Gate Mall', nameAr: 'قيت مول', year: '2022', loc: 'Egaila', scope: 'Ceilings · Joinery', type: 'Retail', href: '#009', imgs: ['assets/projects/gate-mall.jpg','assets/projects/gate-mall-2.jpg','assets/projects/gate-mall-3.jpg'] }, ]; /* ============================================================ Manifesto (§01 sidecar under Heritage) ============================================================ */ function Manifesto() { const ref = useReveal(); return (
"True luxury lies in the details. Our ethos is built on the intersection of Quality, Detail, and Efficiency — from logistical planning to the final brushstroke."
— Asif Bhati, CEO

A building is finished by a thousand quiet decisions — the radius of a plaster return, the joint between stone and wood, the temperature of a gold leaf. We keep those decisions with us so the architect’s drawing survives the journey.

); } /* ============================================================ Numbers — dark with timelapse video bg ============================================================ */ function Numbers() { const ref = useReveal(); return (
); } /* ============================================================ Work — editorial index rows w/ floating image preview ============================================================ */ function Work() { const ref = useReveal(); const [hover, setHover] = useStateSx(null); const [pos, setPos] = useStateSx({ x: 0, y: 0 }); const [frame, setFrame] = useStateSx(0); const [isMobile, setIsMobile] = useStateSx(false); const timerRef = useRefSx(null); const rowRefs = useRefSx([]); /* Detect mobile viewport */ useEffectSx(() => { const mq = window.matchMedia('(max-width: 900px)'); const check = () => setIsMobile(mq.matches); check(); if (mq.addEventListener) mq.addEventListener('change', check); else mq.addListener(check); return () => { if (mq.removeEventListener) mq.removeEventListener('change', check); else mq.removeListener(check); }; }, []); /* Image frame cycling */ useEffectSx(() => { if (hover === null) { if (timerRef.current) { clearInterval(timerRef.current); timerRef.current = null; } setFrame(0); return; } const imgs = PROJECTS[hover].imgs; timerRef.current = setInterval(() => { setFrame(f => (f + 1) % imgs.length); }, 900); return () => { if (timerRef.current) clearInterval(timerRef.current); }; }, [hover]); /* Mobile: scroll-based activation. Find the project row whose vertical centre is closest to the upper-third focal zone of the viewport; activate its preview when within range. Clear once the section leaves view. */ useEffectSx(() => { if (!isMobile) return; let raf = null; const compute = () => { raf = null; const vh = window.innerHeight; const focalY = vh * 0.42; let bestIdx = null; let bestDist = Infinity; for (let i = 0; i < PROJECTS.length; i++) { const el = rowRefs.current[i]; if (!el) continue; const rect = el.getBoundingClientRect(); if (rect.bottom < 0 || rect.top > vh) continue; const rowCentre = rect.top + rect.height / 2; const dist = Math.abs(rowCentre - focalY); if (dist < bestDist) { bestDist = dist; bestIdx = i; } } // Focal band ≈ 30 % of viewport height around focalY if (bestIdx !== null && bestDist < vh * 0.30) setHover(bestIdx); else setHover(null); }; const onScroll = () => { if (raf == null) raf = requestAnimationFrame(compute); }; window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll); compute(); return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); if (raf != null) cancelAnimationFrame(raf); }; }, [isMobile]); return (
setHover(null)} onMouseMove={isMobile ? undefined : (e) => setPos({ x: e.clientX, y: e.clientY })}>
{isMobile ? 'Scroll' : 'Hover'} {isMobile ? '↓' : '↘'}
{PROJECTS.map((p, i) => { const clickable = !p.href.startsWith('#'); return ( { rowRefs.current[i] = el; }} href={p.href} data-cursor-label={clickable ? 'VIEW' : 'SOON'} className="work-row" style={{ display: 'grid', gridTemplateColumns: '70px 1.4fr 1fr auto 1.2fr auto', gap: 24, padding: '28px 0', borderTop: i === 0 ? 'none' : '1px solid var(--rule)', borderBottom: i === PROJECTS.length - 1 ? '1px solid var(--rule)' : 'none', opacity: hover !== null && hover !== i ? 0.35 : 1, transition: 'opacity 0.35s ease', alignItems: 'baseline', color: 'inherit', }} > {p.id}
setHover(i)} onMouseLeave={isMobile ? undefined : () => setHover(null)} data-cursor-label={clickable ? 'PREVIEW' : 'SOON'} style={{ position: 'relative', display: 'inline-block', paddingBottom: 2, borderBottom: hover === i ? '1px solid var(--gold)' : '1px solid transparent', transition: 'border-color 0.3s ease', }} > {p.name} {clickable ? ↗ : null}
{p.nameAr}
{p.loc} {p.type} {p.scope} {clickable ? 'View case study →' : 'On request'} ); })}
Showing 8 of 500+ — full portfolio on request Request full portfolio →
{/* Floating preview — portaled to body so the transformed .reveal ancestor doesn't act as a containing block and position: fixed actually obeys the viewport. Desktop: follows the cursor with a tilt. Mobile: pinned to the upper-right, smaller, untilted. */} {hover !== null && typeof document !== 'undefined' ? ReactDOM.createPortal(
{PROJECTS[hover].id} · {PROJECTS[hover].loc}
, document.body ) : null}
); } /* ============================================================ Services — 5 columns ============================================================ */ const SERVICES_DATA = [ { n: '01', en: 'Acoustic & Ceilings', ar: 'الأسقف والصوتيات', items: ['Acoustical ceilings', 'Perforated wood ceilings', 'Gypsum, GRG & GRC works'] }, { n: '02', en: 'Wall Solutions', ar: 'حلول الجدران', items: ['EFS', 'Exterior facades', 'Stone cladding & ceramic', 'Wall panels', 'Gypsum, GRG & GRC works'] }, { n: '03', en: 'Flooring', ar: 'الأرضيات', items: ['Luxury vinyl tiles (LVT)', 'Carpet tiles', 'Raised access floors', 'Natural & composite stone', 'Epoxy'] }, { n: '04', en: 'Architectural Interiors', ar: 'التصميم الداخلي', items: ['Demountable partitions', 'Wood works & joinery', 'Interior moss walls', 'Furniture', 'Toilet fixtures'] }, { n: '05', en: 'Specialised Finishes', ar: 'تشطيبات خاصة', items: ['Ventilated facade (fibre cement)', 'Interior painting', 'Antique gold / silver painting'] }, ]; function Services() { const ref = useReveal(); return (
{SERVICES_DATA.map((s, i) => (
{s.n}
{s.en}
{s.ar}
    {s.items.map((it) => (
  • ◆ {it}
    • ))}
))}

Every trade above is delivered in-house or through long-term partnerships with Knauf, Mannington, Recer Cerâmica, Sitab and Strähle — product partners we have worked with for a decade.

Discuss scope →
Product partners · شركاء المنتج In trade since 2008 · hover to pause
{/* One pass */}
Knauf AMF
Mannington
Recer Cerâmica
Sitab
Strähle
{/* Duplicate pass for seamless loop */}
); } /* ============================================================ Clients — dark grid ============================================================ */ const CLIENT_LOGOS = [ { name: 'Al Shaya', file: 'alshaya.png' }, { name: 'Tamdeen', file: 'tamdeen.png' }, { name: 'JW Marriott', file: 'jw-marriott.png' }, { name: 'Lexus', file: 'lexus.png' }, { name: 'AGI Architects', file: 'agi.png' }, { name: 'M.A. Kharafi & Sons', file: 'kharafi.png' }, { name: 'Ahmadiah Contracting', file: 'ahmadiah.png' }, { name: 'Lulu Group', file: 'lulu.png' }, { name: 'Holiday Inn', file: 'holiday-inn.png' }, { name: 'CGC Kuwait', file: 'cgc.png' }, ]; function Clients() { const ref = useReveal(); return (
Clients · عملاء

Trusted by thirty houses in the Gulf.

{CLIENT_LOGOS.map((c, i) => (
{`0${(i % 9) + 1}`} {c.name}
))}

Also engaged by: Ministry of Finance · AGI Architects · Sayed Hamid Behbihani & Sons · The Sultan Center · The Interior Collaboratives · First United · Al Yousifi · UPS Kuwait · Symphony Hotel · Grand Hyatt · Al Rasheed Group · Sheikh Mubarak Al Sabah Estate · Gassan Al Khalid Residential · and more.

); } /* ============================================================ Testimonials ============================================================ */ function Testimonials() { const ref = useReveal(); const QUOTES = [ { quote: 'Attention to detail and quality is exemplary for all others in the business.', name: 'Sameh Elashry', role: 'Project Manager', project: 'First United · Ministry Complex' }, { quote: 'Takes their work very seriously, executing with precision and meeting quality standards.', name: 'Tarek Najia', role: 'Project Manager', project: 'The Sultan Center · SC Ahmadi' }, { quote: 'Completed the project to our full satisfaction. We wish them all the best for the future.', name: 'Krishnakumar', role: 'Ahmadiah Contracting & Trading', project: 'Tower Fit-out' }, ]; return (
{QUOTES.map((q) => (
— {q.project}
{q.quote}
{q.name}
{q.role}
))}
); } /* ============================================================ Leadership — 4 cards ============================================================ */ const TEAM = [ { name: 'Asif Bhati', ar: 'آصف بھاٹی', role: 'Chief Executive Officer', years: '25', init: 'AB' }, { name: 'Rizwan Bhati', ar: 'رضوان بھاٹی', role: 'General Manager', years: '18', init: 'RB' }, { name: 'George Paul', ar: 'جورج بول', role: 'Director', years: '20', init: 'GP' }, ]; function Leadership() { const ref = useReveal(); return (
{TEAM.map((t, i) => (
{`0${i + 1} / 0${TEAM.length}`}
PORTRAIT {t.init}
{t.name}
{t.ar}
{t.role}
{t.years} years in the trade
))}

Supported by site engineers, safety supervisors, and skilled tradesmen — 100+ personnel across all active sites.

); } /* ============================================================ Local FooterCol helper (home-only; shared-chrome has its own) ============================================================ */ function FooterColH({ title, items }) { return (
{title}
); } /* ============================================================ Contact + inline footer (home §07) ============================================================ */ function Field({ label, ar, value, onChange, type = 'text', textarea = false }) { const [focus, setFocus] = useStateSx(false); return (