/* IJWestern Landing — main React app Sections: TopBar · Hero · Portfolio · Method · NewLaunch · Register · Footer */ const { useState, useEffect, useRef, useMemo } = React; /* ── Project data ─────────────────────────────────────────────── */ /* The five real projects, from `Plot Details.docx` plus the status the client confirmed on 2 Sep 2026. This array drives the cards, the filter counts and the "Which ground" dropdown, so it is the single place a project's headline facts are stated on the home page. It previously held six entries of which five were fiction — Mattumandha, Golden Avenue and Nila Nagar do not exist, and the Blue Hills and Rose Garden rows carried invented plot counts, years and handover dates. Blue Hills Phase 1 is a real, older, completed project but the doc has nothing on it, so it stays off the site until the client supplies details. */ const PROJECTS = [ { id: "blue-hills-phase-2", num: "01", name: "Blue Hills Phase 2", loc: "Thekkumury, Chandranagar", statusKind: "selling", statusLabel: "Layout complete · Sales on-going", plots: 69, cents: "4.40–15", href: "blue-hills-phase-2.html", photo: "img/IMG_2215.jpg", cardPhoto: "site-images/new-images/bluehills.webp", cardVideo: { mp4: "site-images/videos/cards/bluehills.mp4", webm: "site-images/videos/cards/bluehills.webm" }, theme: "hills", /* Read by the New launch section. Move `launch` to the next project when one launches; the section follows the flag. */ launch: true, /* Intro, district, photographs and the documents line all come from PROJECT_DATA — the card renders them from there so the copy is stated once for the whole site. */ }, { id: "ratham-gardens", num: "02", name: "Ratham Gardens", loc: "Vaidhyanathapuram, Kalpathy", statusKind: "selling", statusLabel: "Layout complete · Sales on-going", plots: 36, cents: "4.40–9", href: "ratham-gardens.html", cardPhoto: "site-images/new-images/rathamgardens.webp", cardVideo: { mp4: "site-images/videos/cards/rathamgardens.mp4?v=2", webm: "site-images/videos/cards/rathamgardens.webm?v=2" }, theme: "hills", }, { id: "star-gardens", num: "03", name: "Star Gardens", loc: "Vandithavalam", statusKind: "selling", statusLabel: "Layout complete · Sales on-going", plots: 41, cents: "4.20–9.30", href: "star-gardens.html", cardPhoto: "site-images/new-images/stargardens.webp", cardVideo: { mp4: "site-images/videos/cards/stargardens.mp4", webm: "site-images/videos/cards/stargardens.webm" }, theme: "paddy", }, { id: "dream-gardens", num: "04", name: "Dream Gardens", loc: "Thrippalur", statusKind: "selling", statusLabel: "Layout complete · Sales on-going", plots: 21, cents: "5.30–10", href: "dream-gardens.html", cardPhoto: "site-images/new-images/dreamgardens.webp", cardVideo: { mp4: "site-images/videos/cards/dreamgardens.mp4", webm: "site-images/videos/cards/dreamgardens.webm" }, theme: "mist", }, { id: "rose-gardens", num: "05", name: "Rose Gardens", loc: "Puthussery", statusKind: "progress", statusLabel: "Layout in-progress", plots: 15, cents: "5–7.5", href: "rose-gardens.html", cardPhoto: "site-images/new-images/rosegardens.webp", cardVideo: { mp4: "site-images/videos/cards/rosegardens.mp4", webm: "site-images/videos/cards/rosegardens.webm" }, theme: "dawn", }, ]; /* ── Hero ───────────────────────────────────────────────────────── Step 10 (4 Sep 2026). One photograph of the Palakkad paddy, held at viewport height in a rounded frame that clears the floating header and both edges. The geometry is all in styles.css under "Hero"; what lives here is the scroll motion and the copy. Motion. On load the frame opens and the photograph settles out of a slight over-scale (CSS). On scroll the photograph drifts down by HERO_PARALLAX of the frame's height while the copy lifts and fades the other way — the difference in the two speeds is the parallax. Both transforms are written straight to the node inside a requestAnimationFrame rather than through state: a re-render per scroll event would re-render the whole home page, carousel included. That is the same reason the About page's map tilt is written this way. Under prefers-reduced-motion the handler never attaches, so nothing moves at all. HERO_PARALLAX must stay at or below --hero-drift in styles.css, or the photograph runs out of slack and shows the frame beneath it. */ const HERO_PARALLAX = 0.08; // photo drift, as a fraction of frame height const HERO_COPY_LIFT = 44; // px the copy rises across the same travel function Hero() { const sectionRef = useRef(null); const photoRef = useRef(null); const copyRef = useRef(null); useEffect(() => { const section = sectionRef.current; const photo = photoRef.current; const copy = copyRef.current; if (!section || !photo) return; if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return; let raf = 0; const apply = () => { raf = 0; const h = section.offsetHeight || 1; const p = Math.min(1, Math.max(0, window.scrollY / h)); photo.style.transform = "translate3d(0, " + (p * h * HERO_PARALLAX).toFixed(2) + "px, 0)"; if (copy) { copy.style.transform = "translate3d(0, " + (-p * HERO_COPY_LIFT).toFixed(2) + "px, 0)"; copy.style.opacity = String(Math.max(0, 1 - p * 1.4)); } }; const onScroll = () => { if (!raf) raf = requestAnimationFrame(apply); }; apply(); window.addEventListener("scroll", onScroll, { passive: true }); window.addEventListener("resize", onScroll); return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); if (raf) cancelAnimationFrame(raf); }; }, []); return (
{/* Three sizes off one 5464px original — the full file is 2.4MB and this is the first thing the page paints. tools/build-hero-image.py rebuilds them. */} Paddy fields, coconut palms and a village road under a bright morning sky in Palakkad
{/* Lifts the light at the top of the frame so ink type always has ground to stand on. See .hero-sky in styles.css. */}
); } /* ── New launch ──────────────────────────────────────────────────── A carousel of all five communities in one design (step 4, 3 Sep 2026). The card the client approved is unchanged; there are simply five of them now, side by side in a scroll-snap track, and the entry carrying `launch: true` leads. Move that flag when the next project launches and the order follows — nothing else to rewrite. Card content comes from PROJECT_DATA, which is the same source the project pages read, so an intro or a document list is stated in one place only. The headline figures still come from the PROJECTS row beside them; the two agree, and CLAUDE.md says to keep them so. Motion: the track advances on its own, pauses on hover and on focus, stays put for nine seconds after the user scrolls it themselves, and does not auto-advance at all under prefers-reduced-motion. */ const NL_COUNT_WORDS = ["no", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "eleven", "twelve"]; /* "Form 5 & 6 approved · seven documents open for inspection", built from the project's own document list rather than written out per project — five hand-written copies of one sentence would drift. */ function nlDocsLine(id) { const data = (typeof PROJECT_DATA !== "undefined" && PROJECT_DATA[id]) || null; const docs = (data && data.documents) || []; if (!docs.length) return ""; const approved = docs.filter(d => d.st === "Approved").map(d => d.nm); const word = NL_COUNT_WORDS[docs.length] || String(docs.length); const tail = word + " document" + (docs.length === 1 ? "" : "s") + " open for inspection"; if (!approved.length) return tail.charAt(0).toUpperCase() + tail.slice(1); return approved.join(" · ") + " approved · " + tail; } function LaunchCard({ p, lead, active, held, reduced, index, total, onSchedule }) { const data = (typeof PROJECT_DATA !== "undefined" && PROJECT_DATA[p.id]) || {}; /* One photograph per card, the same new image the portfolio card uses. The project pages keep their own galleries. */ const shots = p.cardPhoto ? [{ src: p.cardPhoto, cap: projectNameInline(p.name) }] : (p.photo ? [{ src: p.photo, cap: p.name }] : []); const [shot, setShot] = useState(0); /* Cross-fade the photographs of the card being looked at. Only Blue Hills has more than one today; the rest fall through. */ useEffect(() => { if (reduced || held || !active || shots.length < 2) return; const t = setInterval(() => setShot(s => (s + 1) % shots.length), 5200); return () => clearInterval(t); }, [reduced, held, active, shots.length]); const figures = [ { v: String(p.plots), k: "Plots" }, { v: p.cents, u: "cents", k: "Plot sizes" }, { v: "Purayidam", k: "Classification" }, ]; /* Price left the cards on 2 Nov and Total area on 3 Nov (now Classification); road frontage takes the fourth tile, read from the project page's own spec rows. */ const frontage = pcFrontage(p.id); if (frontage) figures.push({ v: frontage, u: "m", k: "Frontage" }); const intro = data.intro || ""; const docs = nlDocsLine(p.id); const district = data.district || p.district || ""; const place = p.loc + (district ? " · " + district : ""); return (
{shots.length > 0 ? shots.map((s, i) => ( {s.cap} )) : }
{shots.length > 1 && (
{shots.map((s, i) => (
)}
{lead ? Latest launch : No. {p.num}} {p.statusLabel}

{place}

{figures.map(f => (
{f.v}{f.u && {f.u}}
{f.k}
))}
{intro &&

{intro}

} {docs && (

{docs}

)}
{/* Opens the visit form on this card's project (client, 3 Nov). */} See the project
); } function NewLaunch({ launchRef, onSchedule }) { /* The launch project leads; the rest keep their portfolio order. */ const order = useMemo(() => { const i = PROJECTS.findIndex(x => x.launch); return i > 0 ? [PROJECTS[i]].concat(PROJECTS.filter((_, j) => j !== i)) : PROJECTS.slice(); }, []); const total = order.length; const [active, setActive] = useState(0); const [held, setHeld] = useState(false); /* The sliver of the next card is what says the row scrolls, but a hard cut through a sentence reads as a bug, so the track is masked wherever a card is only half shown. Snapped, that is the right edge — except on the last card, where the overhang is on the left. */ const [atEnd, setAtEnd] = useState(false); const [ring, setRing] = useState(false); const trackRef = useRef(null); const secRef = useRef(null); const activeRef = useRef(0); /* Auto-advance stands down for this long after a manual scroll. */ const quietUntil = useRef(0); /* Our own smooth scrolls must not read as a manual one. */ const selfUntil = useRef(0); const reduced = typeof window !== "undefined" && window.matchMedia ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : false; const setSection = (el) => { secRef.current = el; if (launchRef) launchRef.current = el; }; const goTo = (i, smooth) => { const track = trackRef.current; if (!track || !total) return; const n = ((i % total) + total) % total; const slide = track.children[n]; if (!slide) return; const left = track.scrollLeft + slide.getBoundingClientRect().left - track.getBoundingClientRect().left; selfUntil.current = Date.now() + 1200; activeRef.current = n; setActive(n); if (typeof track.scrollTo === "function") { track.scrollTo({ left, behavior: (reduced || smooth === false) ? "auto" : "smooth" }); } else { track.scrollLeft = left; } }; /* Which card is under the left edge — the source of truth for the dots, so dragging the track and pressing a dot agree. */ useEffect(() => { const track = trackRef.current; if (!track) return; let raf = null; const onScroll = () => { if (Date.now() > selfUntil.current) quietUntil.current = Date.now() + 9000; if (raf) return; raf = requestAnimationFrame(() => { raf = null; const base = track.getBoundingClientRect().left; let best = 0; let bestD = Infinity; Array.prototype.forEach.call(track.children, (el, i) => { const d = Math.abs(el.getBoundingClientRect().left - base); if (d < bestD) { bestD = d; best = i; } }); activeRef.current = best; setActive(a => (a === best ? a : best)); setAtEnd(track.scrollLeft >= track.scrollWidth - track.clientWidth - 2); }); }; onScroll(); track.addEventListener("scroll", onScroll, { passive: true }); window.addEventListener("resize", onScroll, { passive: true }); return () => { track.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); if (raf) cancelAnimationFrame(raf); }; }, []); useEffect(() => { if (reduced || held || total < 2) return; const t = setInterval(() => { if (document.hidden) return; /* No auto-advance on phones: a card is taller than the screen there and would slide away mid-read. Arrows, dots and swipe still work. */ if (window.matchMedia("(max-width: 560px)").matches) return; if (Date.now() < quietUntil.current) return; goTo(activeRef.current + 1); }, 6800); return () => clearInterval(t); }, [reduced, held, total]); /* Parallax: the frames drift slower than the page. One listener for the section, since every card sits at the same height. */ useEffect(() => { if (reduced) return; let raf = null; const onScroll = () => { if (raf) return; raf = requestAnimationFrame(() => { raf = null; const el = secRef.current; if (!el) return; const r = el.getBoundingClientRect(); const mid = r.top + r.height / 2 - window.innerHeight / 2; const shift = Math.max(-34, Math.min(34, (-mid / window.innerHeight) * 42)); el.style.setProperty("--par", shift.toFixed(1) + "px"); }); }; onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => { window.removeEventListener("scroll", onScroll); if (raf) cancelAnimationFrame(raf); }; }, [reduced]); const onKeyDown = (e) => { if (e.key === "ArrowRight") { e.preventDefault(); goTo(activeRef.current + 1); } else if (e.key === "ArrowLeft") { e.preventDefault(); goTo(activeRef.current - 1); } }; return (
setHeld(true)} onMouseLeave={() => setHeld(false)} onFocus={() => setHeld(true)} onBlur={() => setHeld(false)}>
{ if (e.target === e.currentTarget && e.target.matches(":focus-visible")) setRing(true); }} onBlur={(e) => { if (e.target === e.currentTarget) setRing(false); }} onPointerDown={() => { quietUntil.current = Date.now() + 9000; }}> {order.map((p, i) => ( ))}
{order.map((p, i) => (
{/* Chevrons, not the site's diagonal arrow: rotated for "back", that arrow read as up and down (client, 3 Nov). */}
); } /* ── Portfolio ────────────────────────────────────────────────── */ /* Per-plot road frontage, "10–20", out of the project page's own spec rows. */ const pcFrontage = (id) => { const d = typeof PROJECT_DATA !== "undefined" && PROJECT_DATA[id]; const row = d && d.specs && d.specs.flatMap(g => g.rows).find(r => r.k === "Road frontage"); return row ? row.v.replace(/\s*–\s*/g, "–") : null; }; function Portfolio({ projectsRef }) { const [filter, setFilter] = useState("All"); const counts = useMemo(() => ({ All: PROJECTS.length, "Sales on-going": PROJECTS.filter(p => p.statusKind === "selling").length, "Layout in-progress": PROJECTS.filter(p => p.statusKind === "progress").length, }), []); const KIND_FOR = { "Sales on-going": "selling", "Layout in-progress": "progress" }; const visible = filter === "All" ? PROJECTS : PROJECTS.filter(p => p.statusKind === KIND_FOR[filter]); return (

Five grounds.
One Palakkad.

Every community is on land we identified, surveyed, and developed ourselves.

{["All", "Sales on-going", "Layout in-progress"].map(k => ( ))}
{visible.map((p, i) => (
{(p.cardPhoto || p.photo) ? : } {p.cardVideo && }
{p.statusLabel}
{p.loc}
{/* Buy now opens on hover (client, 3 Nov); the plot figures that sat here went. Decorative: the card is the link. */}
))}
); } /* ── Method ───────────────────────────────────────────────────── */ function Method() { const steps = [ { num: "01", title: "See", desc: "Every plot we develop is on the platform: mapped, measured, photographed, and documented before you contact us.", icn: MethodIcons.see }, { num: "02", title: "Walk", desc: "Visit the land at your own pace. No broker between you and the ground. Bring family. Bring an architect.", icn: MethodIcons.walk }, { num: "03", title: "Verify", desc: "Patta, encumbrance, title: open to you from day one. Our legal team walks you through every document.", icn: MethodIcons.verify }, { num: "04", title: "Own", desc: "Registration, handover, and continued support after. We are accountable to the land long after you've bought it.", icn: MethodIcons.own }, ]; return (

From first look
to final signature.

One company, every step. No appointments to see documents, and no forms to view the land.

{steps.map((s, i) => { const Icon = s.icn; return (
{s.title}

{s.desc}

); })}
); } /* ── Register Interest ─────────────────────────────────────────── The form is forms.jsx's `VisitForm`, the same one every other page opens in a modal; with no project passed, it asks the reader to choose one. What is left here is the section around it: the headline, the lead and the three points, which are home-page framing and do not travel into the modal. */ function RegisterInterest({ formRef }) { return (

One form is
all it takes.

Tell us which ground you'd like to walk. We'll send the documents, the map, and a time. No follow-up calls. You hear from us, in writing, within one working day.

No middlemen
You speak directly with our team.
Documents first
Patta, EC, and survey before the meeting.
One working day
A written reply, every time.
); } /* ── Footer ───────────────────────────────────────────────────── */ /* ── App ──────────────────────────────────────────────────────── */ function App() { const [activeSection, setActiveSection] = useState(null); const launchRef = useRef(null); const projectsRef = useRef(null); const formRef = useRef(null); // The launch cards open the visit form on their own project. `visitOn` // outlives `visit` so the modal keeps its project while it fades out. const [visit, setVisit] = useState(false); const [visitOn, setVisitOn] = useState(null); const openVisitOn = React.useCallback((name) => { setVisitOn(name); setVisit(true); }, []); const closeVisit = React.useCallback(() => setVisit(false), []); const jump = (ref) => { if (!ref.current) return; const top = ref.current.getBoundingClientRect().top + window.scrollY - 56; window.scrollTo({ top, behavior: "smooth" }); }; // Track active navigation section based on scroll position useEffect(() => { const sections = [ { id: 'projects', selector: '#projects' }, { id: 'method', selector: '#method' }, { id: 'register', selector: '#register' }, ]; const handleScroll = () => { let mostVisibleSection = null; let maxVisibleHeight = 0; sections.forEach(section => { const el = document.querySelector(section.selector); if (!el) return; const rect = el.getBoundingClientRect(); const windowHeight = window.innerHeight; // Calculate how much of this section is visible in the viewport const visibleTop = Math.max(0, rect.top); const visibleBottom = Math.min(windowHeight, rect.bottom); const visibleHeight = Math.max(0, visibleBottom - visibleTop); // Track which section has the most visible area on screen if (visibleHeight > maxVisibleHeight) { maxVisibleHeight = visibleHeight; mostVisibleSection = section.id; } }); // Only set active section if a section is meaningfully visible (more than 50px) if (maxVisibleHeight > 50) { setActiveSection(mostVisibleSection); } else { setActiveSection(null); } }; window.addEventListener('scroll', handleScroll); handleScroll(); // Call once on mount return () => window.removeEventListener('scroll', handleScroll); }, []); // Reveal on scroll — observes .reveal / .reveal-x / .reveal-fade. // A MutationObserver picks up elements rendered after mount (e.g. when // the portfolio filter swaps cards) and starts observing those too. useEffect(() => { const SEL = ".reveal, .reveal-x, .reveal-fade"; const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } }); }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" }); const observe = (root) => { const els = root.matches?.(SEL) ? [root] : []; root.querySelectorAll?.(SEL).forEach((el) => els.push(el)); els.forEach((el) => { if (!el.classList.contains("in")) io.observe(el); }); }; observe(document.body); const mo = new MutationObserver((muts) => { muts.forEach((m) => m.addedNodes.forEach((n) => { if (n.nodeType === 1) observe(n); })); }); mo.observe(document.body, { childList: true, subtree: true }); return () => { io.disconnect(); mo.disconnect(); }; }, []); return ( <> jump(formRef)} />