Upload 29 files

src/App.jsx

@@ -0,0 +1,40 @@
+import React, { useEffect } from 'react';
+import { Routes, Route, useLocation } from 'react-router-dom';
+import Header from './components/Header.jsx';
+import Footer from './components/Footer.jsx';
+import Home from './pages/Home.jsx';
+import About from './pages/About.jsx';
+import ProjectsSection from './pages/ProjectsSection.jsx';
+import ProjectDetail from './pages/ProjectDetail.jsx';
+import Contact from './pages/Contact.jsx';
+import DotCursor from './components/DotCursor.jsx';
+
+export default function App() {
+  const { pathname, hash } = useLocation();
+
+  useEffect(() => {
+    if (hash) {
+      const el = document.querySelector(hash);
+      if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    } else {
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+  }, [pathname, hash]);
+
+  return (
+    <div className="flex min-h-screen flex-col">
+      <Header />
+      <main id="main-content" className="flex-1 focus:outline-none" tabIndex={-1}>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/about" element={<About />} />
+          <Route path="/projects/:sectionId" element={<ProjectsSection />} />
+          <Route path="/project/:slug" element={<ProjectDetail />} />
+          <Route path="/contact" element={<Contact />} />
+        </Routes>
+      </main>
+      <Footer />
+      <DotCursor />
+    </div>
+  );
+}

src/components/ContactForm.jsx

@@ -0,0 +1,169 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+
+const DEFAULT_ENDPOINT = 'https://formsubmit.co/ajax/jadeinfrapune@gmail.com';
+
+export default function ContactForm() {
+  const [status, setStatus] = useState({ state: 'idle', message: '' });
+
+  async function onSubmit(e) {
+    e.preventDefault();
+    const form = new FormData(e.currentTarget);
+    const payload = {
+      name: String(form.get('name') || '').trim(),
+      email: String(form.get('email') || '').trim(),
+      phone: String(form.get('phone') || '').trim(),
+      message: String(form.get('message') || '').trim()
+    };
+
+    if (!payload.name || !payload.email || !payload.phone || !payload.message) {
+      setStatus({
+        state: 'error',
+        message: 'All fields are required. Please complete the form.'
+      });
+      return;
+    }
+
+    const namePattern = /^[A-Za-z\s]{2,60}$/;
+    if (!namePattern.test(payload.name)) {
+      setStatus({
+        state: 'error',
+        message: 'Please enter a valid name using alphabets only.'
+      });
+      return;
+    }
+
+    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailPattern.test(payload.email)) {
+      setStatus({
+        state: 'error',
+        message: 'Please enter a valid email address.'
+      });
+      return;
+    }
+
+    const phonePattern = /^[0-9]{10}$/;
+    if (!phonePattern.test(payload.phone)) {
+      setStatus({
+        state: 'error',
+        message: 'Please enter a valid 10-digit phone number.'
+      });
+      return;
+    }
+
+    setStatus({ state: 'loading', message: '' });
+    try {
+      const endpoint = import.meta.env.VITE_CONTACT_ENDPOINT || DEFAULT_ENDPOINT;
+      const structuredMessage = [
+        'New enquiry received via jadeinfra.in contact form:',
+        '',
+        `Name   : ${payload.name}`,
+        `Email  : ${payload.email}`,
+        `Phone  : ${payload.phone}`,
+        '',
+        'Message:',
+        payload.message
+      ].join('\n');
+
+      await axios.post(
+        endpoint,
+        {
+          name: payload.name,
+          email: payload.email,
+          phone: payload.phone,
+          message: payload.message,
+          _subject: 'New enquiry via jadeinfra.in contact form',
+          _template: 'box',
+          _replyto: payload.email,
+          _captcha: 'false',
+          content: structuredMessage
+        },
+        {
+          headers: { 'Content-Type': 'application/json' }
+        }
+      );
+      setStatus({ state: 'success', message: 'Thanks! We will get back to you shortly.' });
+      e.currentTarget.reset();
+    } catch (err) {
+      setStatus({
+        state: 'error',
+        message:
+          'Sorry, there was an issue sending your message. Please try again or email us directly.'
+      });
+    }
+  }
+
+  return (
+    <form className="space-y-4" onSubmit={onSubmit} noValidate aria-labelledby="contact-heading">
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+        <div>
+          <label htmlFor="name" className="block text-sm font-medium text-slate-700">Name</label>
+          <input
+            id="name"
+            name="name"
+            required
+            pattern="[A-Za-z\s]{2,60}"
+            autoComplete="name"
+            className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2
+                       focus:outline-none focus:ring-2 focus:ring-brand-600"
+          />
+        </div>
+        <div>
+          <label htmlFor="email" className="block text-sm font-medium text-slate-700">Email</label>
+          <input
+            id="email"
+            name="email"
+            type="email"
+            required
+            pattern="^[^\s@]+@[^\s@]+\.[^\s@]+$"
+            autoComplete="email"
+            className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2
+                       focus:outline-none focus:ring-2 focus:ring-brand-600"
+          />
+        </div>
+        <div className="md:col-span-2">
+          <label htmlFor="phone" className="block text-sm font-medium text-slate-700">Phone</label>
+          <input
+            id="phone"
+            name="phone"
+            type="tel"
+            required
+            pattern="[0-9]{10}"
+            inputMode="numeric"
+            autoComplete="tel"
+            className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2
+                       focus:outline-none focus:ring-2 focus:ring-brand-600"
+          />
+        </div>
+        <div className="md:col-span-2">
+          <label htmlFor="message" className="block text-sm font-medium text-slate-700">Message</label>
+          <textarea
+            id="message"
+            name="message"
+            required
+            rows="5"
+            className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2
+                       focus:outline-none focus:ring-2 focus:ring-brand-600"
+          ></textarea>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-3">
+        <button type="submit" className="btn btn-primary" aria-live="polite">
+          Send Message
+        </button>
+        {status.state === 'loading' && (
+          <span role="status" className="text-sm text-slate-600">Sending…</span>
+        )}
+        {status.state === 'success' && (
+          <span className="text-sm text-green-700">{status.message}</span>
+        )}
+        {status.state === 'error' && (
+          <span className="text-sm text-red-700">{status.message}</span>
+        )}
+      </div>
+    </form>
+  );
+}
+
+

src/components/DotCursor.jsx

@@ -0,0 +1,116 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+const INTERACTIVE_SELECTOR = 'a, button, [role="button"], input, textarea, select, .cursor-interactive';
+
+export default function DotCursor() {
+  const [enabled, setEnabled] = useState(false);
+  const dotRef = useRef(null);
+  const frameRef = useRef(null);
+  const latestPosRef = useRef({ x: 0, y: 0 });
+  const activeRef = useRef(false);
+  const visibleRef = useRef(false);
+  const hoveredElementRef = useRef(null);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const isFinePointer = window.matchMedia('(pointer: fine)').matches;
+    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+    if (!isFinePointer || prefersReducedMotion) {
+      return undefined;
+    }
+
+    setEnabled(true);
+    const body = document.body;
+    body.classList.add('dot-cursor-enabled');
+
+    const update = () => {
+      frameRef.current = null;
+      const el = dotRef.current;
+      if (!el) return;
+      const { x, y } = latestPosRef.current;
+      const isActive = activeRef.current;
+      const isVisible = visibleRef.current;
+      // Use will-change for better performance
+      el.style.willChange = 'transform';
+      el.style.transform = `translate3d(${x}px, ${y}px, 0) translate(-50%, -50%) scale(${isActive ? 2.2 : 1})`;
+      el.style.opacity = isVisible ? '1' : '0';
+      el.dataset.state = isActive ? 'active' : 'rest';
+    };
+
+    const requestUpdate = () => {
+      // Cancel any pending frame and schedule new one immediately
+      if (frameRef.current) {
+        cancelAnimationFrame(frameRef.current);
+      }
+      frameRef.current = requestAnimationFrame(update);
+    };
+
+    const handleMouseMove = (event) => {
+      latestPosRef.current = { x: event.clientX, y: event.clientY };
+      if (!visibleRef.current) {
+        visibleRef.current = true;
+      }
+
+      const target = event.target;
+      const interactiveEl = target?.closest(INTERACTIVE_SELECTOR);
+      const isActive = Boolean(interactiveEl);
+      
+      // Only update active state if it actually changed to prevent flickering
+      if (activeRef.current !== isActive) {
+        activeRef.current = isActive;
+        hoveredElementRef.current = interactiveEl;
+      }
+      
+      // Always update position immediately
+      requestUpdate();
+    };
+
+    const handleWindowMouseLeave = () => {
+      visibleRef.current = false;
+      activeRef.current = false;
+      hoveredElementRef.current = null;
+      requestUpdate();
+    };
+
+    const handleWindowMouseEnter = () => {
+      visibleRef.current = true;
+      requestUpdate();
+    };
+
+    window.addEventListener('mousemove', handleMouseMove, { passive: true });
+    window.addEventListener('mouseenter', handleWindowMouseEnter, { passive: true });
+    window.addEventListener('mouseleave', handleWindowMouseLeave, { passive: true });
+
+    return () => {
+      if (frameRef.current) cancelAnimationFrame(frameRef.current);
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseenter', handleWindowMouseEnter);
+      window.removeEventListener('mouseleave', handleWindowMouseLeave);
+      body.classList.remove('dot-cursor-enabled');
+      visibleRef.current = false;
+      activeRef.current = false;
+      hoveredElementRef.current = null;
+    };
+  }, []);
+
+  if (!enabled) {
+    return null;
+  }
+
+  return (
+    <div
+      ref={dotRef}
+      className="dot-cursor pointer-events-none fixed left-0 top-0 z-[9999] hidden h-3 w-3 rounded-full border border-transparent md:block"
+      style={{ 
+        transform: 'translate3d(-999px, -999px, 0)', 
+        opacity: 0,
+        backgroundColor: 'rgba(211, 155, 35, 0.8)',
+        boxShadow: '0 0 20px -5px rgba(211, 155, 35, 0.45)',
+        transition: 'opacity 0.1s ease-out'
+      }}
+      aria-hidden
+    />
+  );
+}
+

src/components/Footer.jsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import ImageFlex from './ImageFlex.jsx';
+
+export default function Footer() {
+  return (
+    <footer className="mt-24 bg-slate-950 text-white" role="contentinfo">
+      <div className="container grid grid-cols-1 gap-10 py-14 md:grid-cols-3">
+        <div>
+          <div className="flex items-center gap-3">
+            <ImageFlex base="/assets/logo-white" alt="Jade Infra logo" className="h-8 w-auto" />
+            <span className="text-lg font-bold">Jade Infra</span>
+          </div>
+          <p className="mt-4 max-w-sm text-slate-300">
+            Building residential and commercial projects with quality, safety, and on-time delivery.
+            {/* TODO: replace with official boilerplate from jadeinfra.in */}
+          </p>
+        </div>
+
+        <div>
+          <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-slate-200">
+            Company
+          </h3>
+          <ul className="space-y-2 text-slate-300">
+            <li><Link to="/about" className="hover:text-white">About</Link></li>
+            <li><Link to="/projects/development" className="hover:text-white">Projects</Link></li>
+            <li><Link to="/contact" className="hover:text-white">Contact</Link></li>
+          </ul>
+        </div>
+
+        <div>
+          <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-slate-200">
+            Contact
+          </h3>
+          <address className="not-italic text-slate-300">
+            Address:{' '}
+            <a
+              className="hover:text-white"
+              href="https://maps.app.goo.gl/4jSpBviv91E6DYCS9"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Click here to view our office location
+            </a>
+            <br />
+            Phone:{' '}
+            <a className="hover:text-white" href="tel:+919673009729">
+              +91 96730 09729
+            </a>
+            <br />
+            Email:{' '}
+            <a className="hover:text-white" href="mailto:jadeinfrapune@gmail.com">
+              jadeinfrapune@gmail.com
+            </a>
+          </address>
+        </div>
+
+        
+      </div>
+      <div className="border-t border-white/10">
+        <div className="container flex flex-col items-center justify-between gap-4 py-6 md:flex-row">
+          <p className="text-sm text-slate-400">
+            © {new Date().getFullYear()} Jade Infra. All rights reserved.
+          </p>
+          <nav className="flex items-center gap-4 text-sm text-slate-400">
+            <Link className="hover:text-white" to="/privacy">Privacy</Link>
+            <Link className="hover:text-white" to="/terms">Terms</Link>
+          </nav>
+        </div>
+      </div>
+    </footer>
+  );
+}

src/components/Header.jsx

@@ -0,0 +1,269 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { Link, NavLink } from 'react-router-dom';
+import clsx from 'clsx';
+import ScrollProgress from './ScrollProgress.jsx';
+import ImageFlex from './ImageFlex.jsx';
+
+export default function Header() {
+  const [scrolled, setScrolled] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [projectsOpen, setProjectsOpen] = useState(false);
+  const [headerVisible, setHeaderVisible] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const closeTimerRef = useRef(null);
+  const headerRef = useRef(null);
+
+  useEffect(() => {
+    const onScroll = () => {
+      const scrollY = window.scrollY;
+      setScrolled(scrollY > 24);
+      // Show header when scrolled
+      setHeaderVisible(scrollY > 50);
+    };
+    onScroll();
+    window.addEventListener('scroll', onScroll, { passive: true });
+    return () => window.removeEventListener('scroll', onScroll);
+  }, []);
+
+  useEffect(() => {
+    // Show header on hover or when menu is open, regardless of scroll position
+    if (isHovered || menuOpen) {
+      setHeaderVisible(true);
+    } else {
+      // Only hide if not scrolled
+      const scrollY = window.scrollY;
+      if (scrollY <= 50) {
+        setHeaderVisible(false);
+      }
+    }
+  }, [isHovered, menuOpen]);
+
+  useEffect(() => {
+    document.body.style.overflow = menuOpen ? 'hidden' : '';
+  }, [menuOpen]);
+
+  const navLink = (to, label) => (
+    <NavLink
+      to={to}
+      className={({ isActive }) =>
+        clsx(
+          'relative px-3 py-2 text-sm font-medium transition',
+          // Animated underline (temporary) from right -> left on hover
+          'after:content-[""] after:absolute after:left-3 after:right-3 after:-bottom-1 after:h-[2px] after:bg-brand-600',
+          'after:transform after:scale-x-0 after:origin-right after:transition-transform after:duration-300',
+          'hover:after:origin-left hover:after:scale-x-100',
+          isActive ? 'text-brand-700' : 'text-slate-700 hover:text-brand-700'
+        )
+      }
+    >
+      {label}
+    </NavLink>
+  );
+
+  return (
+    <>
+      {/* Invisible hover area at top of page to reveal header */}
+      <div
+        className="fixed inset-x-0 top-0 z-40 h-4"
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        aria-hidden="true"
+      />
+      <header
+        ref={headerRef}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        className={clsx(
+          'fixed inset-x-0 top-0 z-50 bg-white transition-all duration-300',
+          scrolled ? 'shadow' : '',
+          headerVisible 
+            ? 'translate-y-0 opacity-100 pointer-events-auto' 
+            : '-translate-y-full opacity-0 pointer-events-none'
+        )}
+        role="banner"
+        style={{
+          transform: headerVisible ? 'translateY(0)' : 'translateY(-100%)',
+        }}
+      >
+      <ScrollProgress />
+      <a href="#main-content" className="skip-link">
+        Skip to content
+      </a>
+      <div className="container flex items-center justify-between py-4">
+        <Link to="/" className="flex items-center gap-3" aria-label="Jade Infra home">
+          <ImageFlex
+            base="/assets/logo"
+            alt="Jade Infra logo"
+            className="h-12 md:h-14 w-auto -my-2 md:-my-3"
+          />
+          <span className="sr-only">Jade Infra</span>
+        </Link>
+
+        <nav aria-label="Primary" className="hidden items-center gap-8 md:flex">
+          {navLink('/', 'Home')}
+          {navLink('/about', 'About')}
+          {/* Projects with dropdown (hover with grace period) */}
+          <div
+            className="relative"
+            onMouseEnter={() => {
+              if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
+              setProjectsOpen(true);
+            }}
+            onMouseLeave={() => {
+              if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
+              closeTimerRef.current = setTimeout(() => setProjectsOpen(false), 250);
+            }}
+          >
+            <NavLink
+              to="/projects/development"
+              className={({ isActive }) =>
+                clsx(
+                  'px-3 py-2 text-sm font-medium transition',
+                  isActive ? 'text-brand-700' : 'text-slate-700 hover:text-brand-700'
+                )
+              }
+              aria-haspopup="true"
+              aria-expanded={projectsOpen}
+              onFocus={() => setProjectsOpen(true)}
+            >
+              Projects
+            </NavLink>
+            <div
+              className={clsx(
+                'absolute left-0 top-full w-56 border border-slate-200 bg-white p-2 shadow-card',
+                'transition-opacity',
+                projectsOpen ? 'opacity-100 pointer-events-auto mt-2' : 'opacity-0 pointer-events-none mt-2'
+              )}
+              role="menu"
+              aria-label="Projects submenu"
+            >
+              <NavLink
+                to="/projects/development"
+                className={({ isActive }) =>
+                  clsx(
+                    'relative block rounded px-3 py-2 text-sm transition',
+                    'after:content-[""] after:absolute after:left-3 after:right-3 after:-bottom-0.5 after:h-[2px] after:bg-brand-600',
+                    'after:transform after:scale-x-0 after:origin-right after:transition-transform after:duration-300',
+                    'hover:after:origin-left hover:after:scale-x-100',
+                    isActive ? 'text-brand-700' : 'text-slate-700 hover:text-brand-700'
+                  )
+                }
+                role="menuitem"
+              >
+                Development
+              </NavLink>
+              <NavLink
+                to="/projects/construction"
+                className={({ isActive }) =>
+                  clsx(
+                    'relative block rounded px-3 py-2 text-sm transition',
+                    'after:content-[""] after:absolute after:left-3 after:right-3 after:-bottom-0.5 after:h-[2px] after:bg-brand-600',
+                    'after:transform after:scale-x-0 after:origin-right after:transition-transform after:duration-300',
+                    'hover:after:origin-left hover:after:scale-x-100',
+                    isActive ? 'text-brand-700' : 'text-slate-700 hover:text-brand-700'
+                  )
+                }
+                role="menuitem"
+              >
+                Project Contracting
+              </NavLink>
+              <NavLink
+                to="/projects/sra"
+                className={({ isActive }) =>
+                  clsx(
+                    'relative block rounded px-3 py-2 text-sm transition',
+                    'after:content-[""] after:absolute after:left-3 after:right-3 after:-bottom-0.5 after:h-[2px] after:bg-brand-600',
+                    'after:transform after:scale-x-0 after:origin-right after:transition-transform after:duration-300',
+                    'hover:after:origin-left hover:after:scale-x-100',
+                    isActive ? 'text-brand-700' : 'text-slate-700 hover:text-brand-700'
+                  )
+                }
+                role="menuitem"
+              >
+                SRA
+              </NavLink>
+            </div>
+          </div>
+          {navLink('/projects/redevelopment', 'Redevelopment')}
+          {navLink('/contact', 'Contact')}
+        </nav>
+
+        <div className="flex items-center gap-3">
+          <button
+            type="button"
+            aria-controls="mobile-menu"
+            aria-expanded={menuOpen}
+            aria-label="Toggle menu"
+            className="inline-flex h-10 w-10 items-center justify-center rounded md:hidden
+                       focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-600"
+            onClick={() => setMenuOpen((v) => !v)}
+          >
+            <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true">
+              <path
+                d={menuOpen ? 'M6 18L18 6M6 6l12 12' : 'M3 6h18M3 12h18M3 18h18'}
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <div
+        id="mobile-menu"
+        className={clsx(
+          'md:hidden',
+          menuOpen ? 'block' : 'hidden'
+        )}
+      >
+        <div className="container space-y-1 pb-6">
+          <NavLink
+            to="/"
+            className="block rounded px-4 py-3 text-base hover:bg-slate-50"
+            onClick={() => setMenuOpen(false)}
+          >
+            Home
+          </NavLink>
+          <NavLink
+            to="/about"
+            className="block rounded px-4 py-3 text-base hover:bg-slate-50"
+            onClick={() => setMenuOpen(false)}
+          >
+            About
+          </NavLink>
+          <div>
+            <NavLink
+              to="/projects/development"
+              className="block rounded px-4 py-3 text-base hover:bg-slate-50"
+              onClick={() => setMenuOpen(false)}
+            >
+              Projects
+            </NavLink>
+            <div className="ml-4 mt-1 space-y-1">
+              <NavLink to="/projects/development" className="block rounded px-4 py-2 text-sm hover:bg-slate-50" onClick={() => setMenuOpen(false)}>Development</NavLink>
+              <NavLink to="/projects/construction" className="block rounded px-4 py-2 text-sm hover:bg-slate-50" onClick={() => setMenuOpen(false)}>Project Contracting</NavLink>
+              <NavLink to="/projects/sra" className="block rounded px-4 py-2 text-sm hover:bg-slate-50" onClick={() => setMenuOpen(false)}>SRA</NavLink>
+            </div>
+          </div>
+          <NavLink
+            to="/projects/redevelopment"
+            className="block rounded px-4 py-3 text-base hover:bg-slate-50"
+            onClick={() => setMenuOpen(false)}
+          >
+            Redevelopment
+          </NavLink>
+          
+          <NavLink
+            to="/contact"
+            className="block rounded px-4 py-3 text-base hover:bg-slate-50"
+            onClick={() => setMenuOpen(false)}
+          >
+            Contact
+          </NavLink>
+        </div>
+      </div>
+    </header>
+    </>
+  );
+}

