// Marsan Properties — Shared components (real-website edition). const Icon = ({ name, size = 20, color = 'currentColor', strokeWidth = 1.4, style }) => { const props = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: color, strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round', style }; const paths = { plot: <>, villa: <>, tower: <>, farm: <>, commercial: <>, upcoming: <>, road: <>, bolt: , water: , drain: <>, light: <>, tree: <>, arch: <>, shield: <>, club: <>, park: <>, pool: <>, gym: <>, search: <>, map: <>, pin: <>, phone: , whatsapp: <> , chevron: , arrow: <>, plus: , check: , star: , heart: , share: <>, eye: <>, download: <>, play: , filter: <>, grid: <>, list: <>, car: <>, school: <>, hospital: <>, metro: <>, edit: <>, upload: <>, layers: <>, settings: <>, bed: <>, bath: <>, area: <>, calendar: <>, user: <>, mail: <>, diamond: <>, award: <>, instagram: <>, facebook: , youtube: <>, linkedin: <>, close: <>, menu: <>, sparkle: , drone: <>, brochure: <>, ruler: <>, }; return ; }; const MarsanLogo = ({ light = false, compact = false, href = '/' }) => (

)} ); const NAV = [ { label: 'Properties', href: '/properties.html' }, { label: 'Insights', href: '/insights.html' }, { label: 'About', href: '/about.html' }, { label: 'Contact', href: '/contact.html' }, ]; const Header = ({ active = 'Home', light = true }) => (

+91 98499 99708 Book Site Visit

); const Footer = () => { const [email, setEmail] = React.useState(''); const [msg, setMsg] = React.useState(''); const subscribe = async (e) => { e.preventDefault(); if (!email) return; try { await window.MarsanAPI.subscribers.add(email); setMsg('Thanks — you’re on the list.'); setEmail(''); } catch (err) { setMsg(err.message || 'Subscription failed.'); } }; return ( ); }; const PropertyCard = ({ p, variant = 'default' }) => { const href = '/property.html?slug=' + encodeURIComponent(p.slug); return (

{p.launch} {p.featured && Featured}

{p.status}

{p.category} {(p.id || '').toUpperCase()}

{p.name}

{p.location}

PRICE

₹{p.priceMin}–{p.priceMax} {p.priceUnit}

{p.areaUnit === 'sq.yd' || p.areaUnit === 'acres' ? 'PLOT' : 'AREA'}

{p.areaMin}–{p.areaMax} {p.areaUnit}

{p.highlight}

View Details e.stopPropagation()} style={{ width: 42, height: 42, border: '1px solid #143a2a', background: '#fff', color: '#143a2a', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}> e.stopPropagation()} style={{ width: 42, height: 42, border: '1px solid #143a2a', background: '#fff', color: '#143a2a', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}>

); }; const SectionHeader = ({ eyebrow, title, body, align = 'left', light = false, action = null }) => (

{eyebrow}

{title}

{body &&

{body}

}

{action}

); // Number ticker — counts from 0 → final value once it scrolls into view. const CountUp = ({ value, prefix = '', suffix = '', duration = 1200, decimals = 0, format = null, style }) => { const ref = React.useRef(null); const [n, setN] = React.useState(0); const [started, setStarted] = React.useState(false); React.useEffect(() => { if (!ref.current || started) return; const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) { setStarted(true); const start = performance.now(); const tick = (t) => { const p = Math.min(1, (t - start) / duration); const eased = 1 - Math.pow(1 - p, 3); setN(value * eased); if (p < 1) requestAnimationFrame(tick); }; requestAnimationFrame(tick); io.disconnect(); } }); }, { threshold: 0.3 }); io.observe(ref.current); return () => io.disconnect(); }, [value, duration, started]); const display = format ? format(n) : n.toFixed(decimals); return {prefix}{display}{suffix}; }; // Reveal-on-scroll observer (utility — apply class="ms-reveal"). if (typeof IntersectionObserver !== 'undefined' && !window.__msRevealBound) { window.__msRevealBound = true; const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('is-in'); io.unobserve(e.target); } }); }, { threshold: 0.12 }); const bind = () => document.querySelectorAll('.ms-reveal:not(.is-in)').forEach(el => io.observe(el)); document.addEventListener('DOMContentLoaded', bind); setTimeout(bind, 1500); } window.MarsanComponents = { Icon, MarsanLogo, Header, Footer, PropertyCard, SectionHeader, CountUp, NAV };