// js/shared.jsx — GoRently shared design components // ─── useInView hook ────────────────────────────────────────────────── const useInView = (threshold = 0.15) => { const [inView, setInView] = React.useState(false); const ref = React.useRef(null); React.useEffect(() => { const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) setInView(true); }, { threshold }); if (ref.current) obs.observe(ref.current); return () => obs.disconnect(); }, []); return [ref, inView]; }; // ─── useTweaks hook ────────────────────────────────────────────────── const useTweaks = () => { const [state, setState] = React.useState(window.tweakState || { accent: '#3B7BF6', glowIntensity: 60, ctaVariant: 'A', heroFontSize: 54, portalLayout: 'A' }); React.useEffect(() => { const handler = e => setState({ ...e.detail }); window.addEventListener('tweakchange', handler); return () => window.removeEventListener('tweakchange', handler); }, []); return state; }; // ─── iPhone 15 Pro Mockup ──────────────────────────────────────────── const IPhoneMockup = ({ children, scale = 1, rotation = -10 }) => { const s = scale; return (
{/* Dynamic Island */}
{/* Side buttons */}
{/* Screen */}
{children}
{/* Glass glare */}
); }; // ─── Portal Screen content ─────────────────────────────────────────── const PortalScreen = ({ scale = 1 }) => { const s = scale; const p = n => n * s; return (
{/* Status bar */}
9:41
▪▪▪▪ WiFi 🔋
{/* Welcome */}
Bienvenue, Sophie 👋
Appartement Oberkampf · Paris 11e
{/* WiFi */}
📶
WiFi
GoRently_5G
Copier
{/* Guide local */}
Guide local
{['🍕 Restos','🍹 Cafés','🛒 Courses'].map((item,i) => (
{item}
))}
{/* Upsell */}
🚗
Airport Transfer
Depuis 35€
Réserver
); }; // ─── macOS Browser Window ──────────────────────────────────────────── const BrowserWindow = ({ children, width = 360, title = 'airbnb.com', redTint = false }) => (
{title}
{children}
); // ─── Airbnb Calendar visual ────────────────────────────────────────── const AirbnbCalendar = () => { const days = ['L','M','M','J','V','S','D']; const booked = new Set([2,3,9,16,22,23,29]); const nums = Array.from({length:30},(_,i)=>i+1); return (
Juin 2025 😮
{days.map((d,i) =>
{d}
)} {/* offset for month start (Wednesday=2) */} {[0,1].map(i =>
)} {nums.map(n => (
{n}
))}
18 nuits réservées sur 30 disponibles
); }; // ─── PDF / Audit Card ──────────────────────────────────────────────── const PDFCard = ({ rotation = -3, width = 200 }) => (
GoRently
Audit Setup &
Opportunités
{[82,60,90,52,70].map((w,i) =>
)}
▶
Walkthrough vidéo inclus
Analyse complète
PDF
); // ─── CTA Button ────────────────────────────────────────────────────── const CTAButton = ({ children, onClick, size = 'default', fullWidth = false, style: extra = {}, className = '' }) => { const [hov, setHov] = React.useState(false); const { accent } = useTweaks(); const sizes = { default:{padding:'15px 34px',fontSize:16}, large:{padding:'19px 48px',fontSize:18} }; const sz = sizes[size] || sizes.default; const sizeClass = size === 'large' ? 'cta-btn-large' : ''; return ( ); }; // ─── Pill Badge ────────────────────────────────────────────────────── const PillBadge = ({ children }) => { const { accent } = useTweaks(); return (
{children}
); }; // ─── Section wrapper ───────────────────────────────────────────────── const Section = ({ children, id, bg = '#0A1628', style: extra = {} }) => (
{children}
); // ─── Glow Orb ──────────────────────────────────────────────────────── const GlowOrb = ({ color = '#3B7BF6', size = 400, opacity = 0.12, top, left, right, bottom }) => (
); // ─── Dot grid background ───────────────────────────────────────────── const DotGrid = () => (
); // ─── Radar animation ───────────────────────────────────────────────── const RadarIcon = () => { const { accent } = useTweaks(); return (
{[0,1,2].map(i => (
))}
📡
); }; Object.assign(window, { useInView, useTweaks, IPhoneMockup, PortalScreen, BrowserWindow, AirbnbCalendar, PDFCard, CTAButton, PillBadge, Section, GlowOrb, DotGrid, RadarIcon, });