src/components/Hero.jsx

@@ -0,0 +1,102 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Link } from 'react-router-dom';
+import MagneticButton from './MagneticButton.jsx';
+import ImageFlex from './ImageFlex.jsx';
+
+export default function Hero() {
+  const mediaRef = useRef(null);
+  const videoRef = useRef(null);
+  const [mounted, setMounted] = useState(false);
+  const [videoLoaded, setVideoLoaded] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    
+    // Check if video loads successfully
+    if (videoRef.current) {
+      const handleLoadedData = () => setVideoLoaded(true);
+      const handleError = () => setVideoLoaded(false);
+      videoRef.current.addEventListener('loadeddata', handleLoadedData);
+      videoRef.current.addEventListener('error', handleError);
+      
+      return () => {
+        if (videoRef.current) {
+          videoRef.current.removeEventListener('loadeddata', handleLoadedData);
+          videoRef.current.removeEventListener('error', handleError);
+        }
+      };
+    }
+  }, []);
+
+  useEffect(() => {
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+    const onScroll = () => {
+      const y = window.scrollY;
+      const el = videoLoaded ? videoRef.current : mediaRef.current;
+      if (!el) return;
+      // Subtle parallax translate
+      el.style.transform = `translateY(${Math.min(40, y * 0.15)}px) scale(1.05)`;
+    };
+    window.addEventListener('scroll', onScroll, { passive: true });
+    return () => window.removeEventListener('scroll', onScroll);
+  }, [videoLoaded]);
+
+  return (
+    <section
+      className="relative flex min-h-screen items-end overflow-hidden bg-slate-900 text-white mb-0"
+      aria-label="Hero"
+      style={{ zIndex: 1 }}
+    >
+      {/* Video background with image fallback */}
+      <video
+        ref={videoRef}
+        autoPlay
+        loop
+        muted
+        playsInline
+        className={`absolute inset-0 h-full w-full object-cover will-change-transform ${
+          videoLoaded ? 'opacity-100' : 'opacity-0'
+        }`}
+        style={{
+          transform: mounted ? 'scale(1.05)' : undefined,
+          filter: 'brightness(1.12) contrast(1.06)'
+        }}
+        aria-hidden="true"
+      >
+        <source src="/assets/hero-video.mp4" type="video/mp4" />
+        {/* TODO: replace with actual video path */}
+      </video>
+      <ImageFlex
+        base="/assets/hero" /* TODO: replace */
+        alt=""
+        className={`absolute inset-0 h-full w-full object-cover will-change-transform ${
+          videoLoaded ? 'opacity-0' : 'opacity-100'
+        }`}
+        style={{
+          transform: mounted ? 'scale(1.05)' : undefined,
+          filter: 'brightness(1.12) contrast(1.06)'
+        }}
+        ref={mediaRef}
+      />
+      <div className="absolute inset-0 bg-slate-900/40" aria-hidden="true"></div>
+
+      {/* Overlay logo at top-right */}
+      <div className="absolute right-0 top-0 z-10">
+        <div className="rounded-bl-xl bg-white/30 px-3 py-2 shadow-lg backdrop-blur-md ring-1 ring-white/20 md:px-4 md:py-3">
+          <ImageFlex
+            base="/assets/logo"
+            alt="Jade Infra"
+            className="h-14 w-auto md:h-18 lg:h-22"
+          />
+        </div>
+      </div>
+
+      {/* Heading with equal left and bottom margins regardless of media aspect */}
+      <div className="absolute left-6 bottom-6 z-10 md:left-10 md:bottom-10 lg:left-16 lg:bottom-16">
+        <div className="max-w-3xl">
+          <h1 className="h1 text-white">Building Tomorrow with Quality and Trust</h1>
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/HeroOverlapGrid.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import ImageFlex from './ImageFlex.jsx';
+
+// Overlapping image grid that sits below the hero and overlaps upwards by ~1/3.
+export default function HeroOverlapGrid({ count = 3 }) {
+  const items = Array.from({ length: 3 }, (_, i) => i + 1);
+
+  return (
+    <section aria-label="Featured previews" className="relative -mt-10 md:-mt-14 lg:-mt-16 z-20">
+      <div className="container">
+        <ul className="grid grid-cols-3 gap-4 sm:gap-6 md:gap-8 lg:gap-10">
+          {items.map((i) => (
+            <li key={i} className="overflow-hidden rounded-xl shadow-card bg-white">
+              <ImageFlex
+                base={`/assets/thumb-${i}`}
+                alt={`Preview ${i}`}
+                className="h-28 w-full object-cover md:h-40 lg:h-48"
+              />
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  );
+}
+
+

src/components/ImageFlex.jsx

@@ -0,0 +1,42 @@
+import React, { useMemo, useState } from 'react';
+
+// Flexible image loader that tries extensions in order when an image fails.
+// Usage: <ImageFlex base="/assets/hero" alt="..." className="..." />
+// Optionally pass explicit candidates via srcCandidates=["/a.jpg","/a.png"].
+export default function ImageFlex({
+  base,
+  exts = ['webp', 'jpg', 'jpeg', 'png'],
+  srcCandidates,
+  alt = '',
+  className = '',
+  style,
+  ...rest
+}) {
+  const candidates = useMemo(() => {
+    if (Array.isArray(srcCandidates) && srcCandidates.length > 0) return srcCandidates;
+    if (typeof base === 'string') return exts.map((e) => `${base}.${e}`);
+    return [];
+  }, [base, exts, srcCandidates]);
+
+  const [idx, setIdx] = useState(0);
+  const src = candidates[idx];
+
+  function handleError() {
+    if (idx < candidates.length - 1) setIdx(idx + 1);
+  }
+
+  if (!src) return null;
+
+  return (
+    <img
+      src={src}
+      alt={alt}
+      className={className}
+      style={style}
+      onError={handleError}
+      {...rest}
+    />
+  );
+}
+
+

src/components/ImageSlider.jsx

@@ -0,0 +1,228 @@
+import React, { useState, useEffect, useRef } from 'react';
+import ImageFlex from './ImageFlex.jsx';
+
+export default function ImageSlider({ images, projectTitle }) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const intervalRef = useRef(null);
+
+  // Auto-advance every 4 seconds
+  useEffect(() => {
+    if (images.length <= 1) return;
+    if (intervalRef.current) clearInterval(intervalRef.current);
+    intervalRef.current = setInterval(() => {
+      setCurrentIndex((prev) => (prev + 1) % images.length);
+    }, 4000);
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, [images.length]);
+
+  // Pause on hover/focus
+  const pauseAutoPlay = () => {
+    if (intervalRef.current) clearInterval(intervalRef.current);
+  };
+  const resumeAutoPlay = () => {
+    if (images.length <= 1) return;
+    if (intervalRef.current) clearInterval(intervalRef.current);
+    intervalRef.current = setInterval(() => {
+      setCurrentIndex((prev) => (prev + 1) % images.length);
+    }, 4000);
+  };
+
+  const goToNext = () => {
+    pauseAutoPlay();
+    setCurrentIndex((prev) => (prev + 1) % images.length);
+    resumeAutoPlay();
+  };
+
+  const goToPrev = () => {
+    pauseAutoPlay();
+    setCurrentIndex((prev) => (prev - 1 + images.length) % images.length);
+    resumeAutoPlay();
+  };
+
+  const goToSlide = (index) => {
+    pauseAutoPlay();
+    setCurrentIndex(index);
+    resumeAutoPlay();
+  };
+
+  const openFullscreen = () => {
+    setIsFullscreen(true);
+    pauseAutoPlay();
+  };
+
+  const closeFullscreen = () => {
+    setIsFullscreen(false);
+    resumeAutoPlay();
+  };
+
+  // Keyboard navigation in fullscreen (auto-play stays paused in fullscreen)
+  useEffect(() => {
+    if (!isFullscreen) return;
+
+    const handleKeyDown = (e) => {
+      if (e.key === 'Escape') {
+        setIsFullscreen(false);
+        resumeAutoPlay();
+      } else if (e.key === 'ArrowLeft') {
+        setCurrentIndex((prev) => (prev - 1 + images.length) % images.length);
+      } else if (e.key === 'ArrowRight') {
+        setCurrentIndex((prev) => (prev + 1) % images.length);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [isFullscreen, images.length]);
+
+  if (!images || images.length === 0) return null;
+
+  const currentImage = images[currentIndex];
+
+  return (
+    <>
+      <div
+        className="relative group overflow-hidden rounded-xl bg-slate-100"
+        onMouseEnter={pauseAutoPlay}
+        onMouseLeave={resumeAutoPlay}
+      >
+        <div className="aspect-video relative">
+          <ImageFlex
+            base={currentImage}
+            alt={`${projectTitle} - Image ${currentIndex + 1}`}
+            className="w-full h-full object-cover"
+          />
+          {/* Click-to-fullscreen overlay */}
+          <button
+            type="button"
+            onClick={openFullscreen}
+            aria-label="View fullscreen"
+            className="absolute inset-0 cursor-zoom-in focus:outline-none"
+          />
+          {/* Navigation arrows */}
+          {images.length > 1 && (
+            <>
+              <button
+                type="button"
+                onClick={goToPrev}
+                className="absolute left-4 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white rounded-full p-2
+                         transition opacity-0 group-hover:opacity-100 focus:opacity-100"
+                aria-label="Previous image"
+              >
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <path d="M15 18l-6-6 6-6" />
+                </svg>
+              </button>
+              <button
+                type="button"
+                onClick={goToNext}
+                className="absolute right-4 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white rounded-full p-2
+                         transition opacity-0 group-hover:opacity-100 focus:opacity-100"
+                aria-label="Next image"
+              >
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <path d="M9 18l6-6-6-6" />
+                </svg>
+              </button>
+            </>
+          )}
+          {/* Fullscreen button */}
+          <button
+            type="button"
+            onClick={openFullscreen}
+            className="absolute bottom-4 right-4 bg-white/80 hover:bg-white rounded-full p-2
+                     transition opacity-0 group-hover:opacity-100 focus:opacity-100"
+            aria-label="View fullscreen"
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <path d="M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3" />
+            </svg>
+          </button>
+          {/* Slide indicators */}
+          {images.length > 1 && (
+            <div className="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2">
+              {images.map((_, i) => (
+                <button
+                  key={i}
+                  type="button"
+                  onClick={() => goToSlide(i)}
+                  className={`h-2 rounded-full transition ${
+                    i === currentIndex ? 'w-8 bg-white' : 'w-2 bg-white/50 hover:bg-white/75'
+                  }`}
+                  aria-label={`Go to slide ${i + 1}`}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Fullscreen modal */}
+      {isFullscreen && (
+        <div
+          className="fixed inset-0 z-[100] bg-black/95 flex items-center justify-center p-4"
+          onClick={closeFullscreen}
+        >
+          <button
+            type="button"
+            onClick={closeFullscreen}
+            className="absolute top-4 right-4 text-white hover:text-gray-300 p-2"
+            aria-label="Close fullscreen"
+          >
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <path d="M18 6L6 18M6 6l12 12" />
+            </svg>
+          </button>
+          <div className="relative max-w-7xl w-full h-full flex items-center" onClick={(e) => e.stopPropagation()}>
+            <button
+              type="button"
+              onClick={goToPrev}
+              className="absolute left-4 bg-white/20 hover:bg-white/30 text-white rounded-full p-3 z-10"
+              aria-label="Previous image"
+            >
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <path d="M15 18l-6-6 6-6" />
+              </svg>
+            </button>
+            <div className="w-full h-full flex items-center justify-center">
+              <ImageFlex
+                base={currentImage}
+                alt={`${projectTitle} - Image ${currentIndex + 1}`}
+                className="max-w-full max-h-full object-contain"
+              />
+            </div>
+            <button
+              type="button"
+              onClick={goToNext}
+              className="absolute right-4 bg-white/20 hover:bg-white/30 text-white rounded-full p-3 z-10"
+              aria-label="Next image"
+            >
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <path d="M9 18l6-6-6-6" />
+              </svg>
+            </button>
+            {/* Fullscreen indicators */}
+            {images.length > 1 && (
+              <div className="absolute bottom-8 left-1/2 -translate-x-1/2 flex gap-2">
+                {images.map((_, i) => (
+                  <button
+                    key={i}
+                    type="button"
+                    onClick={() => goToSlide(i)}
+                    className={`h-2 rounded-full transition ${
+                      i === currentIndex ? 'w-8 bg-white' : 'w-2 bg-white/50 hover:bg-white/75'
+                    }`}
+                    aria-label={`Go to slide ${i + 1}`}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+

src/components/InteractiveBackground.jsx

@@ -0,0 +1,121 @@
+import React, { useEffect, useRef } from 'react';
+
+// Interactive background with flowing waves/spirals in brand colors.
+// Renders on a canvas for performance and reacts to scroll and time.
+export default function InteractiveBackground() {
+  const canvasRef = useRef(null);
+  const rafRef = useRef(0);
+  const timeRef = useRef(0);
+  const dimsRef = useRef({ w: 0, h: 0, dpr: 1 });
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+
+    const resize = () => {
+      const dpr = Math.min(2, window.devicePixelRatio || 1);
+      const w = canvas.clientWidth;
+      const h = canvas.clientHeight;
+      canvas.width = Math.floor(w * dpr);
+      canvas.height = Math.floor(h * dpr);
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      dimsRef.current = { w, h, dpr };
+    };
+    resize();
+    const ro = new ResizeObserver(resize);
+    ro.observe(canvas);
+
+    const drawWaves = (t) => {
+      const { w, h } = dimsRef.current;
+      // transparent base to let page bg through; slight warm-cool wash
+      const wash = ctx.createLinearGradient(0, 0, w, h);
+      wash.addColorStop(0, 'rgba(255,247,237,0.55)'); // warm
+      wash.addColorStop(1, 'rgba(236,253,245,0.55)'); // cool
+      ctx.fillStyle = wash;
+      ctx.fillRect(0, 0, w, h);
+
+      // Parameters
+      const scrollY = window.scrollY || 0;
+      const baseSpeed = 0.0018;
+      const parallax = scrollY * 0.08;
+
+      // Brand colors
+      const green = '#007746';
+      const orange = '#d39b23';
+
+      // Helper to draw a sine wave ribbon
+      const ribbon = (phase, amp, freq, thickness, color, yOffset = 0) => {
+        ctx.save();
+        ctx.beginPath();
+        const midY = h * 0.55 + yOffset;
+        for (let x = 0; x <= w; x += 2) {
+          const prog = x / w;
+          const spiral = Math.sin(prog * 6.283 + phase) * 0.6; // spiral-ish modulation
+          const y =
+            midY +
+            Math.sin(x * freq + phase) * amp +
+            Math.cos((x * freq) / 2 + phase * 0.8) * (amp * 0.35) +
+            spiral * 16;
+          if (x === 0) ctx.moveTo(x, y);
+          else ctx.lineTo(x, y);
+        }
+        ctx.strokeStyle = color;
+        ctx.lineWidth = thickness;
+        ctx.globalAlpha = 0.55;
+        ctx.shadowColor = color;
+        ctx.shadowBlur = 16;
+        ctx.stroke();
+        ctx.restore();
+      };
+
+      // Green top ribbon
+      ribbon(t * 3 + parallax * 0.015, 24, 0.012, 6, hexToRgba(green, 0.55), -40);
+      // Orange middle ribbon
+      ribbon(t * 2 + parallax * 0.01, 28, 0.0105, 7, hexToRgba(orange, 0.55), 0);
+      // Green thin accent
+      ribbon(t * 4.2 + parallax * 0.02, 18, 0.018, 3, hexToRgba(green, 0.45), 32);
+      // Orange thin accent
+      ribbon(t * 5 + parallax * 0.018, 14, 0.02, 2, hexToRgba(orange, 0.4), -22);
+    };
+
+    const render = () => {
+      const { w, h } = dimsRef.current;
+      if (w === 0 || h === 0) return;
+      const ctx = canvas.getContext('2d');
+      // Clear with transparency to stack with site background if any
+      ctx.clearRect(0, 0, w, h);
+      const t = (timeRef.current += 0.6); // time base for wave evolution
+      drawWaves(t * 0.001);
+      rafRef.current = requestAnimationFrame(render);
+    };
+
+    rafRef.current = requestAnimationFrame(render);
+    const onScroll = () => {
+      // allow scroll to affect next frame via parallax calc
+    };
+    window.addEventListener('scroll', onScroll, { passive: true });
+    return () => {
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+      ro.disconnect();
+      window.removeEventListener('scroll', onScroll);
+    };
+  }, []);
+
+  return (
+    <div className="pointer-events-none fixed inset-0 -z-10" aria-hidden="true">
+      <canvas ref={canvasRef} className="h-full w-full" />
+    </div>
+  );
+}
+
+function hexToRgba(hex, a = 1) {
+  const clean = hex.replace('#', '');
+  const bigint = parseInt(clean, 16);
+  const r = (bigint >> 16) & 255;
+  const g = (bigint >> 8) & 255;
+  const b = bigint & 255;
+  return `rgba(${r}, ${g}, ${b}, ${a})`;
+}
+
+

src/components/MagneticButton.jsx

@@ -0,0 +1,34 @@
+import React, { useRef } from 'react';
+
+export default function MagneticButton({ children, className = '', strength = 0.25, ...props }) {
+  const ref = useRef(null);
+
+  function onMove(e) {
+    const el = ref.current;
+    if (!el) return;
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+    const rect = el.getBoundingClientRect();
+    const relX = e.clientX - rect.left - rect.width / 2;
+    const relY = e.clientY - rect.top - rect.height / 2;
+    el.style.transform = `translate(${relX * strength}px, ${relY * strength}px)`;
+  }
+  function onLeave() {
+    const el = ref.current;
+    if (!el) return;
+    el.style.transform = 'translate(0, 0)';
+  }
+
+  return (
+    <span
+      ref={ref}
+      className={className}
+      onMouseMove={onMove}
+      onMouseLeave={onLeave}
+      {...props}
+    >
+      {children}
+    </span>
+  );
+}
+
+

src/components/MapEmbed.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+export default function MapEmbed({ address, title = 'Project location' }) {
+  if (!address) return null;
+  const src = `https://www.google.com/maps?q=${encodeURIComponent(address)}&output=embed`;
+
+  return (
+    <section className="mt-6" aria-labelledby="map-heading">
+      <h3 id="map-heading" className="h3 mb-3">Location</h3>
+      <div className="overflow-hidden rounded-xl border border-slate-200 bg-slate-50">
+        <iframe
+          title={title}
+          src={src}
+          loading="lazy"
+          referrerPolicy="no-referrer-when-downgrade"
+          className="h-64 w-full md:h-72"
+        />
+      </div>
+      <p className="mt-2 text-xs text-slate-500">Based on project location: {address}</p>
+    </section>
+  );
+}
+
+

src/components/ProjectCard.jsx

@@ -0,0 +1,195 @@
+import React, { useRef } from 'react';
+import { Link } from 'react-router-dom';
+import ImageFlex from './ImageFlex.jsx';
+
+export default function ProjectCard({ project }) {
+  const cardRef = useRef(null);
+
+  function getStatusClasses(status) {
+    if (!status) return 'bg-slate-100 text-slate-700';
+    switch (status) {
+      case 'Completed':
+        return 'bg-emerald-100 text-emerald-700';
+      case 'Ongoing':
+        return 'bg-amber-100 text-amber-700';
+      case 'Upcoming':
+        return 'bg-sky-100 text-sky-700';
+      default:
+        return 'bg-slate-100 text-slate-700';
+    }
+  }
+
+  function onMove(e) {
+    const el = cardRef.current;
+    if (!el) return;
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+    const rect = el.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    const midX = rect.width / 2;
+    const midY = rect.height / 2;
+    const rotateX = ((y - midY) / midY) * -4;
+    const rotateY = ((x - midX) / midX) * 4;
+    el.style.transform = `perspective(800px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
+  }
+  function onLeave() {
+    const el = cardRef.current;
+    if (!el) return;
+    el.style.transform = 'perspective(800px) rotateX(0deg) rotateY(0deg)';
+  }
+
+  const hasGallery = Array.isArray(project.gallery) && project.gallery.length > 0;
+  const primaryImage =
+    (typeof project.image === 'string' && project.image.replace(/\.(jpg|jpeg|png|webp)$/i, '')) || null;
+  const galleryImage = hasGallery ? project.gallery[0] : null;
+  const explicitBase =
+    typeof project.imageBase === 'string'
+      ? project.imageBase.replace(/\.(jpg|jpeg|png|webp)$/i, '')
+      : null;
+  const slugFallback = !project.noDetail && project.slug ? `/assets/projects/${project.slug}/gallery-1` : null;
+
+  const imageBases = [
+    primaryImage,
+    galleryImage,
+    explicitBase,
+    slugFallback
+  ].filter(Boolean);
+
+  const hasImage = imageBases.length > 0;
+
+  return (
+    <article
+      ref={cardRef}
+      onMouseMove={onMove}
+      onMouseLeave={onLeave}
+      className={`relative card group overflow-hidden will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-xl before:bg-brand-600/0 before:blur before:transition before:duration-300 hover:before:bg-brand-600/10 ${
+        hasImage ? 'aspect-[3/4] min-h-[400px] md:min-h-[500px]' : 'h-full'
+      }`}
+      aria-labelledby={`proj-${project.slug}`}
+    >
+      {hasImage ? (
+        <>
+          <div className="relative h-full w-full bg-slate-200">
+            <ImageFlex
+              base={imageBases[0]}
+              srcCandidates={imageBases.flatMap((base) =>
+                ['webp', 'jpg', 'jpeg', 'png'].map((ext) => `${base}.${ext}`)
+              )}
+              alt={project.title}
+              className="h-full w-full object-contain transition-transform group-hover:scale-[1.03]"
+              loading="lazy"
+            />
+            <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-slate-900/80 via-slate-900/40 to-transparent"></div>
+          </div>
+          {/* Overlay text content */}
+          <div className="absolute bottom-0 left-0 right-0 p-5 text-white">
+            <h3 id={`proj-${project.slug}`} className="h3 text-white">
+              {project.noDetail ? (
+                <span>{project.title}</span>
+              ) : (
+                <Link to={`/project/${project.slug}`} className="hover:underline">
+                  {project.title}
+                </Link>
+              )}
+            </h3>
+            <p className="mt-1 text-sm text-white/90">{project.location}</p>
+            {project.projectSize && (
+              <p className="mt-1 text-sm font-medium text-white">
+                {project.projectSize}
+              </p>
+            )}
+            <div className="mt-4 flex items-center justify-between">
+              <span className="flex flex-wrap items-center gap-2">
+                {project.status && (
+                  <span
+                    className={`rounded px-2 py-1 text-xs font-medium ${getStatusClasses(project.status)}`}
+                    aria-label={`Status: ${project.status}`}
+                  >
+                    {project.status}
+                  </span>
+                )}
+                {(project.categories || []).slice(0, 2).map((c) => (
+                  <span key={c} className="rounded bg-white/20 backdrop-blur-sm px-2 py-1 text-xs text-white">
+                    {c}
+                  </span>
+                ))}
+              </span>
+              {!project.noDetail && (
+                <Link
+                  to={`/project/${project.slug}`}
+                  className="text-sm font-medium text-white underline-offset-2 hover:underline"
+                  aria-label={`View ${project.title}`}
+                >
+                  View details
+                </Link>
+              )}
+            </div>
+          </div>
+        </>
+      ) : (
+        <>
+          <div className="flex h-24 w-full items-center justify-center bg-gradient-to-br from-brand-50 via-white to-brand-100">
+            <svg
+              className="h-12 w-12 text-brand-600"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              aria-hidden="true"
+            >
+              <rect x="3" y="3" width="7" height="7" />
+              <rect x="14" y="3" width="7" height="7" />
+              <rect x="14" y="14" width="7" height="7" />
+              <rect x="3" y="14" width="7" height="7" />
+            </svg>
+          </div>
+          <div className="p-5">
+            <h3 id={`proj-${project.slug}`} className="h3">
+              {project.noDetail ? (
+                <span>{project.title}</span>
+              ) : (
+                <Link to={`/project/${project.slug}`} className="hover:underline">
+                  {project.title}
+                </Link>
+              )}
+            </h3>
+            <p className="mt-1 text-sm text-slate-600">{project.location}</p>
+            {project.projectSize && (
+              <p className="mt-1 text-sm font-medium text-brand-700">
+                {project.projectSize}
+              </p>
+            )}
+            <div className="mt-4 flex items-center justify-between">
+              <span className="flex flex-wrap items-center gap-2">
+                {project.status && (
+                  <span
+                    className={`rounded px-2 py-1 text-xs font-medium ${getStatusClasses(project.status)}`}
+                    aria-label={`Status: ${project.status}`}
+                  >
+                    {project.status}
+                  </span>
+                )}
+                {(project.categories || []).slice(0, 2).map((c) => (
+                  <span key={c} className="rounded bg-slate-100 px-2 py-1 text-xs text-slate-700">
+                    {c}
+                  </span>
+                ))}
+              </span>
+              {!project.noDetail && (
+                <Link
+                  to={`/project/${project.slug}`}
+                  className="text-sm font-medium text-brand-700 underline-offset-2 hover:underline"
+                  aria-label={`View ${project.title}`}
+                >
+                  View details
+                </Link>
+              )}
+            </div>
+          </div>
+        </>
+      )}
+    </article>
+  );
+}

src/components/Reveal.jsx

@@ -0,0 +1,40 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+export default function Reveal({ children, as: Tag = 'div', delay = 0, y = 16 }) {
+  const ref = useRef(null);
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      setVisible(true);
+      return;
+    }
+    const el = ref.current;
+    if (!el) return;
+    const obs = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((e) => {
+          if (e.isIntersecting) {
+            setTimeout(() => setVisible(true), delay);
+            obs.disconnect();
+          }
+        });
+      },
+      { threshold: 0.12 }
+    );
+    obs.observe(el);
+    return () => obs.disconnect();
+  }, [delay]);
+
+  const style = visible
+    ? { transform: 'none', opacity: 1 }
+    : { transform: `translateY(${y}px)`, opacity: 0 };
+
+  return (
+    <Tag ref={ref} style={style} className="transition-all duration-700 ease-out will-change-transform">
+      {children}
+    </Tag>
+  );
+}
+
+

src/components/ScrollProgress.jsx

@@ -0,0 +1,33 @@
+import React, { useEffect, useState } from 'react';
+
+export default function ScrollProgress() {
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    const onScroll = () => {
+      const scrollTop = window.scrollY || document.documentElement.scrollTop;
+      const height =
+        document.documentElement.scrollHeight - document.documentElement.clientHeight;
+      const pct = height > 0 ? Math.min(100, Math.max(0, (scrollTop / height) * 100)) : 0;
+      setProgress(pct);
+    };
+    onScroll();
+    window.addEventListener('scroll', onScroll, { passive: true });
+    window.addEventListener('resize', onScroll);
+    return () => {
+      window.removeEventListener('scroll', onScroll);
+      window.removeEventListener('resize', onScroll);
+    };
+  }, []);
+
+  return (
+    <div aria-hidden="true" className="fixed inset-x-0 top-0 z-[60] h-0.5 bg-transparent">
+      <div
+        className="h-full bg-gradient-to-r from-brand-600 via-accent to-brand-600 transition-[width] duration-150"
+        style={{ width: `${progress}%` }}
+      />
+    </div>
+  );
+}
+
+

src/components/SectionIntro.jsx

@@ -0,0 +1,218 @@
+import React from 'react';
+import Reveal from './Reveal.jsx';
+
+export default function SectionIntro({ sectionId }) {
+  const section = sectionId?.toLowerCase();
+
+  // Real Estate Development
+  if (section === 'development') {
+    return (
+      <Reveal>
+        <div className="mb-16 grid gap-10 md:grid-cols-2 md:items-center">
+          <div>
+            <div className="mb-4 inline-block rounded-full bg-brand-100 px-4 py-1.5 text-sm font-semibold text-brand-700">
+              Real Estate Development
+            </div>
+            <h2 className="h2 mb-4">Trusted Developers. Visionary Projects. Guaranteed Value.</h2>
+            <p className="lead mb-6">
+              For over 38 years, we haven't just built structures; we've cultivated trust and delivered lasting value. 
+              As a leading real estate developer, we specialize in identifying prime <strong>Land Purchase</strong> opportunities 
+              and executing end-to-end <strong>Property and Project Development</strong>.
+            </p>
+            <p className="mb-6 text-slate-700">
+              Our portfolio includes the successful delivery of <strong>25+ Residential and Commercial projects</strong>. Each 
+              a testament to our commitment to quality, timely execution, and building vibrant communities. When you partner 
+              with us, you are investing in a future where <strong>Value, Goodwill, and Trust</strong> are the foundation of 
+              every square foot.
+            </p>
+            <div className="mb-6 space-y-3">
+              <h3 className="font-semibold text-slate-900">Our Expertise Includes:</h3>
+              <ul className="space-y-2 text-slate-700">
+                <li className="flex items-start gap-2">
+                  <span className="mt-1.5 h-1.5 w-1.5 rounded-full bg-brand-600"></span>
+                  <span>Strategic Land Acquisition and Aggregation.</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="mt-1.5 h-1.5 w-1.5 rounded-full bg-brand-600"></span>
+                  <span>Concept-to-Completion Development of Premium Properties.</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="mt-1.5 h-1.5 w-1.5 rounded-full bg-brand-600"></span>
+                  <span>Joint Venture Partnerships for High-Yield Projects.</span>
+                </li>
+              </ul>
+            </div>
+            <p className="rounded-lg bg-brand-50 p-4 text-sm font-medium text-brand-800">
+              <strong>The Advantage:</strong> A proven record of transforming vision into profitable, high-quality real estate.
+            </p>
+          </div>
+          <div className="card overflow-hidden p-8 bg-gradient-to-br from-brand-50 to-brand-100">
+            <div className="space-y-4">
+              <div className="flex items-center justify-between rounded-lg bg-white p-4 shadow-sm">
+                <span className="text-sm text-slate-600">Years of Experience</span>
+                <span className="text-2xl font-bold text-brand-700">38+</span>
+              </div>
+              <div className="flex items-center justify-between rounded-lg bg-white p-4 shadow-sm">
+                <span className="text-sm text-slate-600">Projects Delivered</span>
+                <span className="text-2xl font-bold text-brand-700">25+</span>
+              </div>
+              <div className="flex items-center justify-between rounded-lg bg-white p-4 shadow-sm">
+                <span className="text-sm text-slate-600">Focus Areas</span>
+                <span className="text-sm font-semibold text-brand-700">Residential & Commercial</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Reveal>
+    );
+  }
+
+  // Construction Project Contracting & Management
+  if (section === 'construction') {
+    return (
+      <Reveal>
+        <div className="mb-16 grid gap-10 md:grid-cols-2 md:items-center">
+          <div className="order-2 md:order-1">
+            <div className="card overflow-hidden p-8 bg-gradient-to-br from-brand-50 to-brand-100">
+              <div className="mb-6">
+                <div className="mb-2 text-5xl font-bold text-brand-700">70+</div>
+                <p className="text-sm text-slate-700">Projects Executed on Contract Basis</p>
+              </div>
+              <div className="h-px bg-brand-200 mb-6"></div>
+              <div className="space-y-3 text-sm">
+                <div className="flex items-center gap-2">
+                  <svg className="h-5 w-5 text-brand-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                  <span>End-to-End Project Execution</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <svg className="h-5 w-5 text-brand-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                  <span>Rigorous Project Management</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <svg className="h-5 w-5 text-brand-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                  <span>Quality Assurance & Safety</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="order-1 md:order-2">
+            <div className="mb-4 inline-block rounded-full bg-brand-100 px-4 py-1.5 text-sm font-semibold text-brand-700">
+              Project Contracting & Management
+            </div>
+            <h2 className="h2 mb-4">Master Builders. Exceptional Execution. Project Delivery, Perfected.</h2>
+            <p className="lead mb-6">
+              Experience is the ultimate currency in construction, and after <strong>38+ years</strong> in the industry, 
+              our experience is unparalleled. We are experts in comprehensive <strong>Construction Project Contracting & Management</strong>, 
+              offering seamless execution for projects of any scale.
+            </p>
+            <p className="mb-6 text-slate-700">
+              Our credentials speak for themselves: we have successfully undertaken the execution of <strong>70+ projects on a contract basis</strong>. 
+              This impressive <strong>Quantum of Work</strong> demonstrates not just our capacity, but the depth of our logistical prowess, 
+              commitment to safety, and ability to deliver complex projects on time and within budget.
+            </p>
+            <div className="mb-6 space-y-3">
+              <h3 className="font-semibold text-slate-900">Services We Offer:</h3>
+              <ul className="space-y-2 text-slate-700">
+                <li className="flex items-start gap-2">
+                  <span className="mt-1.5 h-1.5 w-1.5 rounded-full bg-brand-600"></span>
+                  <span>End-to-End Project Execution (EPC/Lump-Sum Contracts).</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="mt-1.5 h-1.5 w-1.5 rounded-full bg-brand-600"></span>
+                  <span>Rigorous Project Management and Site Supervision.</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="mt-1.5 h-1.5 w-1.5 rounded-full bg-brand-600"></span>
+                  <span>Quality Assurance and Safety Compliance.</span>
+                </li>
+              </ul>
+            </div>
+            <p className="rounded-lg bg-brand-50 p-4 text-sm font-medium text-brand-800">
+              <strong>Your Project in Expert Hands:</strong> Partner with a team whose three decades of expertise guarantees efficiency, precision, and reliable delivery.
+            </p>
+          </div>
+        </div>
+      </Reveal>
+    );
+  }
+
+  // Redevelopment
+  if (section === 'redevelopment') {
+    return (
+      <Reveal>
+        <div className="mb-16 grid gap-10 md:grid-cols-2 md:items-center">
+          <div>
+            <div className="mb-4 inline-block rounded-full bg-brand-100 px-4 py-1.5 text-sm font-semibold text-brand-700">
+              Redevelopment
+            </div>
+            <h2 className="h2 mb-4">Reimagine Your Home. Secure Your Investment. The Seamless Redevelopment Solution.</h2>
+            <p className="lead mb-6">
+              Your old society building holds history, but <strong>Redevelopment</strong> holds the promise of a safer, modern, 
+              and high-value future. We specialize in the complete <strong>Redevelopment of Existing Old Society Premises and Buildings</strong>, 
+              turning aged structures into brand-new, architecturally sound, and significantly upgraded homes.
+            </p>
+            <p className="mb-6 text-slate-700">
+              We understand the complexities and sensitivities involved. Our process is transparent, prioritizing the needs and 
+              seamless transition of all existing tenants and members.
+            </p>
+            <div className="mb-6 rounded-xl border-2 border-brand-200 bg-gradient-to-br from-brand-50 to-brand-100 p-6">
+              <h3 className="mb-4 font-semibold text-slate-900">The Momentum is Building:</h3>
+              <div className="grid gap-4 md:grid-cols-3">
+                <div className="text-center">
+                  <div className="text-3xl font-bold text-brand-700">1</div>
+                  <div className="mt-1 text-sm text-slate-600">Major Project Currently Ongoing</div>
+                </div>
+                <div className="text-center">
+                  <div className="text-3xl font-bold text-brand-700">2</div>
+                  <div className="mt-1 text-sm text-slate-600">Exciting New Projects Upcoming</div>
+                </div>
+                <div className="text-center">
+                  <div className="text-3xl font-bold text-brand-700">+</div>
+                  <div className="mt-1 text-sm text-slate-600">Many More in Pipeline</div>
+                </div>
+              </div>
+            </div>
+            <p className="rounded-lg bg-brand-50 p-4 text-sm font-medium text-brand-800">
+              <strong>We are here to guide your society through every step</strong>—from legal approvals to handover. Don't just renovate, reimagine.
+            </p>
+          </div>
+          <div className="card overflow-hidden p-8 bg-gradient-to-br from-brand-50 to-brand-100">
+            <div className="space-y-4">
+              <div className="rounded-lg bg-white p-6 shadow-sm">
+                <div className="mb-2 flex items-center gap-2">
+                  <div className="h-3 w-3 rounded-full bg-brand-600"></div>
+                  <span className="text-sm font-semibold text-slate-900">Transparent Process</span>
+                </div>
+                <p className="mt-2 text-sm text-slate-600">Clear communication at every stage</p>
+              </div>
+              <div className="rounded-lg bg-white p-6 shadow-sm">
+                <div className="mb-2 flex items-center gap-2">
+                  <div className="h-3 w-3 rounded-full bg-brand-600"></div>
+                  <span className="text-sm font-semibold text-slate-900">Seamless Transition</span>
+                </div>
+                <p className="mt-2 text-sm text-slate-600">Minimal disruption to residents</p>
+              </div>
+              <div className="rounded-lg bg-white p-6 shadow-sm">
+                <div className="mb-2 flex items-center gap-2">
+                  <div className="h-3 w-3 rounded-full bg-brand-600"></div>
+                  <span className="text-sm font-semibold text-slate-900">Legal Expertise</span>
+                </div>
+                <p className="mt-2 text-sm text-slate-600">Complete guidance on approvals</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Reveal>
+    );
+  }
+
+  // No intro for other sections (SRA, etc.)
+  return null;
+}
+

src/components/ServicesGrid.jsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import Reveal from './Reveal.jsx';
+import ImageFlex from './ImageFlex.jsx';
+
+const SERVICES = [
+  {
+    id: 'real-estate-development',
+    title: 'Real Estate Development',
+    to: '/projects/development',
+    description:
+      'Concept to completion across mixed‑use, residential, commercial, and retail.',
+    image: '/assets/cutouts/development.png' // TODO: replace with silhouette cutout
+  },
+  {
+    id: 'redevelopment',
+    title: 'Redevelopment',
+    to: '/projects/redevelopment',
+    description:
+      'Transforming existing assets through structural upgrades and modern amenities.',
+    image: '/assets/cutouts/redevelopment.png' // TODO: replace with silhouette cutout
+  },
+  {
+    id: 'construction',
+    title: 'Project Contracting',
+    to: '/projects/construction',
+    description:
+      'Full‑scope civil and structural execution with safety and quality controls.',
+    image: '/assets/cutouts/construction.png' // TODO: replace with silhouette cutout
+  },
+  {
+    id: 'project-management',
+    title: 'Project Management',
+    to: '/projects/construction',
+    description:
+      'Planning, procurement, vendor coordination, and reporting for delivery certainty.',
+    image: '/assets/cutouts/management.png' // TODO: replace with silhouette cutout
+  }
+];
+
+export default function ServicesGrid() {
+  return (
+    <section className="section" aria-labelledby="services-heading">
+      <div className="container">
+            <header className="mb-10 text-center">
+              <h2 id="services-heading" className="h2">Our Expertise</h2>
+          <p className="lead mt-3">
+            End‑to‑end construction services tailored to residential and commercial needs.
+            {/* TODO: replace with jadeinfra.in services summary */}
+          </p>
+        </header>
+        <ul className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4">
+          {SERVICES.map((s, i) => (
+            <li key={s.id}>
+              <Reveal delay={i * 80}>
+                <Link
+                  to={s.to}
+                  className="group relative block overflow-hidden rounded-2xl border border-slate-200 bg-white
+                             transition transform hover:-translate-y-1 hover:shadow-lg hover:bg-brand-600 min-h-[300px]
+                             before:pointer-events-none before:absolute before:inset-0 before:rounded-2xl before:bg-brand-600/0 before:blur before:transition before:duration-300 hover:before:bg-brand-600/10"
+                >
+                  {/* Image cutout */}
+                  <div
+                    className="pointer-events-none absolute right-0 bottom-0 z-20 opacity-100"
+                    aria-hidden="true"
+                  >
+                    <div className="relative h-44 w-28 md:w-32 lg:w-36">
+                      <ImageFlex
+                        base={s.image && s.image.replace(/\.(jpg|jpeg|png|webp)$/i, '')}
+                        alt=""
+                        className="absolute inset-0 h-full w-full object-contain"
+                      />
+                    </div>
+                  </div>
+                  <div className="relative z-10 p-8">
+                    <h3 className="h3 relative z-10 transition-colors group-hover:text-white">{s.title}</h3>
+                    <p className="mt-2 text-sm text-slate-600 relative z-10 transition-colors group-hover:text-white/90">
+                      {s.description}
+                    </p>
+                    <span className="mt-5 inline-flex items-center text-sm font-medium text-brand-700 transition-colors
+                                   group-hover:text-white">
+                      Learn more →
+                    </span>
+                  </div>
+                </Link>
+              </Reveal>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  );
+}
+
+

src/components/StatsCounter.jsx

@@ -0,0 +1,69 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+export default function StatsCounter({ value, label, duration = 1200, suffix = '', accent = false, decimals = 0 }) {
+  const [display, setDisplay] = useState(0);
+  const elRef = useRef(null);
+  const startedRef = useRef(false);
+
+  useEffect(() => {
+      const el = elRef.current;
+    if (!el) return;
+
+    const onEnter = (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting && !startedRef.current) {
+          startedRef.current = true;
+          const start = performance.now();
+            const target = Number(value);
+          const step = (t) => {
+            const p = Math.min(1, (t - start) / duration);
+              const raw = p * target;
+              if (decimals > 0) {
+                setDisplay(Number(raw.toFixed(decimals)));
+              } else {
+                setDisplay(Math.floor(raw));
+              }
+            if (p < 1) requestAnimationFrame(step);
+          };
+          requestAnimationFrame(step);
+        }
+      });
+    };
+
+    const obs = new IntersectionObserver(onEnter, { threshold: 0.4 });
+    obs.observe(el);
+    return () => obs.disconnect();
+  }, [value, duration]);
+
+  const formatNumber = (n) => {
+    if (decimals > 0) {
+      // Keep fixed decimals but still use locale for thousands if ever needed
+      return Number(n).toLocaleString(undefined, {
+        minimumFractionDigits: decimals,
+        maximumFractionDigits: decimals
+      });
+    }
+    return Number(n).toLocaleString();
+  };
+
+  const counterContent = (
+    <span className="text-4xl font-extrabold text-brand-700">
+      {formatNumber(display)}{suffix}
+    </span>
+  );
+
+  return (
+    <div ref={elRef} className="text-center">
+      {accent ? (
+        <div className="inline-block rounded-full bg-accent/20 px-6 py-2 shadow-[0_0_18px_rgba(211,155,35,0.35)] backdrop-blur-sm">
+          {counterContent}
+        </div>
+      ) : (
+        counterContent
+      )}
+      <div className="mt-3 text-sm text-slate-600">{label}</div>
+    </div>
+  );
+}
+
+

src/components/YouTubeEmbed.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+
+/**
+ * Extracts YouTube video ID from various URL formats
+ * Supports:
+ * - https://www.youtube.com/watch?v=VIDEO_ID
+ * - https://youtu.be/VIDEO_ID
+ * - https://www.youtube.com/embed/VIDEO_ID
+ * - Direct VIDEO_ID
+ */
+function extractVideoId(url) {
+  if (!url) return null;
+  
+  // If it's already just an ID (no URL)
+  if (!url.includes('http') && !url.includes('youtube') && !url.includes('youtu.be')) {
+    return url;
+  }
+
+  // Extract from various YouTube URL formats
+  const patterns = [
+    /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([^&\n?#]+)/,
+    /^([a-zA-Z0-9_-]{11})$/ // Direct ID
+  ];
+
+  for (const pattern of patterns) {
+    const match = url.match(pattern);
+    if (match && match[1]) {
+      return match[1];
+    }
+  }
+
+  return null;
+}
+
+export default function YouTubeEmbed({ url, title = 'Project walkthrough video' }) {
+  const videoId = extractVideoId(url);
+
+  if (!videoId) {
+    return null;
+  }
+
+  const embedUrl = `https://www.youtube.com/embed/${videoId}?rel=0&modestbranding=1`;
+
+  return (
+    <section className="mt-8" aria-labelledby="walkthrough-heading">
+      <h2 id="walkthrough-heading" className="h3 mb-4">Walkthrough Video</h2>
+      <div className="relative aspect-video overflow-hidden rounded-xl bg-slate-100">
+        <iframe
+          src={embedUrl}
+          title={title}
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+          className="absolute inset-0 w-full h-full"
+          loading="lazy"
+        />
+      </div>
+    </section>
+  );
+}
+

src/global/style.css

@@ -0,0 +1,23 @@
+/* Tailwind directives are in src/styles/global.css. This file uses plain CSS only. */
+
+/* Base resets and variables */
+:root {
+  --container-max: 1200px;
+}
+
+html {
+scroll-behavior: smooth;
+}
+
+/* Keep body styling minimal here; Tailwind handles typography/colors */
+
+
+.container-max {
+  max-width: var(--container-max);
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+/* Class hooks are provided by Tailwind in src/styles/global.css */

src/main.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App.jsx';
+import './styles/global.css';
+
+const root = document.getElementById('root');
+createRoot(root).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+);

src/pages/About.jsx

@@ -0,0 +1,463 @@
+import React, { useEffect, useRef, useState } from 'react';
+import Reveal from '../components/Reveal.jsx';
+import ImageFlex from '../components/ImageFlex.jsx';
+
+function TimelineItem({ align = 'left', year, title, children, lineHeight = 0 }) {
+  const ref = useRef(null);
+  const yearRef = useRef(null);
+  const [visible, setVisible] = useState(false);
+  const [isEnlarged, setIsEnlarged] = useState(false);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const obs = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setVisible(true);
+          obs.unobserve(entry.target);
+        }
+      },
+      { threshold: 0.3 }
+    );
+    obs.observe(el);
+    return () => obs.disconnect();
+  }, []);
+
+  useEffect(() => {
+    const yearEl = yearRef.current;
+    const timelineEl = yearEl?.closest('[data-timeline-container]');
+    if (!yearEl || !timelineEl) return;
+
+    const updateEnlarged = () => {
+      const timelineRect = timelineEl.getBoundingClientRect();
+      const yearRect = yearEl.getBoundingClientRect();
+      // Calculate year badge position relative to timeline container top
+      const yearPositionFromTop = yearRect.top - timelineRect.top + (yearRect.height / 2);
+      
+      // Check if the line has reached or passed the year badge center
+      const reached = lineHeight >= yearPositionFromTop;
+      setIsEnlarged(reached);
+    };
+
+    updateEnlarged();
+    // Also update on scroll/resize
+    window.addEventListener('scroll', updateEnlarged, { passive: true });
+    window.addEventListener('resize', updateEnlarged);
+    return () => {
+      window.removeEventListener('scroll', updateEnlarged);
+      window.removeEventListener('resize', updateEnlarged);
+    };
+  }, [lineHeight]);
+
+  const card = (
+    <div
+      ref={ref}
+      className={
+        'card relative bg-white p-6 md:p-8 transition ' +
+        (visible
+          ? 'shadow-[0_12px_40px_rgba(0,0,0,0.08)] ring-1 ring-brand-600/20'
+          : 'shadow-card')
+      }
+    >
+      <h3 className="h3">{title}</h3>
+      <div className="mt-3 text-slate-700">{children}</div>
+    </div>
+  );
+
+  const yearBadge = (
+    <div className="sticky top-28" ref={yearRef}>
+      <div
+        className={`inline-flex items-center justify-center rounded-full bg-brand-600 px-3 py-1.5 text-sm font-semibold text-white shadow-lg transition-all duration-500 ease-out ${
+          isEnlarged ? 'scale-125 md:scale-150' : 'scale-100'
+        }`}
+      >
+        {year}
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="relative grid grid-cols-1 items-start gap-4 md:grid-cols-2">
+      {align === 'left' ? (
+        <>
+          <div className="md:pr-8">{card}</div>
+          <div className="md:pl-8 md:text-left">{yearBadge}</div>
+        </>
+      ) : (
+        <>
+          <div className="order-2 md:order-2 md:pl-8">{card}</div>
+          <div className="order-1 md:order-1 md:pr-8 md:text-right">{yearBadge}</div>
+        </>
+      )}
+    </div>
+  );
+}
+
+export default function About() {
+  const historyRef = useRef(null);
+  const [lineH, setLineH] = useState(0);
+
+  useEffect(() => {
+    const el = historyRef.current;
+    if (!el) return;
+    const onScroll = () => {
+      const rect = el.getBoundingClientRect();
+      const viewport = window.innerHeight || 0;
+      // progress of section revealed in viewport
+      const revealed = Math.min(rect.height, Math.max(0, viewport - rect.top));
+      // Keep a visual margin while scrolling, but allow completion near the end
+      const buffer = 120; // px margin from bottom during scroll
+      const threshold = rect.height - buffer;
+      const grow =
+        revealed >= threshold
+          ? rect.height // complete the line when near the end
+          : Math.max(0, revealed - buffer);
+      setLineH(grow);
+    };
+    onScroll();
+    window.addEventListener('scroll', onScroll, { passive: true });
+    window.addEventListener('resize', onScroll);
+    return () => {
+      window.removeEventListener('scroll', onScroll);
+      window.removeEventListener('resize', onScroll);
+    };
+  }, []);
+
+  return (
+    <article className="section" aria-labelledby="about-heading">
+      <div className="container">
+        <Reveal>
+          <div className="mb-4 inline-block rounded-full bg-brand-100 px-4 py-1.5 text-sm font-semibold text-brand-700">
+            Building Trust Since 1987
+          </div>
+          <h1 id="about-heading" className="h2 mb-8">About Jade Infra</h1>
+        </Reveal>
+        
+        <div className="grid gap-10 md:grid-cols-2 md:items-center">
+          <Reveal>
+            <div className="space-y-6">
+              <p className="text-lg leading-relaxed text-slate-700">
+                For over three decades, Jade Infra has been a cornerstone of the infrastructure and real estate landscape. 
+                Founded on principles of integrity and engineering excellence, we have grown from a specialized construction 
+                contractor to a holistic developer, manager, and redeveloper of commercial and residential assets.
+              </p>
+              <p className="text-lg leading-relaxed text-slate-700">
+                With over <strong className="text-brand-700">75 successful projects</strong> (25+ developed, 70+ contracted) to our name, 
+                we pride ourselves on a proven track record of delivering quality, guaranteeing value, and fostering long-term 
+                trust with every stakeholder.
+              </p>
+              <div className="grid grid-cols-3 gap-4 pt-4">
+                <div className="text-center rounded-lg bg-brand-50 p-4">
+                  <div className="text-3xl font-bold text-brand-700">75+</div>
+                  <div className="mt-1 text-xs text-slate-600">Total Projects</div>
+                </div>
+                <div className="text-center rounded-lg bg-brand-50 p-4">
+                  <div className="text-3xl font-bold text-brand-700">38+</div>
+                  <div className="mt-1 text-xs text-slate-600">Years</div>
+                </div>
+                <div className="text-center rounded-lg bg-brand-50 p-4">
+                  <div className="text-3xl font-bold text-brand-700">25+</div>
+                  <div className="mt-1 text-xs text-slate-600">Developed</div>
+                </div>
+              </div>
+            </div>
+          </Reveal>
+          <Reveal delay={120}>
+            <div className="card overflow-hidden shadow-lg">
+              <ImageFlex
+                base="/assets/rbtojade"
+                alt="Jade Infra - Building Trust Since 1987"
+                className="h-96 w-full object-cover"
+              />
+            </div>
+          </Reveal>
+        </div>
+
+        {/* Our History */}
+        <section className="mt-16" aria-labelledby="history-heading">
+          <div className="container">
+            <Reveal>
+              <header className="mb-12 text-center">
+                <h2 id="history-heading" className="h2">Our History</h2>
+                <p className="lead mt-2">From R.B. Constructions to Jade Infra</p>
+              </header>
+            </Reveal>
+
+            <div className="relative pb-20" ref={historyRef} data-timeline-container>
+              {/* Vertical timeline line with scroll growth */}
+              <div
+                className="pointer-events-none absolute left-1/2 top-0 bottom-16 -translate-x-1/2 w-[3px] bg-brand-600/15"
+                aria-hidden="true"
+              >
+                <div
+                  className="absolute left-0 top-0 h-0 w-full rounded-full bg-brand-600/70 transition-[height] duration-300 ease-out will-change-[height] shadow-[0_0_10px_rgba(0,119,70,0.35)]"
+                  style={{ height: `${lineH}px` }}
+                />
+              </div>
+              <div className="space-y-10">
+                <Reveal>
+                  <TimelineItem align="left" year="1987" title="The Foundation: R.B. Constructions" lineHeight={lineH}>
+                    <p>
+                      The story of Jade Infra is a journey spanning over three decades, built on a foundation of hard work,
+                      meticulous growth, and a dedicated workforce. Our legacy began when Mr. Bharat B. Jain, drawing on
+                      experience gained since 1983 with M/S. Kumar Group (now Kumar Properties), incorporated the proprietorship
+                      firm R.B. Constructions, Civil Engineers & Contractors. Since its inception, the company established a
+                      reputation for overseeing the execution of contracting works with dedication and hard work, successfully
+                      transitioning into a reputable civil contractor and developer.
+                    </p>
+                  </TimelineItem>
+                </Reveal>
+                <Reveal delay={80}>
+                  <TimelineItem align="right" year="1995" title="Growth and Expansion" lineHeight={lineH}>
+                    <p>
+                      The journey of growth continued when Mr. Jayesh Jain, a Diploma holder in Civil Engineering, joined
+                      the venture after several years as a Site Supervisor and Project Incharge. Working together under R.B.
+                      Constructions and various sister firms, the brothers collectively made a significant mark in the real
+                      estate and property development sector for over 25 years. Mr. Jayesh Jain's technical expertise ensured
+                      a consistent focus on precision, quality, and maintaining high standards in execution.
+                    </p>
+                  </TimelineItem>
+                </Reveal>
+                <Reveal delay={120}>
+                  <TimelineItem align="left" year="2012" title="A New Identity: Jade Infra" lineHeight={lineH}>
+                    <p>
+                      To keep pace with changing times and skylines while honoring its established legacy, a new firm was
+                      established: Jade Infra. This new identity was born as Mr. Ritesh Jain, a Bachelor of Architecture,
+                      joined the business. Having worked as an architect in Mumbai, Mr. Ritesh Jain's arrival initiated a
+                      complete branding makeover, bringing a modernist outlook and focusing on design, legal, and financial aspects.
+                    </p>
+                  </TimelineItem>
+                </Reveal>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+
+      {/* Our Brand Story */}
+      <section className="mt-16" aria-labelledby="brand-story-heading">
+        <div className="container">
+          <Reveal>
+            <header className="mb-8 text-center">
+              <h2 id="brand-story-heading" className="h2">Our Brand Story</h2>
+              <p className="lead mt-2">Adapting the Legacy</p>
+            </header>
+          </Reveal>
+          <Reveal>
+            <div className="card p-6 md:p-10 bg-white shadow-card">
+              <p className="text-slate-700">
+                The transition to <strong>Jade Infra</strong> was driven by the principles of
+                <strong> Adapt</strong>, <strong> Design Driven</strong>, <strong> Meticulous</strong>,
+                <strong> Approachable</strong>, and <strong> Socially Responsible</strong>. Our new identity
+                integrates the prudence, simplicity, and confidence developed over time. We honor the legacy of
+                R.B. Constructions while focusing on continual up‑gradation in infrastructure, innovative design,
+                and in‑depth market study.
+              </p>
+              <p className="mt-4 text-slate-700">
+                Today, with a strong foundation, ample site experience, and practical knowledge, Jade Infra focuses
+                on <strong>Turn‑Key Projects & Development</strong>, with a vision to be one of the finest real estate
+                and property developers and a torchbearer for making Pune a “Smart Pune.”
+              </p>
+            </div>
+          </Reveal>
+        </div>
+      </section>
+
+      {/* Our Leadership */}
+      <div className="mt-20">
+        <Reveal>
+          <header className="mb-10 text-center">
+            <h2 className="h2">Our Leadership</h2>
+            <p className="lead mt-3">A foundation of experience and vision</p>
+          </header>
+        </Reveal>
+        <div className="space-y-10">
+          {/* Bharat B. Jain (align left) */}
+          <Reveal>
+            <article className="overflow-hidden rounded-2xl border border-slate-200 bg-gradient-to-br from-brand-50 to-white shadow-card md:mr-auto">
+              <div className="flex flex-col md:flex-row md:items-center">
+                <div className="md:w-[38%] flex justify-center md:justify-start p-6 md:pl-10 md:pr-0">
+                  <div className="relative w-full max-w-xs">
+                    <div className="absolute -top-8 -left-6 hidden h-40 w-40 rounded-full bg-brand-200/60 blur-3xl md:block"></div>
+                    <ImageFlex
+                      base="/assets/leadership/bharat"
+                      alt="Mr. Bharat B. Jain"
+                      className="relative z-10 mx-auto max-h-64 w-auto object-contain"
+                    />
+                  </div>
+                </div>
+                <div className="relative md:w-[62%] md:pl-10 md:pr-20 md:py-10 p-6">
+                  <div className="mb-2 inline-block rounded-full bg-brand-100 px-3 py-1 text-xs font-semibold text-brand-700">Finance & Strategy</div>
+                  <h3 className="h3">Mr. Bharat B. Jain</h3>
+                  <p className="text-sm font-semibold text-brand-700">The Founder & Financial Strategist</p>
+                  <p className="mt-3 text-slate-700">
+                    Since founding the predecessor firm in 1987, Mr. Bharat B. Jain has been the cornerstone of the
+                    organization's success. Drawing on early experience from 1983, he has transitioned from a dedicated
+                    Civil Contractor to a robust Real Estate Developer.
+                  </p>
+                  <p className="mt-2 text-slate-700">
+                    Today, he strategically manages Legal, Finance, and Accounts, ensuring fiscal strength and regulatory
+                    compliance across all ongoing projects. He is the ultimate guardian of the company's value and goodwill.
+                  </p>
+                </div>
+              </div>
+            </article>
+          </Reveal>
+
+          {/* Jayesh B. Jain (align right) */}
+          <Reveal delay={80}>
+            <article className="overflow-hidden rounded-2xl border border-slate-200 bg-gradient-to-br from-brand-50 to-white shadow-card md:ml-auto">
+              <div className="flex flex-col md:flex-row md:items-center">
+                <div className="order-2 md:order-2 md:w-[38%] flex justify-center md:justify-end p-6 md:pr-10 md:pl-0">
+                  <div className="relative w-full max-w-xs">
+                    <div className="absolute -top-6 -right-6 hidden h-40 w-40 rounded-full bg-brand-200/60 blur-3xl md:block"></div>
+                    <ImageFlex
+                      base="/assets/leadership/jayesh"
+                      alt="Mr. Jayesh B. Jain"
+                      className="relative z-10 mx-auto max-h-64 w-auto object-contain"
+                    />
+                  </div>
+                </div>
+                <div className="order-1 md:order-1 md:w-[62%] md:pr-20 md:pl-10 md:py-10 p-6">
+                  <div className="mb-2 inline-block rounded-full bg-brand-100 px-3 py-1 text-xs font-semibold text-brand-700">Execution & Quality</div>
+                  <h3 className="h3">Mr. Jayesh B. Jain</h3>
+                  <p className="text-sm font-semibold text-brand-700">The Technical Head & Execution Master</p>
+                  <p className="mt-3 text-slate-700">
+                    Joining the leadership in 1995, Mr. Jayesh B. Jain provides the technical mastery that defines our
+                    construction quality. Being a civil engineer, he is renowned for precision and practical know‑how.
+                  </p>
+                  <p className="mt-2 text-slate-700">
+                    He is highly experienced in the single‑handed execution of civil works, ensuring each project
+                    is delivered with the highest quality standards and technical integrity, on time and to specification.
+                  </p>
+                </div>
+              </div>
+            </article>
+          </Reveal>
+
+          {/* Ritesh B. Jain (align left again) */}
+          <Reveal delay={160}>
+            <article className="overflow-hidden rounded-2xl border border-slate-200 bg-gradient-to-br from-brand-50 to-white shadow-card md:mr-auto">
+              <div className="flex flex-col md:flex-row md:items-center">
+                <div className="md:w-[38%] flex justify-center md:justify-start p-6 md:pl-10 md:pr-0">
+                  <div className="relative w-full max-w-xs">
+                    <div className="absolute -top-6 -left-6 hidden h-40 w-40 rounded-full bg-brand-200/60 blur-3xl md:block"></div>
+                    <ImageFlex
+                      base="/assets/leadership/ritesh"
+                      alt="Mr. Ritesh B. Jain"
+                      className="relative z-10 mx-auto max-h-64 w-auto object-contain"
+                    />
+                  </div>
+                </div>
+                <div className="md:w-[62%] md:pl-10 md:pr-20 md:py-10 p-6">
+                  <div className="mb-2 inline-block rounded-full bg-brand-100 px-3 py-1 text-xs font-semibold text-brand-700">Design & Brand</div>
+                  <h3 className="h3">Mr. Ritesh B. Jain</h3>
+                  <p className="text-sm font-semibold text-brand-700">The Visionary & Design Strategist</p>
+                  <p className="mt-3 text-slate-700">
+                    Mr. Ritesh B. Jain, B.Arch, brings a modern, aesthetic, and forward‑thinking perspective since 2012.
+                    After experience as an Architect in Mumbai, he spearheaded the rebranding and transition to Jade Infra.
+                  </p>
+                  <p className="mt-2 text-slate-700">
+                    His expertise spans Design, Aesthetics, and Branding, while also overseeing aspects of Legal and Finance,
+                    ensuring developments are structurally sound, visually appealing, and strategically aligned with market needs.
+                  </p>
+                </div>
+              </div>
+            </article>
+          </Reveal>
+        </div>
+      </div>
+
+      {/* Vision, Mission & Values (moved to end) */}
+      <section className="mt-20" aria-labelledby="mvv-heading">
+        <div className="container">
+          <Reveal>
+            <header className="mb-12 text-center">
+              <h2 id="mvv-heading" className="h2">Vision, Mission & Values</h2>
+              <p className="lead mt-3">The principles that guide everything we do</p>
+            </header>
+          </Reveal>
+          <div className="grid gap-8 md:grid-cols-3">
+            <Reveal>
+              <section className="card p-8 bg-white hover:shadow-lg transition-shadow" aria-labelledby="vision-title">
+                <div className="mb-4 flex items-center gap-3">
+                  <div className="flex h-12 w-12 items-center justify-center rounded-full bg-brand-100">
+                    <svg className="h-6 w-6 text-brand-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                    </svg>
+                  </div>
+                  <h2 id="vision-title" className="h3">Vision</h2>
+                </div>
+                <p className="mt-4 leading-relaxed text-slate-700">
+                  To be the leading and most trusted integrated real estate and infrastructure group, known for transforming
+                  urban landscapes and consistently setting the benchmark for quality, sustainability, and value creation
+                  in every project we undertake.
+                </p>
+              </section>
+            </Reveal>
+            <Reveal delay={80}>
+              <section className="card p-8 bg-white hover:shadow-lg transition-shadow" aria-labelledby="mission-title">
+                <div className="mb-4 flex items-center gap-3">
+                  <div className="flex h-12 w-12 items-center justify-center rounded-full bg-slate-900">
+                    <svg className="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+                    </svg>
+                  </div>
+                  <h2 id="mission-title" className="h3">Mission</h2>
+                </div>
+                <p className="mt-4 leading-relaxed text-slate-700">
+                  To deliver superior value across all our services, from strategic Land Development and large-scale
+                  Construction Management to community-focused Redevelopment. We achieve this by committing to engineering
+                  precision, financial transparency, and timely delivery, ensuring the security and satisfaction of our
+                  clients and partners.
+                </p>
+              </section>
+            </Reveal>
+            <Reveal delay={160}>
+              <section className="card p-8 bg-white hover:shadow-lg transition-shadow" aria-labelledby="values-title">
+                <div className="mb-4 flex items-center gap-3">
+                  <div className="flex h-12 w-12 items-center justify-center rounded-full bg-accent/10">
+                    <svg className="h-6 w-6 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+                    </svg>
+                  </div>
+                  <h2 id="values-title" className="h3">Values</h2>
+                </div>
+                <div className="mt-4 space-y-3">
+                  <div className="flex items-start gap-2">
+                    <span className="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-brand-600"></span>
+                    <p className="text-sm leading-relaxed text-slate-700">
+                      <strong className="text-slate-900">Integrity:</strong> Operating with complete honesty and transparency to build mutual trust.
+                    </p>
+                  </div>
+                  <div className="flex items-start gap-2">
+                    <span className="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-brand-600"></span>
+                    <p className="text-sm leading-relaxed text-slate-700">
+                      <strong className="text-slate-900">Engineering Excellence:</strong> Committing to the highest standards of quality and safety in every structure.
+                    </p>
+                  </div>
+                  <div className="flex items-start gap-2">
+                    <span className="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-brand-600"></span>
+                    <p className="text-sm leading-relaxed text-slate-700">
+                      <strong className="text-slate-900">Value Creation:</strong> Maximizing return on investment for all stakeholders.
+                    </p>
+                  </div>
+                  <div className="flex items-start gap-2">
+                    <span className="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-brand-600"></span>
+                    <p className="text-sm leading-relaxed text-slate-700">
+                      <strong className="text-slate-900">Accountability:</strong> Delivering reliably on deadlines and budgets with unwavering ownership.
+                    </p>
+                  </div>
+                </div>
+              </section>
+            </Reveal>
+          </div>
+        </div>
+      </section>
+    </article>
+  );
+}
+
+

src/pages/Contact.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import ContactForm from '../components/ContactForm.jsx';
+
+export default function Contact() {
+  return (
+    <section className="section" aria-labelledby="contact-heading">
+      <div className="container grid gap-10 md:grid-cols-2">
+        <header>
+          <h1 id="contact-heading" className="h2">Contact Us</h1>
+          <p className="lead mt-3">
+            Reach out for project enquiries, partnerships, or general information.
+          </p>
+          <div className="mt-6 rounded-lg bg-slate-50 p-6">
+            <h2 className="h3">Office</h2>
+            <address className="mt-2 not-italic text-slate-700">
+              Address:{' '}
+              <a
+                className="text-brand-700 hover:underline"
+                href="https://maps.app.goo.gl/4jSpBviv91E6DYCS9"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Click here to view our office location
+              </a>
+              <br />
+              Phone: <a className="text-brand-700" href="tel:+919673009729">+91 96730 09729</a>
+              <br />
+              Email: <a className="text-brand-700" href="mailto:jadeinfrapune@gmail.com">jadeinfrapune@gmail.com</a>
+            </address>
+          </div>
+        </header>
+        <div className="card p-6">
+          <ContactForm />
+        </div>
+      </div>
+    </section>
+  );
+}
+
+

src/pages/Home.jsx

@@ -0,0 +1,263 @@
+import React, { useMemo } from 'react';
+import Hero from '../components/Hero.jsx';
+import Reveal from '../components/Reveal.jsx';
+import ServicesGrid from '../components/ServicesGrid.jsx';
+import StatsCounter from '../components/StatsCounter.jsx';
+import ProjectCard from '../components/ProjectCard.jsx';
+import ImageFlex from '../components/ImageFlex.jsx';
+import { Link } from 'react-router-dom';
+import { ALL_PROJECTS } from './Projects.jsx';
+
+/**
+ * Algorithm to select featured projects:
+ * 1. Prioritize ongoing projects, if they don't fill all slots, add recently completed projects
+ * 2. If ongoing projects exceed slots, prioritize by project size (sq.ft.)
+ * 3. Exclude Construction section projects
+ * 4. Return exactly the requested count
+ */
+function getFeaturedProjects(count = 3) {
+  // Filter out Construction section projects
+  const eligible = ALL_PROJECTS.filter((p) => p.section?.toLowerCase() !== 'construction');
+
+  // Separate Ongoing and Completed projects
+  const ongoing = eligible.filter((p) => p.status === 'Ongoing');
+  const completed = eligible.filter((p) => p.status === 'Completed');
+
+  // Helper to extract numeric value from projectSize (e.g., "50,000 sq.ft." -> 50000)
+  const getSizeValue = (projectSize) => {
+    if (!projectSize) return 0;
+    const match = projectSize.toString().replace(/,/g, '').match(/(\d+)/);
+    return match ? parseInt(match[1], 10) : 0;
+  };
+
+  // Sort Ongoing by project size (biggest first)
+  const sortedOngoing = [...ongoing].sort((a, b) => {
+    const sizeA = getSizeValue(a.projectSize);
+    const sizeB = getSizeValue(b.projectSize);
+    return sizeB - sizeA; // Descending order
+  });
+
+  // Sort Completed by completion date (most recent first)
+  const sortedCompleted = [...completed].sort((a, b) => {
+    const dateA = a.completionDate ? parseInt(a.completionDate, 10) : 0;
+    const dateB = b.completionDate ? parseInt(b.completionDate, 10) : 0;
+    return dateB - dateA; // Descending order (most recent first)
+  });
+
+  // Select featured projects
+  const featured = [];
+  
+  // First, add ongoing projects (up to count)
+  featured.push(...sortedOngoing.slice(0, count));
+  
+  // If we need more, add recently completed projects
+  if (featured.length < count) {
+    const remaining = count - featured.length;
+    featured.push(...sortedCompleted.slice(0, remaining));
+  }
+
+  return featured.slice(0, count);
+}
+
+export default function Home() {
+  // Get featured projects using the algorithm
+  const featuredProjects = useMemo(() => getFeaturedProjects(3), []);
+
+  return (
+    <>
+      <Hero />
+
+      {/* Featured Projects - overlapping hero banner */}
+      <section className="section relative -mt-10 md:-mt-14 lg:-mt-16 z-20" aria-labelledby="featured-heading">
+        <div className="container">
+          <header className="mb-10 text-center">
+            <h2 id="featured-heading" className="h2">Featured Projects</h2>
+            <p className="lead mt-3">
+              A snapshot of our recent residential and commercial work.
+            </p>
+          </header>
+          <ul className="grid grid-cols-1 gap-6 md:grid-cols-3">
+            {featuredProjects.map((p, i) => (
+              <li key={p.slug}>
+                <Reveal delay={i * 80}>
+                  <ProjectCard project={p} />
+                </Reveal>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </section>
+
+      <section className="section" aria-labelledby="stats-heading">
+        <div className="container">
+          <Reveal>
+            <header className="mb-10 text-center">
+              <h2 id="stats-heading" className="h2">Our Track Record</h2>
+              <p className="lead mt-3">Numbers that reflect our commitment and scale.</p>
+            </header>
+          </Reveal>
+          <div className="grid grid-cols-2 gap-8 md:grid-cols-4">
+            <Reveal delay={0}>
+              <StatsCounter value={75} label="Projects Delivered" suffix="+" accent />
+            </Reveal>
+            <Reveal delay={100}>
+              <StatsCounter value={6} label="Ongoing Projects" accent />
+            </Reveal>
+            <Reveal delay={200}>
+              <StatsCounter value={38} label="Years of Experience" suffix="+" accent />
+            </Reveal>
+            <Reveal delay={300}>
+              <StatsCounter value={3.8} label="sq.ft. delivered" suffix="+ Million" accent decimals={1} />
+            </Reveal>
+          </div>
+        </div>
+      </section>
+
+      <section className="section relative z-10 bg-gradient-to-b from-white to-slate-50" aria-labelledby="about-home-heading" style={{ marginTop: 0 }}>
+        <div className="container">
+          <Reveal>
+            <div className="mb-4 inline-block rounded-full bg-brand-100 px-4 py-1.5 text-sm font-semibold text-brand-700">
+              Building Trust Since 1987
+            </div>
+            <h2 id="about-home-heading" className="h2 mb-6">About Jade Infra</h2>
+          </Reveal>
+          <div className="grid items-center gap-10 md:grid-cols-2">
+            <Reveal>
+              <p className="text-lg leading-relaxed text-slate-700">
+                For over three decades, Jade Infra has been a cornerstone of the infrastructure and real estate landscape. 
+                Founded on principles of integrity and engineering excellence, we have grown from a specialized construction 
+                contractor to a holistic developer, manager, and redeveloper of commercial and residential assets.
+              </p>
+              <p className="mt-4 text-lg leading-relaxed text-slate-700">
+                With over <strong className="text-brand-700">75 successful projects</strong> (25+ developed, 70+ contracted) to our name, 
+                we pride ourselves on a proven track record of delivering quality, guaranteeing value, and fostering long-term 
+                trust with every stakeholder.
+              </p>
+              <div className="mt-6">
+                <Link to="/about" className="btn btn-primary">Learn more</Link>
+              </div>
+            </Reveal>
+            <Reveal delay={120}>
+              <div className="card overflow-hidden shadow-lg">
+                <ImageFlex
+                  base="/assets/rbtojade"
+                  alt="Jade Infra - Building Trust Since 1987"
+                  className="h-96 w-full object-cover"
+                />
+              </div>
+            </Reveal>
+          </div>
+        </div>
+      </section>
+
+      <section className="section bg-slate-50" aria-labelledby="bvv-heading">
+        <div className="container">
+          <header className="mb-12 text-center">
+            <h2 id="bvv-heading" className="h2">Vision, Mission & Values</h2>
+            <p className="lead mt-3">The principles that guide everything we do</p>
+          </header>
+          <div className="grid gap-8 md:grid-cols-3">
+            <Reveal>
+              <section className="card p-8 bg-white hover:shadow-lg transition-shadow" aria-labelledby="vision-title">
+                <div className="mb-4 flex items-center gap-3">
+                  <div className="flex h-12 w-12 items-center justify-center rounded-full bg-brand-100">
+                    <svg className="h-6 w-6 text-brand-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                    </svg>
+                  </div>
+                  <h3 id="vision-title" className="h3">Vision</h3>
+                </div>
+                <p className="mt-4 leading-relaxed text-slate-700">
+                  To be the leading and most trusted integrated real estate and infrastructure group, known for transforming 
+                  urban landscapes and consistently setting the benchmark for quality, sustainability, and value creation 
+                  in every project we undertake.
+                </p>
+              </section>
+            </Reveal>
+            <Reveal delay={80}>
+              <section className="card p-8 bg-white hover:shadow-lg transition-shadow" aria-labelledby="mission-title">
+                <div className="mb-4 flex items-center gap-3">
+                  <div className="flex h-12 w-12 items-center justify-center rounded-full bg-slate-900">
+                    <svg className="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+                    </svg>
+                  </div>
+                  <h3 id="mission-title" className="h3">Mission</h3>
+                </div>
+                <p className="mt-4 leading-relaxed text-slate-700">
+                  To deliver superior value across all our services, from strategic Land Development and large-scale 
+                  Construction Management to community-focused Redevelopment. We achieve this by committing to engineering 
+                  precision, financial transparency, and timely delivery, ensuring the security and satisfaction of our 
+                  clients and partners.
+                </p>
+              </section>
+            </Reveal>
+            <Reveal delay={160}>
+              <section className="card p-8 bg-white hover:shadow-lg transition-shadow" aria-labelledby="values-title">
+                <div className="mb-4 flex items-center gap-3">
+                  <div className="flex h-12 w-12 items-center justify-center rounded-full bg-accent/10">
+                    <svg className="h-6 w-6 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+                    </svg>
+                  </div>
+                  <h3 id="values-title" className="h3">Values</h3>
+                </div>
+                <div className="mt-4 space-y-3">
+                  <div className="flex items-start gap-2">
+                    <span className="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-brand-600"></span>
+                    <p className="text-sm leading-relaxed text-slate-700">
+                      <strong className="text-slate-900">Integrity:</strong> Operating with complete honesty and transparency to build mutual trust.
+                    </p>
+                  </div>
+                  <div className="flex items-start gap-2">
+                    <span className="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-brand-600"></span>
+                    <p className="text-sm leading-relaxed text-slate-700">
+                      <strong className="text-slate-900">Engineering Excellence:</strong> Committing to the highest standards of quality and safety in every structure.
+                    </p>
+                  </div>
+                  <div className="flex items-start gap-2">
+                    <span className="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-brand-600"></span>
+                    <p className="text-sm leading-relaxed text-slate-700">
+                      <strong className="text-slate-900">Value Creation:</strong> Maximizing return on investment for all stakeholders.
+                    </p>
+                  </div>
+                  <div className="flex items-start gap-2">
+                    <span className="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-brand-600"></span>
+                    <p className="text-sm leading-relaxed text-slate-700">
+                      <strong className="text-slate-900">Accountability:</strong> Delivering reliably on deadlines and budgets with unwavering ownership.
+                    </p>
+                  </div>
+                </div>
+              </section>
+            </Reveal>
+          </div>
+        </div>
+      </section>
+
+      <ServicesGrid />
+
+      <section className="section" aria-labelledby="cta-heading">
+        <div className="container grid items-center gap-8 rounded-2xl bg-brand-700 px-8 py-12 text-white md:grid-cols-2">
+          <Reveal>
+            <div>
+              <h2 id="cta-heading" className="h2 text-white">Collaborate with us</h2>
+              <p className="mt-2 text-white/90">
+                Tell us about your project and we'll get back within 7 business days.
+              </p>
+            </div>
+          </Reveal>
+          <Reveal delay={150}>
+            <div className="text-right">
+              <Link to="/contact" className="btn btn-ghost border border-white/30">
+                Contact Us
+              </Link>
+            </div>
+          </Reveal>
+        </div>
+      </section>
+    </>
+  );
+}
+
+

src/pages/ProjectDetail.jsx

@@ -0,0 +1,175 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import { ALL_PROJECTS } from './Projects.jsx';
+import ImageSlider from '../components/ImageSlider.jsx';
+import YouTubeEmbed from '../components/YouTubeEmbed.jsx';
+import MapEmbed from '../components/MapEmbed.jsx';
+
+export default function ProjectDetail() {
+  const { slug } = useParams();
+  const project = ALL_PROJECTS.find((p) => p.slug === slug);
+  const [detectedGallery, setDetectedGallery] = useState([]);
+
+  // Auto-detect gallery images if not provided in data
+  useEffect(() => {
+    if (!project) return;
+    if (project.gallery && project.gallery.length > 0) return;
+
+    const maxToCheck = 12; // check up to 12 images by convention
+    const bases = Array.from({ length: maxToCheck }, (_, i) => `/assets/projects/${project.slug}/gallery-${i + 1}`);
+
+    const extensions = ['webp', 'jpg', 'jpeg', 'png'];
+    const existsCache = new Set();
+
+    const checks = bases.map((base) => {
+      return new Promise((resolve) => {
+        let settled = false;
+        for (const ext of extensions) {
+          const img = new Image();
+          img.onload = () => {
+            if (!settled) {
+              existsCache.add(base);
+              settled = true;
+              resolve(true);
+            }
+          };
+          img.onerror = () => {
+            // ignore
+          };
+          img.src = `${base}.${ext}`;
+        }
+        // Give 1.5s for loads; then resolve
+        setTimeout(() => {
+          if (!settled) resolve(false);
+        }, 1500);
+      });
+    });
+
+    Promise.all(checks).then(() => {
+      setDetectedGallery(Array.from(existsCache));
+    });
+  }, [project]);
+
+  if (!project) {
+    return (
+      <section className="section">
+        <div className="container text-center">
+          <h1 className="h2">Project not found</h1>
+          <p className="mt-2 text-slate-600">The project you’re looking for doesn’t exist.</p>
+          <Link to="/" className="btn btn-primary mt-6">Go home</Link>
+        </div>
+      </section>
+    );
+  }
+
+  if (project.noDetail) {
+    return (
+      <section className="section">
+        <div className="container text-center">
+          <h1 className="h2">{project.title}</h1>
+          <p className="mt-2 text-slate-600">
+            Detailed information for this contract project is not available online yet.
+          </p>
+          <Link
+            to={`/projects/${project.section?.toLowerCase() || 'development'}`}
+            className="btn btn-primary mt-6"
+          >
+            Back to {project.section || 'Projects'}
+          </Link>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <article className="section" aria-labelledby="project-title">
+      <div className="container">
+        <nav className="mb-6 text-sm text-slate-600" aria-label="Breadcrumb">
+          <ol className="flex items-center gap-2">
+            <li><Link className="hover:underline" to="/">Home</Link></li>
+            <li>/</li>
+            <li><Link className="hover:underline" to={`/projects/${project.section?.toLowerCase()}`}>{project.section}</Link></li>
+            <li>/</li>
+            <li aria-current="page" className="text-slate-900 font-medium">{project.title}</li>
+          </ol>
+        </nav>
+
+        <header>
+          <h1 id="project-title" className="h2">{project.title}</h1>
+          <p className="mt-1 text-slate-600">
+            {project.location} • {(project.categories || []).join(' + ')}
+          </p>
+        </header>
+
+        <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-3">
+          <div className="md:col-span-2">
+            {/* Image Slider */}
+            {(() => {
+              const images = (project.gallery && project.gallery.length > 0) ? project.gallery : detectedGallery;
+              if (images && images.length > 0) {
+                return <ImageSlider images={images} projectTitle={project.title} />;
+              }
+              return (
+                <div className="overflow-hidden rounded-xl bg-slate-100 aspect-video flex items-center justify-center">
+                  <p className="text-slate-400">No images available</p>
+                </div>
+              );
+            })()}
+
+            <section className="mt-6">
+              <h2 className="h3">Overview</h2>
+              <p className="mt-2 text-slate-700">
+                {project.description}
+              </p>
+            </section>
+
+            {/* Walkthrough Video - Only show if YouTube link is provided */}
+            {project.youtubeUrl && (
+              <YouTubeEmbed url={project.youtubeUrl} title={`${project.title} - Walkthrough Video`} />
+            )}
+          </div>
+          <aside className="card p-6">
+            <h2 className="h3">Key Details</h2>
+            <ul className="mt-3 space-y-2 text-sm text-slate-700">
+              <li><strong>Location:</strong> {project.location}</li>
+              {project.projectSize && (
+                <li><strong>Project Size:</strong> {project.projectSize}</li>
+              )}
+              <li><strong>Status:</strong> {project.status || 'REPLACE_ME'}</li>
+              {project.status === 'Upcoming' ? (
+                <li><strong>Planned Commencement Date:</strong> {project.plannedCommencement || 'REPLACE_ME'}</li>
+              ) : (
+                <li><strong>Commencement Date:</strong> {project.commencement || 'REPLACE_ME'}</li>
+              )}
+              {project.status === 'Completed' && (
+                <li><strong>Completion Date:</strong> {project.completionDate || 'REPLACE_ME'}</li>
+              )}
+              {project.status === 'Ongoing' && (
+                <li><strong>Completion as per RERA:</strong> {project.reraCompletion || 'REPLACE_ME'}</li>
+              )}
+              {(() => {
+                const commenceYear = project.commencement ? parseInt(project.commencement) : null;
+                if (commenceYear && commenceYear >= 2021 && (project.status === 'Completed' || project.status === 'Ongoing')) {
+                  return <li><strong>MAHARERA No.:</strong> {project.reraNo || 'REPLACE_ME'}</li>;
+                }
+                return null;
+              })()}
+            </ul>
+            {project.status === 'Ongoing' && (
+              <div className="mt-6">
+                <Link to="/contact" className="btn btn-primary w-full">Enquire Now</Link>
+              </div>
+            )}
+          </aside>
+        </div>
+
+        {/* Map below details/enquire */}
+        <div className="mt-6 md:mt-10">
+          <MapEmbed address={project.location} title={`${project.title} location`} />
+        </div>
+      </div>
+    </article>
+  );
+}
+
+

src/pages/Projects.jsx

@@ -0,0 +1,1058 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import ProjectCard from '../components/ProjectCard.jsx';
+import Reveal from '../components/Reveal.jsx';
+
+export const ALL_PROJECTS = [
+  {
+    slug: 'siddhesh-yashoda',
+    title: 'Siddhesh Yashoda',
+    location: 'Kothrud, Pune',
+    categories: ['Residential'],
+    section: 'Redevelopment',
+    status: 'Ongoing',
+    commencement: '2023',
+    reraCompletion: '2026',
+    reraNo: 'P52100054124',
+    image: '/assets/projects/siddhesh-yashoda/card',
+    projectSize: 'REPLACE_ME sq.ft. <!-- TODO: replace -->',
+    description:
+      'A Redevelopment Project comprising of 2BHK & 3BHK flats. MAHARera No.: P52100054124 (2023–2026).',
+    // Gallery images - array of image paths (without extension, ImageFlex will handle .webp, .jpg, .jpeg, .png)
+    gallery: [
+      '/assets/projects/siddhesh-yashoda/gallery-1',
+      '/assets/projects/siddhesh-yashoda/gallery-2',
+      '/assets/projects/siddhesh-yashoda/gallery-3',
+      '/assets/projects/siddhesh-yashoda/gallery-4',
+      '/assets/projects/siddhesh-yashoda/gallery-5',
+      '/assets/projects/siddhesh-yashoda/gallery-6'
+    ],
+    projectSize: '67,400 sq.ft.',
+    // YouTube video URL or ID - supports full URLs or just the video ID
+    // Examples: 'https://www.youtube.com/watch?v=VIDEO_ID' or 'https://youtu.be/VIDEO_ID' or just 'VIDEO_ID'
+    youtubeUrl: '' // TODO: Add YouTube link if available
+  },
+  {
+    slug: 'jito-nagar',
+    title: 'JITO Nagar',
+    location: 'Kondhwa Khurd, Pune',
+    categories: ['Residential'],
+    section: 'Development',
+    status: 'Ongoing',
+    commencement: '2022',
+    reraCompletion: '2026',
+    reraNo: 'P52100047920',
+    image: '/assets/projects/jito-nagar/card',
+    projectSize: 'REPLACE_ME sq.ft. <!-- TODO: replace -->',
+    projectSize: '210,000 sq.ft.',
+    description:
+      'PMAY project with 477 compact 1BHK flats in association with JITO Pune Chapter. MAHARera No.: P52100047920 (2022–2026).',
+    // Gallery images for JITO Nagar
+    gallery: [
+      '/assets/projects/jito-nagar/gallery-1',
+      '/assets/projects/jito-nagar/gallery-2',
+      '/assets/projects/jito-nagar/gallery-3',
+      '/assets/projects/jito-nagar/gallery-4',
+      '/assets/projects/jito-nagar/gallery-5',
+      '/assets/projects/jito-nagar/gallery-6',
+      '/assets/projects/jito-nagar/gallery-7',
+    ]
+  },
+  {
+    slug: 'synergy',
+    title: 'Synergy',
+    location: 'Salisbury Park, Pune',
+    categories: ['Residential'],
+    section: 'Construction',
+    status: 'Completed',
+    commencement: '2021',
+    completionDate: '2023',
+    reraNo: 'REPLACE_ME',
+    image: '/assets/projects/synergy/card',
+    projectSize: '136,000 sq.ft.',
+    description: 'Residential construction project developed by Raviraj Realty (2021–2023).'
+  },
+  {
+    slug: 'eisha-pearl',
+    title: 'Eisha Pearl',
+    location: 'Gangadham, Kondhwa Khurd, Pune',
+    categories: ['Residential'],
+    section: 'Development',
+    status: 'Completed',
+    commencement: '2010',
+    completionDate: '2018',
+    image: '/assets/projects/eisha-pearl/card',
+    description:
+      'Residential scheme of ~550 flats (1/2/3 BHK), central open space ~50,000 sq.ft., clubhouse, Jain Temple, and modern amenities (2010–2018).',
+    projectSize: '500,000 sq.ft.'
+  },
+  {
+    slug: 'vardhamanpura-phase-1-2',
+    title: 'Vardhamanpura Phase 1 & 2',
+    location: 'Gultekdi, Market Yard, Pune',
+    categories: ['Residential'],
+    section: 'Development',
+    status: 'Completed',
+    commencement: '2008',
+    completionDate: '2016',
+    image: '/assets/projects/vardhamanpura/card',
+    projectSize: 'REPLACE_ME sq.ft. <!-- TODO: replace -->',
+    projectSize: '800,000 sq.ft.',
+    description:
+      '460 flats with 2/3/4 BHK luxurious homes; Jain Temple and amenities. Phase 1 (2008–2012), Phase 2 (2014–2016).'
+  },
+  {
+    slug: 'highway-bliss',
+    title: 'Highway Bliss',
+    location: 'Ambegaon Budruk, Pune',
+    categories: ['Mixed Use'],
+    section: 'Development',
+    status: 'Completed',
+    commencement: '2014',
+    completionDate: '2017',
+    image: '/assets/projects/highway-bliss/card',
+    projectSize: 'REPLACE_ME sq.ft. <!-- TODO: replace -->',
+    projectSize: '114,000 sq.ft.',
+    description:
+      '3 wings, 129 flats with commercial spaces (2014–2017). 1, 1.5 & 2 BHK homes in a well-connected serene setting.'
+  },
+  {
+    slug: 'suyog-isha-hills',
+    title: 'Suyog Isha Hills',
+    location: 'Bhilar, Mahabaleshwar',
+    categories: ['Residential'],
+    section: 'Development',
+    status: 'Completed',
+    completionDate: '2008',
+    image: '/assets/projects/suyog-isha-hills/card',
+    projectSize: 'REPLACE_ME sq.ft. <!-- TODO: replace -->',
+    projectSize: '290,000 sq.ft.',
+    description: 'Studio apartments on a sloping site with scenic valley view (Completed 2008).'
+  },
+  {
+    slug: 'isha-emerald-phase-1-2',
+    title: 'Isha Emerald Phase 1 & 2',
+    location: 'Lullanagar–Bibwewadi Road, Market Yard, Pune',
+    categories: ['Residential'],
+    section: 'Development',
+    status: 'Completed',
+    commencement: '2006',
+    completionDate: '2009',
+    image: '/assets/projects/isha-emerald/card',
+    projectSize: 'REPLACE_ME sq.ft. <!-- TODO: replace -->',
+    projectSize: '288,000 sq.ft.',
+    description:
+      'Phase 1: 18 bungalow plots + 172 flats. Phase 2 (E-Building): 22 super luxurious flats. Jain Temple, clubhouse, landscaped area (2006–2009).'
+  },
+  {
+    slug: 'isha-sangam',
+    title: 'Isha Sangam',
+    location: 'Lullanagar–Bibwewadi Road, Market Yard, Pune',
+    categories: ['Residential'],
+    section: 'Development',
+    status: 'Completed',
+    image: '/assets/projects/isha-sangam/card',
+    projectSize: 'REPLACE_ME sq.ft. <!-- TODO: replace -->',
+    projectSize: '70,000 sq.ft.',
+    description:
+      'Residential project of 56 flats in a fast-growing area with strong city connectivity.'
+  },
+  {
+    slug: 'antara',
+    title: 'Antara',
+    location: 'Nanded City, Sinhagad Road, Pune',
+    categories: ['Residential'],
+    section: 'Construction',
+    status: 'Ongoing',
+    image: '/assets/projects/antara/gallery-1',
+    gallery: ['/assets/projects/antara/gallery-1'],
+    projectSize: '26,000 sq.ft.',
+    description: 'Residential construction project developed by Nanded City Development & Construction Company Limited.'
+  },
+  {
+    slug: 'siddhi-new-kusum',
+    title: 'Siddhi New Kusum',
+    location: 'Shankar Sheth Road, Pune',
+    categories: ['Residential'],
+    section: 'Construction',
+    status: 'Ongoing',
+    image: '/assets/projects/siddhi-new-kusum/gallery-1',
+    gallery: ['/assets/projects/siddhi-new-kusum/gallery-1'],
+    projectSize: '135,000 sq.ft.',
+    description: 'Residential construction project by Bhairav Promoters Unit-4.'
+  },
+  {
+    slug: 'kumar-parv',
+    title: 'KUMAR PARV',
+    location: 'Moshi, PCMC',
+    categories: ['Residential'],
+    section: 'Construction',
+    status: 'Ongoing',
+    image: '/assets/projects/kumar-parv/gallery-1',
+    gallery: ['/assets/projects/kumar-parv/gallery-1'],
+    projectSize: '82,000 sq.ft.',
+    description: 'Residential construction by Kumar Properties Life Space Pvt. Ltd.'
+  },
+  {
+    slug: 'anmol',
+    title: 'ANMOL',
+    location: 'Salisbury Park, Pune',
+    categories: ['Residential'],
+    section: 'Construction',
+    status: 'Ongoing',
+    image: '/assets/projects/anmol/gallery-1',
+    gallery: ['/assets/projects/anmol/gallery-1'],
+    projectSize: '56,600 sq.ft.',
+    description: 'Residential construction by Builtwell Constructions.'
+  },
+  {
+    slug: 'nityanand-apartment',
+    title: 'Nityanand Apartment',
+    location: '592, Budhwar Peth, Pune',
+    categories: ['Residential'],
+    section: 'Construction',
+    status: 'Completed',
+    commencement: '1998',
+    completionDate: '1999',
+    projectSize: '9,000 sq.ft.',
+    description:
+      'Contract works for Parmar Bhandari & Associates at 592, Budhwar Peth (Aug 1998 - Dec 1999).',
+    noDetail: true
+  },
+  {
+    slug: 'wadki-warehouse',
+    title: 'Warehouse',
+    location: 'Wadki Nala, Fursungi Road, Pune',
+    categories: ['Commercial'],
+    section: 'Construction',
+    status: 'Completed',
+    commencement: '1998',
+    completionDate: '1999',
+    projectSize: '16,000 sq.ft.',
+    description:
+      'Logistics facility delivered for Ashok Warehousing Corp at Wadki Nala (Aug 1998 - Sept 1999).',
+    noDetail: true
+  },
+  {
+    slug: 'twin-towers-wanawadi',
+    title: 'Twin Towers',
+    location: 'Wanawadi, Pune',
+    categories: ['Residential'],
+    section: 'Construction',
+    status: 'Completed',
+    commencement: '1998',
+    completionDate: '2002',
+    projectSize: '18,000 sq.ft.',
+    description:
+      'Turnkey structural execution for S. S. Builder at Wanawadi (May 1998 - Aug 2002).',
+    noDetail: true
+  },
+  {
+    slug: 'maxim-pharmaceutical-lab',
+    title: 'Pharmaceutical Lab',
+    location: 'Alandi - Markal Road, Pune',
+    categories: ['Commercial'],
+    section: 'Construction',
+    status: 'Completed',
+    commencement: '1998',
+    completionDate: '1999',
+    projectSize: '13,000 sq.ft.',
+    description:
+      'Specialised laboratory facilities constructed for Maxim Pharmacy at Markal (Mar 1998 - Feb 1999).',
+    noDetail: true
+  },
+  {
+    slug: 'arihant-palace',
+    title: 'Arihant Palace',
+    location: 'Market Yard, Pune',
+    categories: ['Residential'],
+    section: 'Construction',
+    status: 'Completed',
+    commencement: '1998',
+    completionDate: '2000',
+    projectSize: '64,000 sq.ft.',
+    description:
+      'High-rise residential development for Arihant Co-Op. Housing Society (Feb 1998 - Dec 2000).',
+    noDetail: true
+  },
+  {
+    slug: 'legend-classic',
+    title: 'Legend Classic',
+    location: 'Kothrud, Pune',
+    categories: ['Residential'],
+    section: 'Construction',
+    status: 'Completed',
+    commencement: '1998',
+    completionDate: '2001',
+    projectSize: '31,240 sq.ft.',
+    description:
+      'Premium residences constructed for Legend Builders in Kothrud (Jul 1998 - Feb 2001).',
+    noDetail: true
+  },
+  {
+    slug: 'ratnadeep-chambers',
+    title: 'Ratnadeep Chambers',
+    location: '512, Ganesh Peth, Pune',
+    categories: ['Commercial'],
+    section: 'Construction',
+    status: 'Completed',
+    commencement: '2001',
+    completionDate: '2001',
+    projectSize: '9,000 sq.ft.',
+    description:
+      'Commercial chambers for Parmar Bhandari Associates delivered within four months (Jan 2001 - Apr 2001).',
+    noDetail: true
+  },
+  {
+    slug: 'siddhivinayak-vihar',
+    title: 'Siddhivinayak Vihar',
+    location: 'Handewadi Road, Hadapsar, Pune',
+    categories: ['Residential'],
+    section: 'Construction',
+    status: 'Completed',
+    commencement: '1999',
+    completionDate: '2001',
+    projectSize: '110,000 sq.ft.',
+    description:
+      'Large-scale residential enclave for Siddhivinayak Construction (Jun 1999 - Oct 2001).',
+    noDetail: true
+  },
+  {
+    slug: 'regent-park',
+    title: 'Regent Park',
+    location: '30, Gidney Park, Pune',
+    categories: ['Residential'],
+    section: 'Construction',
+    status: 'Completed',
+    commencement: '2000',
+    completionDate: '2002',
+    projectSize: '32,000 sq.ft.',
+    description:
+      'Residential towers for Bhawani Construction Co. in Gidney Park (Aug 2000 - Nov 2002).',
+    noDetail: true
+  },
+  {
+    slug: 'vidya-sahkari-bank',
+    title: 'Vidya Sahkari Bank',
+    location: 'Near Ganraj Hotel, Bajirao Road, Pune',
+    categories: ['Commercial'],
+    section: 'Construction',
+    status: 'Completed',
+    commencement: '1999',
+    completionDate: '2001',
+    projectSize: '15,000 sq.ft.',
+    description:
+      'Bank headquarters completed for Vidya Sahkari Bank Limited (Nov 1999 - Nov 2001).',
+    noDetail: true
+  },
+  {
+    slug: 'pratik-apartment',
+    title: 'Pratik Apartment',
+    location: '314, Rasta Peth, Pune',
+    categories: ['Residential'],
+    section: 'Construction',
+    status: 'Completed',
+    commencement: '2000',
+    completionDate: '2002',
+    projectSize: '11,000 sq.ft.',
+    description:
+      'Residential block executed for Oswal Construction at Rasta Peth (Oct 2000 - May 2002).',
+    noDetail: true
+  },
+  {
+    slug: 'kumar-manor',
+    title: 'Kumar Manor',
+    location: 'Rasta Peth, Pune',
+    categories: ['Residential'],
+    section: 'Construction',
+    status: 'Completed',
+    commencement: '2002',
+    completionDate: '2004',
+    projectSize: '48,000 sq.ft.',
+    description:
+      'Premium apartments delivered for Ashwamegh Constructions and Kumar Builders (2002 - 2004).',
+    noDetail: true
+  },
+  {
+    slug: 'khopkar-heights',
+    title: 'Khopkar Heights',
+    location: 'Quarter Gate, Pune',
+    categories: ['Residential'],
+    section: 'Construction',
+    status: 'Completed',
+    commencement: '2000',
+    completionDate: '2003',
+    projectSize: '32,000 sq.ft.',
+    description:
+      'Multi-storey residences for Nagpal Constructions in Quarter Gate (2000 - 2003).',
+    noDetail: true
+  },
+  {
+    slug: 'tanmay-apartments',
+    title: 'Tanmay Apartments',
+    location: 'Fatima Nagar, Pune',
+    categories: ['Residential'],
+    section: 'Construction',
+    status: 'Completed',
+    commencement: '1999',
+    completionDate: '2001',
+    projectSize: '18,000 sq.ft.',
+    description: 'Residential project contracted for S. S. Builders in Fatima Nagar.',
+    noDetail: true
+  },
+  {
+    slug: 'archies-court',
+    title: "Archie's Court",
+    location: 'Shankar Sheth Road, Pune',
+    categories: ['Commercial'],
+    section: 'Construction',
+    status: 'Completed',
+    commencement: '1999',
+    completionDate: '2001',
+    projectSize: '16,000 sq.ft.',
+    description: 'Commercial development delivered for Achal Constructions on Shankar Sheth Road.',
+    noDetail: true
+  },
+  {
+    slug: 'radiant-paradise',
+    title: 'Radiant Paradise',
+    location: 'Salunke Vihar Road, Kondhwa, Pune',
+    categories: ['Residential'],
+    section: 'Construction',
+    status: 'Completed',
+    commencement: '2001',
+    completionDate: '2004',
+    projectSize: '189,000 sq.ft.',
+    description:
+      'Large township style development executed for Radiant Builders at Salunke Vihar Road.',
+    noDetail: true
+  },
+  {
+    slug: 'kwality-garden',
+    title: 'Kwality Garden',
+    location: 'NIBM Road, Kondhwa, Pune',
+    categories: ['Residential'],
+    section: 'Construction',
+    status: 'Completed',
+    commencement: '2000',
+    completionDate: '2003',
+    projectSize: '72,000 sq.ft.',
+    description: 'Garden themed residential enclave for Kwality Builders at NIBM Road.',
+    noDetail: true
+  },
+  {
+    slug: 'kwality-empress',
+    title: 'Kwality Empress',
+    location: 'St. Patricks Town, Uday Baug, Pune',
+    categories: ['Residential'],
+    section: 'Construction',
+    status: 'Completed',
+    commencement: '1999',
+    completionDate: '2001',
+    projectSize: '23,000 sq.ft.',
+    description: 'Premium residences for Kwality Builders at St. Patricks Town, Uday Baug.',
+    noDetail: true
+  },
+  {
+    slug: 'kumar-sadan',
+    title: 'Kumar Sadan',
+    location: '444, Somwar Peth, Pune',
+    categories: ['Residential'],
+    section: 'Construction',
+    status: 'Completed',
+    commencement: '1998',
+    completionDate: '2000',
+    projectSize: '35,000 sq.ft.',
+    description: 'Urban residential project delivered for Kumar Builders at Somwar Peth.',
+    noDetail: true
+  },
+  {
+    slug: 'nivedita-gardens',
+    title: 'Nivedita Gardens',
+    location: 'NIBM Road, Kondhwa, Pune',
+    categories: ['Residential'],
+    section: 'Construction',
+    status: 'Completed',
+    commencement: '1999',
+    completionDate: '2001',
+    projectSize: '19,000 sq.ft.',
+    description: 'Garden residences executed for Nivedita Builders at NIBM Road.',
+    noDetail: true
+  },
+  {
+    slug: 'kumar-kunj',
+    title: 'Kumar Kunj',
+    location: 'Fatima Nagar, Pune',
+    categories: ['Residential'],
+    section: 'Construction',
+    status: 'Completed',
+    commencement: '2000',
+    completionDate: '2003',
+    projectSize: '130,000 sq.ft.',
+    description: 'High-density housing for Kumar and Gaikwad at Fatima Nagar.',
+    noDetail: true
+  },
+  {
+    slug: 'leela-heights',
+    title: 'Leela Heights',
+    location: 'Bhawani Peth, Pune',
+    categories: ['Residential'],
+    section: 'Construction',
+    status: 'Completed',
+    commencement: '1999',
+    completionDate: '2001',
+    projectSize: '28,000 sq.ft.',
+    description: 'Residential tower opposite Sathe Biscuits in Bhawani Peth.',
+    noDetail: true
+  },
+  {
+    slug: 'nagpals-camp',
+    title: "Nagpal's",
+    location: 'Near Fashion Street, Camp, Pune',
+    categories: ['Residential'],
+    section: 'Construction',
+    status: 'Completed',
+    commencement: '1999',
+    completionDate: '2001',
+    projectSize: '22,000 sq.ft.',
+    description: 'Contracting works for Nagpal Construction Pvt Ltd near Fashion Street.',
+    noDetail: true
+  },
+  {
+    slug: 'radhika-empress',
+    title: 'Radhika Empress',
+    location: 'Wanawadi, Pune',
+    categories: ['Residential'],
+    section: 'Construction',
+    status: 'Completed',
+    commencement: '2000',
+    completionDate: '2002',
+    projectSize: '42,000 sq.ft.',
+    description: 'Lifestyle residences executed for Ranka Shah Associates in Wanawadi.',
+    noDetail: true
+  },
+  {
+    slug: 'radhika-empire',
+    title: 'Radhika Empire',
+    location: 'Wanawadi, Pune',
+    categories: ['Residential'],
+    section: 'Construction',
+    status: 'Completed',
+    commencement: '2000',
+    completionDate: '2002',
+    projectSize: '28,000 sq.ft.',
+    description: 'Complementary residential block for Ranka Shah Associates in Wanawadi.',
+    noDetail: true
+  },
+  {
+    slug: 'siddhivinayak-prastha',
+    title: 'Siddhivinayak Prastha',
+    location: 'Akurdi, Pune',
+    categories: ['Residential'],
+    section: 'Construction',
+    status: 'Completed',
+    commencement: '2001',
+    completionDate: '2004',
+    projectSize: '100,000 sq.ft.',
+    description: 'Township scale project executed for Riddhi Developers at Akurdi.',
+    noDetail: true
+  },
+  {
+    slug: 'gulmohar-habitat',
+    title: 'Gulmohar Habitat',
+    location: 'Fatima Nagar, Pune',
+    categories: ['Residential'],
+    section: 'Construction',
+    status: 'Completed',
+    commencement: '2000',
+    completionDate: '2003',
+    projectSize: '50,000 sq.ft.',
+    description: 'Habitation-focused development for Gulmohar Associates at Fatima Nagar.',
+    noDetail: true
+  },
+  {
+    slug: 'nakoda-bhairav-dharamshala',
+    title: 'Nakoda Bhairav Dharamshala',
+    location: 'Alandi, Pune',
+    categories: ['Mixed Use'],
+    section: 'Construction',
+    status: 'Completed',
+    commencement: '1999',
+    completionDate: '2001',
+    projectSize: '28,000 sq.ft.',
+    description: 'Community dharamshala constructed for Nakoda Trust in Alandi.',
+    noDetail: true
+  },
+  {
+    slug: 'vardhaman-heights',
+    title: 'Vardhaman Heights',
+    location: 'Bajirao Road, Pune',
+    categories: ['Residential'],
+    section: 'Construction',
+    status: 'Completed',
+    commencement: '2001',
+    completionDate: '2003',
+    projectSize: '42,000 sq.ft.',
+    description: 'High-rise residences delivered for Vardhaman Associates at Bajirao Road.',
+    noDetail: true
+  },
+  {
+    slug: 'silver-plaza',
+    title: 'Silver Plaza',
+    location: 'Fatima Nagar, Pune',
+    categories: ['Commercial'],
+    section: 'Construction',
+    status: 'Completed',
+    commencement: '1999',
+    completionDate: '2001',
+    projectSize: '12,000 sq.ft.',
+    description: 'Neighbourhood commercial plaza for Mahavir Promoters & Builders.',
+    noDetail: true
+  },
+  {
+    slug: 'silver-apartment',
+    title: 'Silver Apartment',
+    location: 'Hadapsar, Pune',
+    categories: ['Residential'],
+    section: 'Construction',
+    status: 'Completed',
+    commencement: '1999',
+    completionDate: '2001',
+    projectSize: '24,000 sq.ft.',
+    description: 'Residential tower for Mahavir Promoters & Builders at Hadapsar.',
+    noDetail: true
+  },
+  {
+    slug: 'silver-terrace',
+    title: 'Silver Terrace',
+    location: 'Fatima Nagar, Pune',
+    categories: ['Residential'],
+    section: 'Construction',
+    status: 'Completed',
+    commencement: '1999',
+    completionDate: '2001',
+    projectSize: '14,000 sq.ft.',
+    description: 'Boutique residences for Mahavir Promoters & Builders at Fatima Nagar.',
+    noDetail: true
+  },
+  {
+    slug: 'silver-chambers',
+    title: 'Silver Chambers',
+    location: 'Hadapsar, Pune',
+    categories: ['Commercial'],
+    section: 'Construction',
+    status: 'Completed',
+    commencement: '1999',
+    completionDate: '2001',
+    projectSize: '12,000 sq.ft.',
+    description: 'Commercial complex delivered for Mahavir Promoters & Builders at Hadapsar.',
+    noDetail: true
+  },
+  {
+    slug: 'silver-heights',
+    title: 'Silver Heights',
+    location: 'Fatima Nagar, Pune',
+    categories: ['Residential'],
+    section: 'Construction',
+    status: 'Completed',
+    commencement: '1999',
+    completionDate: '2001',
+    projectSize: '16,000 sq.ft.',
+    description: 'Mid-rise residential block for Mahavir Promoters & Builders at Fatima Nagar.',
+    noDetail: true
+  },
+  {
+    slug: 'legend-park',
+    title: 'Legend Park',
+    location: 'Kondhwa, Pune',
+    categories: ['Residential'],
+    section: 'Construction',
+    status: 'Completed',
+    commencement: '2000',
+    completionDate: '2003',
+    projectSize: '28,000 sq.ft.',
+    description: 'Signature residences executed for Legend Builders at Kondhwa.',
+    noDetail: true
+  },
+  {
+    slug: 'neeta-corner',
+    title: 'Neeta Corner',
+    location: 'Bhawani Peth, Pune',
+    categories: ['Commercial'],
+    section: 'Construction',
+    status: 'Completed',
+    commencement: '1999',
+    completionDate: '2001',
+    projectSize: '14,000 sq.ft.',
+    description: 'Corner commercial building executed for Kumar & Co. at Bhawani Peth.',
+    noDetail: true
+  },
+  {
+    slug: 'saraswati-apartment',
+    title: 'Saraswati Apartment',
+    location: 'Wanawadi, Pune',
+    categories: ['Residential'],
+    section: 'Construction',
+    status: 'Completed',
+    commencement: '1999',
+    completionDate: '2001',
+    projectSize: '22,000 sq.ft.',
+    description: 'Residential project delivered for Kumar & Co. in Wanawadi.',
+    noDetail: true
+  },
+  {
+    slug: 'kg-mansion',
+    title: 'K. G. Mansion',
+    location: 'Apte Road, Pune',
+    categories: ['Residential'],
+    section: 'Construction',
+    status: 'Completed',
+    commencement: '1999',
+    completionDate: '2001',
+    projectSize: '14,000 sq.ft.',
+    description: 'Premium residences executed for Kumar Gaikwad Associates at Apte Road.',
+    noDetail: true
+  },
+  {
+    slug: 'hotel-coronet',
+    title: 'Hotel Coronet',
+    location: 'Apte Road, Pune',
+    categories: ['Commercial'],
+    section: 'Construction',
+    status: 'Completed',
+    commencement: '2002',
+    completionDate: '2004',
+    projectSize: '24,000 sq.ft.',
+    description: 'Hospitality project constructed for Mr. V. Agarwal on Apte Road.',
+    noDetail: true
+  },
+  {
+    slug: 'hotel-orbett',
+    title: 'Hotel Orbett',
+    location: 'Apte Road, Pune',
+    categories: ['Commercial'],
+    section: 'Construction',
+    status: 'Completed',
+    commencement: '2002',
+    completionDate: '2004',
+    projectSize: '26,000 sq.ft.',
+    description: 'Upscale hotel delivered for Mr. B. Agarwal at Apte Road.',
+    noDetail: true
+  },
+  {
+    slug: 'silver-homes',
+    title: 'Silver Homes',
+    location: 'Shivaji Nagar, Pune',
+    categories: ['Residential'],
+    section: 'Construction',
+    status: 'Completed',
+    commencement: '1999',
+    completionDate: '2001',
+    projectSize: '15,000 sq.ft.',
+    description: 'Residential enclave for Mahavir Promoters & Builders at Shivaji Nagar.',
+    noDetail: true
+  },
+  {
+    slug: 'wakad-sra',
+    title: 'Wakad SRA',
+    location: 'Wakad–Tathawade, Pune',
+    categories: ['Mixed Use'],
+    section: 'SRA',
+    status: 'Upcoming',
+    plannedCommencement: 'REPLACE_ME',
+    image: '/assets/projects/wakad-sra/card',
+    projectSize: '1,500,000 sq.ft.',
+    description: 'Mixed-use SRA project by Jai Enterprises (Upcoming).'
+  },
+  {
+    slug: 'vrindavan-condominium',
+    title: 'Vrindavan Condominium',
+    location: 'Shankar Sheth Road, Pune',
+    categories: ['Residential', 'Retail'],
+    section: 'Redevelopment',
+    status: 'Upcoming',
+    plannedCommencement: 'June 2026',
+    image: '/assets/projects/vrindavan-condominium/card',
+    projectSize: '259,000 sq.ft.',
+    description: 'Redevelopment with residential and retail components (Planned June 2026).'
+  },
+  {
+    slug: 'kashewadi-sra',
+    title: 'Kashewadi SRA',
+    location: 'Pune',
+    categories: ['Residential'],
+    section: 'SRA',
+    status: 'Completed',
+    completionDate: '2008',
+    image: '/assets/projects/kashewadi-sra/card',
+    projectSize: '190,000 sq.ft.',
+    description: 'SRA residential project by Saubhagyalakshmi Developers (Completed 2008).'
+  },
+  {
+    slug: 'eisha-gems',
+    title: 'Eisha Gems',
+    location: 'Pune',
+    categories: ['Residential'],
+    section: 'Development',
+    status: 'Completed',
+    completionDate: '2014',
+    image: '/assets/projects/eisha-gems/card',
+    projectSize: 'REPLACE_ME sq.ft. <!-- TODO: replace -->',
+    projectSize: '25,000 sq.ft.',
+    description: 'Residential development by Jain Ashapuri Developers – Unit 2 (Completed 2014).'
+  },
+  {
+    slug: 'isha-vastu',
+    title: 'Isha Vastu',
+    location: 'Pune',
+    categories: ['Residential'],
+    section: 'Development',
+    status: 'Completed',
+    completionDate: '2007',
+    image: '/assets/projects/isha-vastu/card',
+    projectSize: 'REPLACE_ME sq.ft. <!-- TODO: replace -->',
+    projectSize: '16,000 sq.ft.',
+    description: 'Residential development by Vastu Estate (Completed 2007).'
+  },
+  {
+    slug: 'modak-prasad',
+    title: 'Modak Prasad',
+    location: 'Pune',
+    categories: ['Residential'],
+    section: 'Development',
+    status: 'Completed',
+    completionDate: '2005',
+    image: '/assets/projects/modak-prasad/card',
+    projectSize: 'REPLACE_ME sq.ft. <!-- TODO: replace -->',
+    projectSize: '18,000 sq.ft.',
+    description: 'Residential development by Gadre & Associates (Completed 2005).'
+  },
+  {
+    slug: 'namo-vihar',
+    title: 'Namo Vihar',
+    location: 'Pune',
+    categories: ['Residential'],
+    section: 'Development',
+    status: 'Completed',
+    completionDate: '2003',
+    image: '/assets/projects/namo-vihar/card',
+    projectSize: 'REPLACE_ME sq.ft. <!-- TODO: replace -->',
+    projectSize: '145,000 sq.ft.',
+    description: 'Residential development by Namo Promoters & Builders (Completed 2003).'
+  },
+  {
+    slug: 'namo-residency',
+    title: 'Namo Residency',
+    location: 'Pune',
+    categories: ['Residential'],
+    section: 'Development',
+    status: 'Completed',
+    completionDate: '2006',
+    image: '/assets/projects/namo-residency/card',
+    projectSize: 'REPLACE_ME sq.ft. <!-- TODO: replace -->',
+    projectSize: '85,000 sq.ft.',
+    description: 'Residential development by Namo Developers & Builders (Completed 2006).'
+  },
+  {
+    slug: 'namo-prastha',
+    title: 'Namo Prastha',
+    location: 'Pune',
+    categories: ['Residential'],
+    section: 'Development',
+    status: 'Completed',
+    completionDate: '2004',
+    image: '/assets/projects/namo-prastha/card',
+    projectSize: 'REPLACE_ME sq.ft. <!-- TODO: replace -->',
+    projectSize: '15,000 sq.ft.',
+    description: 'Residential development by Namo Promoters & Builders (Completed 2004).'
+  },
+  {
+    slug: 'isha-chambers',
+    title: 'Isha Chambers',
+    location: 'Pune',
+    categories: ['Residential'],
+    section: 'Development',
+    status: 'Completed',
+    completionDate: '2006',
+    image: '/assets/projects/isha-chambers/card',
+    projectSize: 'REPLACE_ME sq.ft. <!-- TODO: replace -->',
+    projectSize: '21,000 sq.ft.',
+    description: 'Residential development by Jain Ashapuri Promoters & Builders (Completed 2006).'
+  },
+  {
+    slug: 'isha-heights',
+    title: 'Isha Heights',
+    location: 'Pune',
+    categories: ['Residential'],
+    section: 'Development',
+    status: 'Completed',
+    completionDate: '2005',
+    image: '/assets/projects/isha-heights/card',
+    projectSize: 'REPLACE_ME sq.ft. <!-- TODO: replace -->',
+    projectSize: '36,000 sq.ft.',
+    description: 'Residential development by Jain Ashapuri Promoters & Builders (Completed 2005).'
+  },
+  {
+    slug: 'vastu-sadan',
+    title: 'Vastu Sadan',
+    location: 'Pune',
+    categories: ['Residential'],
+    section: 'Development',
+    status: 'Completed',
+    completionDate: '2004',
+    projectSize: '9,000 sq.ft.',
+    description: 'Residential development by Vastu Developers (Completed 2004).',
+    noDetail: true
+  },
+  {
+    slug: 'isha-tower',
+    title: 'Isha Tower',
+    location: 'Pune',
+    categories: ['Residential'],
+    section: 'Development',
+    status: 'Completed',
+    completionDate: '2004',
+    projectSize: '21,000 sq.ft.',
+    description: 'Residential development by Jain Promoters & Builders (Completed 2004).',
+    noDetail: true
+  },
+  {
+    slug: 'vastu-puram',
+    title: 'Vastu Puram',
+    location: 'Pune',
+    categories: ['Residential'],
+    section: 'Development',
+    status: 'Completed',
+    completionDate: '2003',
+    projectSize: '16,000 sq.ft.',
+    description: 'Residential development by Vastu Promoters & Developers (Completed 2003).',
+    noDetail: true
+  },
+  {
+    slug: 'jayesh-apartment',
+    title: 'Jayesh Apartment',
+    location: 'Pune',
+    categories: ['Residential'],
+    section: 'Development',
+    status: 'Completed',
+    completionDate: '1995',
+    projectSize: '17,000 sq.ft.',
+    description: 'Residential development by R. B. Constructions (Completed 1995).',
+    noDetail: true
+  }
+];
+
+const CATEGORIES = ['All', 'Residential', 'Commercial', 'Retail', 'Mixed Use'];
+const STATUSES = ['All', 'Completed', 'Ongoing', 'Upcoming'];
+const SECTIONS = ['Redevelopment', 'Construction', 'Development'];
+
+export default function Projects() {
+  const [query, setQuery] = useState('');
+  const [filter, setFilter] = useState('All');
+  const [statusFilter, setStatusFilter] = useState('All');
+  const location = useLocation();
+  const sectionParam = new URLSearchParams(location.search).get('section');
+
+  const data = useMemo(() => {
+    return ALL_PROJECTS.filter((p) => {
+      const matchesCategory =
+        filter === 'All' || (Array.isArray(p.categories) && p.categories.includes(filter));
+      const matchesStatus = statusFilter === 'All' || p.status === statusFilter;
+      const q = query.trim().toLowerCase();
+      const matchesQuery =
+        !q ||
+        p.title.toLowerCase().includes(q) ||
+        p.location.toLowerCase().includes(q) ||
+        p.description.toLowerCase().includes(q);
+      return matchesCategory && matchesStatus && matchesQuery;
+    });
+  }, [filter, statusFilter, query]);
+
+  // Scroll to requested section if provided
+  useEffect(() => {
+    if (sectionParam) {
+      const id = `sec-${sectionParam}`;
+      const el = document.getElementById(id);
+      if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  }, [sectionParam]);
+
+  return (
+    <section className="section" aria-labelledby="projects-heading">
+      <div className="container">
+        <header className="mb-8 text-center">
+          <h1 id="projects-heading" className="h2">Projects</h1>
+          <p className="lead mt-3">
+            Explore our residential and commercial portfolio.
+            {/* TODO: replace with official project list and photos from jadeinfra.in */}
+          </p>
+        </header>
+
+        <div className="mb-6 grid grid-cols-1 gap-3 md:grid-cols-4">
+          <div className="md:col-span-2">
+            <label htmlFor="search" className="sr-only">Search</label>
+            <input
+              id="search"
+              placeholder="Search projects"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              className="w-full rounded-md border border-slate-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-brand-600"
+            />
+          </div>
+          <div className="md:col-span-1">
+            <label htmlFor="category-filter" className="block text-sm font-medium text-slate-700">Category</label>
+            <select
+              id="category-filter"
+              value={filter}
+              onChange={(e) => setFilter(e.target.value)}
+              className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-brand-600"
+            >
+              {CATEGORIES.map((c) => (
+                <option key={c} value={c}>{c}</option>
+              ))}
+            </select>
+          </div>
+          <div className="md:col-span-1">
+            <label htmlFor="status-filter" className="block text-sm font-medium text-slate-700">Status</label>
+            <select
+              id="status-filter"
+              value={statusFilter}
+              onChange={(e) => setStatusFilter(e.target.value)}
+              className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-brand-600"
+            >
+              {STATUSES.map((s) => (
+                <option key={s} value={s}>{s}</option>
+              ))}
+            </select>
+          </div>
+        </div>
+
+        
+
+        {SECTIONS.map((sec) => {
+          const items = data.filter((p) => p.section === sec);
+          if (items.length === 0) return null;
+          return (
+            <section key={sec} className="mt-10 first:mt-0" aria-labelledby={`sec-${sec}`}>
+              <div className="mb-6 flex items-center justify-between">
+                <h2 id={`sec-${sec}`} className="h3">{sec}</h2>
+                <div className="h-px flex-1 ml-6 bg-slate-200"></div>
+              </div>
+              <ul className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+                {items.map((p, i) => (
+                  <li key={p.slug}>
+                    <Reveal delay={i * 60}>
+                      <ProjectCard project={p} />
+                    </Reveal>
+                  </li>
+                ))}
+              </ul>
+            </section>
+          );
+        })}
+      </div>
+    </section>
+  );
+}
+
+

src/pages/ProjectsSection.jsx

@@ -0,0 +1,180 @@
+import React, { useMemo, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { ALL_PROJECTS } from './Projects.jsx';
+import ProjectCard from '../components/ProjectCard.jsx';
+import Reveal from '../components/Reveal.jsx';
+import SectionIntro from '../components/SectionIntro.jsx';
+
+const CATEGORIES = ['All', 'Residential', 'Commercial', 'Retail', 'Mixed Use'];
+const STATUSES = ['All', 'Completed', 'Ongoing', 'Upcoming'];
+
+export default function ProjectsSection() {
+  const { sectionId } = useParams();
+  const sectionTitle =
+    sectionId?.toLowerCase() === 'sra'
+      ? 'SRA'
+      : sectionId?.toLowerCase() === 'construction'
+      ? 'Project Contracting'
+      : sectionId?.charAt(0).toUpperCase() + sectionId?.slice(1).toLowerCase();
+
+  const [query, setQuery] = useState('');
+  const [filter, setFilter] = useState('All');
+  const [statusFilter, setStatusFilter] = useState('All');
+
+  const data = useMemo(() => {
+    return ALL_PROJECTS.filter((p) => {
+      const section = p.section?.toLowerCase();
+      const current = sectionId?.toLowerCase();
+      const matchesSection =
+        current === 'construction'
+          ? ['construction', 'development', 'redevelopment'].includes(section)
+          : section === current;
+      const matchesCategory =
+        filter === 'All' || (Array.isArray(p.categories) && p.categories.includes(filter));
+      const matchesStatus = statusFilter === 'All' || p.status === statusFilter;
+      const q = query.trim().toLowerCase();
+      const matchesQuery =
+        !q ||
+        p.title.toLowerCase().includes(q) ||
+        p.location.toLowerCase().includes(q) ||
+        p.description.toLowerCase().includes(q);
+      return matchesSection && matchesCategory && matchesStatus && matchesQuery;
+    });
+  }, [sectionId, filter, statusFilter, query]);
+
+  return (
+    <section className="section" aria-labelledby="projects-section-heading">
+      <div className="container">
+        <header className="mb-8 text-center">
+          <h1 id="projects-section-heading" className="h2">{sectionTitle}</h1>
+          <p className="lead mt-3">Explore our {sectionTitle === 'SRA' ? 'SRA' : sectionTitle?.toLowerCase()} portfolio.</p>
+        </header>
+
+        <SectionIntro sectionId={sectionId} />
+
+        <div className="mb-8 card p-6 bg-gradient-to-br from-slate-50 to-white border-slate-200">
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-4">
+            {/* Search Input */}
+            <div className="md:col-span-2">
+              <label htmlFor="search" className="mb-2 flex items-center gap-2 text-sm font-semibold text-slate-700">
+                <svg className="h-4 w-4 text-brand-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                </svg>
+                Search Projects
+              </label>
+              <div className="relative">
+                <input
+                  id="search"
+                  placeholder="Search by name, location, or description..."
+                  value={query}
+                  onChange={(e) => setQuery(e.target.value)}
+                  className="w-full rounded-lg border border-slate-300 bg-white px-4 py-3 pl-10 shadow-sm transition-all focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20"
+                />
+                <svg className="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                </svg>
+              </div>
+            </div>
+
+            {/* Category Filter */}
+            <div className="md:col-span-1">
+              <label htmlFor="category-filter" className="mb-2 flex items-center gap-2 text-sm font-semibold text-slate-700">
+                <svg className="h-4 w-4 text-brand-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
+                </svg>
+                Category
+              </label>
+              <div className="relative">
+                <select
+                  id="category-filter"
+                  value={filter}
+                  onChange={(e) => setFilter(e.target.value)}
+                  className="w-full appearance-none rounded-lg border border-slate-300 bg-white px-4 py-3 pr-10 shadow-sm transition-all focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20"
+                >
+                  {CATEGORIES.map((c) => (
+                    <option key={c} value={c}>{c}</option>
+                  ))}
+                </select>
+                <svg className="pointer-events-none absolute right-3 top-1/2 h-5 w-5 -translate-y-1/2 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                </svg>
+              </div>
+            </div>
+
+            {/* Status Filter */}
+            <div className="md:col-span-1">
+              <label htmlFor="status-filter" className="mb-2 flex items-center gap-2 text-sm font-semibold text-slate-700">
+                <svg className="h-4 w-4 text-brand-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                Status
+              </label>
+              <div className="relative">
+                <select
+                  id="status-filter"
+                  value={statusFilter}
+                  onChange={(e) => setStatusFilter(e.target.value)}
+                  className="w-full appearance-none rounded-lg border border-slate-300 bg-white px-4 py-3 pr-10 shadow-sm transition-all focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20"
+                >
+                  {STATUSES.map((s) => (
+                    <option key={s} value={s}>{s}</option>
+                  ))}
+                </select>
+                <svg className="pointer-events-none absolute right-3 top-1/2 h-5 w-5 -translate-y-1/2 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        
+
+        {(() => {
+          const ORDER = ['Ongoing', 'Upcoming', 'Completed'];
+          const buckets = (statusFilter === 'All' ? ORDER : [statusFilter]).map((s) => ({
+            status: s,
+            items: data.filter((p) => p.status === s)
+          }));
+
+          const any = buckets.some((b) => b.items.length > 0);
+          if (!any) return <p className="text-slate-600">No projects found.</p>;
+
+          return buckets.map((b) => {
+            if (b.items.length === 0) return null;
+            return (
+              <section key={b.status} className="mt-10 first:mt-0" aria-labelledby={`status-${b.status}`}>
+                <div className="mb-6 flex items-center justify-between">
+                  <h2 id={`status-${b.status}`} className="h3">{b.status}</h2>
+                  <div className="h-px flex-1 ml-6 bg-slate-200"></div>
+                </div>
+                {(() => {
+                  const itemsSorted = [...b.items].sort((a, b) => {
+                    const aHas = (Array.isArray(a.gallery) && a.gallery.length > 0) || !!a.image;
+                    const bHas = (Array.isArray(b.gallery) && b.gallery.length > 0) || !!b.image;
+                    // true first
+                    if (aHas === bHas) return 0;
+                    return aHas ? -1 : 1;
+                  });
+                  return (
+                <ul className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+                  {itemsSorted.map((p, i) => (
+                    <li key={p.slug}>
+                      <Reveal delay={i * 60}>
+                        <ProjectCard project={p} />
+                      </Reveal>
+                    </li>
+                  ))}
+                </ul>
+                  );
+                })()}
+              </section>
+            );
+          });
+        })()}
+      </div>
+    </section>
+  );
+}
+
+

src/pages/ServiceDetail.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+
+const SERVICE_COPY = {
+  foundations: {
+    title: 'Foundations & Civil Works',
+    body:
+      'We execute excavation, piling, and reinforced concrete foundations with strict QA/QC, ensuring ' +
+      'long‑term performance and safety across soil conditions. <!-- TODO: replace with official copy -->'
+  },
+  structural: {
+    title: 'Structural Construction',
+    body:
+      'RCC frames, steel structures, slabs and masonry delivered with safety-first practices and ' +
+      'conformance to codes. <!-- TODO: replace with official copy -->'
+  },
+  interiors: {
+    title: 'Interiors & Fit‑outs',
+    body:
+      'Turnkey interiors: MEP coordination, partitioning, flooring, carpentry, and finishing for office and ' +
+      'residential projects. <!-- TODO: replace with official copy -->'
+  },
+  'project-management': {
+    title: 'Project Management',
+    body:
+      'Integrated planning, procurement, vendor management, and reporting for on‑time, on‑budget delivery. ' +
+      '<!-- TODO: replace with official copy -->'
+  }
+};
+
+export default function ServiceDetail() {
+  const { id } = useParams();
+  const svc = SERVICE_COPY[id] || {
+    title: 'Service',
+    body: 'Details coming soon. <!-- TODO: replace -->'
+  };
+
+  return (
+    <article className="section" aria-labelledby="service-heading">
+      <div className="container grid items-start gap-8 md:grid-cols-3">
+        <header className="md:col-span-2">
+          <h1 id="service-heading" className="h2">{svc.title}</h1>
+          <p className="mt-4 text-slate-700">{svc.body}</p>
+        </header>
+        <aside className="card p-6">
+          <h2 className="h3">Talk to our team</h2>
+          <p className="mt-2 text-sm text-slate-600">
+            Share your requirements and we will recommend the right scope.
+          </p>
+          <a href="/contact" className="btn btn-primary mt-4">Contact Us</a>
+        </aside>
+      </div>
+    </article>
+  );
+}
+
+

src/styles/global.css

@@ -0,0 +1,97 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Global resets and utilities */
+:root {
+  --ring: 0 0% 0%;
+}
+
+body.dot-cursor-enabled {
+  cursor: none;
+}
+
+body.dot-cursor-enabled a,
+body.dot-cursor-enabled button,
+body.dot-cursor-enabled [role="button"],
+body.dot-cursor-enabled input,
+body.dot-cursor-enabled textarea,
+body.dot-cursor-enabled select {
+  cursor: none;
+}
+
+.dot-cursor[data-state='active'] {
+  box-shadow: 0 0 25px -2px rgba(211, 155, 35, 0.55);
+}
+
+/* Skip link for accessibility */
+.skip-link {
+  @apply sr-only focus:not-sr-only fixed left-4 top-4 z-[9999] rounded bg-brand-600 px-4 py-2 text-white;
+}
+
+/* Buttons */
+.btn {
+  @apply inline-flex items-center justify-center rounded-md px-5 py-3 text-sm font-semibold transition 
+    focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
+}
+.btn-primary {
+  @apply bg-brand-600 text-white hover:bg-brand-700 focus-visible:ring-brand-600;
+}
+.btn-ghost {
+  @apply text-white/90 hover:text-white;
+}
+.btn-outline {
+  @apply border border-brand-600 text-brand-700 hover:bg-brand-50 focus-visible:ring-brand-600;
+}
+
+/* Cards */
+.card {
+  @apply rounded-xl bg-white shadow-card transition hover:-translate-y-0.5 hover:shadow-lg;
+}
+
+/* Shine effect for primary CTAs */
+.shine {
+  position: relative;
+  overflow: hidden;
+}
+.shine::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  transform: translateX(-120%);
+  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.35) 40%, transparent 80%);
+  transition: transform 700ms ease;
+}
+.shine:hover::after {
+  transform: translateX(120%);
+}
+
+/* Section spacing */
+.section {
+  @apply py-16 md:py-24 relative;
+  z-index: 10;
+}
+
+/* Headings */
+.h1 {
+  @apply text-4xl font-extrabold tracking-tight md:text-5xl;
+}
+.h2 {
+  @apply text-3xl font-bold tracking-tight md:text-4xl;
+}
+.h3 {
+  @apply text-2xl font-semibold tracking-tight;
+}
+.lead {
+  @apply text-base text-slate-600 md:text-lg;
+}
+
+/* Header backdrop transition */
+.header-transparent {
+  @apply bg-transparent;
+}
+.header-solid {
+  @apply bg-white/95 backdrop-blur supports-[backdrop-filter]:bg-white/80 shadow;
+}
+
+