// Screens.jsx — MinPlass marketing site screens // Three connected screens shown inside one iPhone: // 1. Welcome / pitch (host-focused landing) // 2. LiveSpot (the immersive "your spot is ready" interactive screen) // 3. HostEarnings (the dashboard the marketing site is selling) // ──────────────────────────────────────────────────────────── // 1. Welcome — host-focused pitch screen // ──────────────────────────────────────────────────────────── function WelcomeScreen({ go, density = 'roomy' }) { const isCompact = density === 'compact'; const padTop = isCompact ? 60 : 76; const titleSize = isCompact ? 40 : 48; return (
P
MinPlass
Logg inn
For utleiere · Bergen

Innkjørselen din,
tjener stille.

Lei ut plassen din når du ikke bruker den. Verifiserte sjåfører, automatiske utbetalinger, rolig av design.

{/* Earnings preview pill */}
Snittinntekt 1 240 kr / uke
go('live')} icon={}> Se hvordan det fungerer
); } // ──────────────────────────────────────────────────────────── // 2. LiveSpot — immersive "you've arrived" interactive screen // This is the marketing site's interactive demo. // ──────────────────────────────────────────────────────────── function LiveSpotScreen({ go, density = 'roomy' }) { const [slot, setSlot] = React.useState('14:30'); const [zoom, setZoom] = React.useState(false); const isCompact = density === 'compact'; const slots = [ { time: '13:00', taken: true }, { time: '14:30', taken: false }, { time: '16:00', taken: false }, { time: '18:00', taken: false }, ]; const facilities = [ { id: 'covered', icon: 'layers', label: 'Tak over' }, { id: 'ev', icon: 'zap', label: 'Elbil 11kW' }, { id: 'lit', icon: 'shield', label: 'Belyst og inngjerdet' }, { id: 'cam', icon: 'camera', label: 'Kamera' }, ]; // Stylised cityscape — cool daylight scene rendered as layered SVG. // (No real photo asset is bundled in the design system; this is the // closest in-system substitute for the reference image's mood.) const cityscape = ( {/* Distant haze building */} {/* Mid building B (left, recedes) */} {/* Mullion shadow */} {/* Foreground glass tower (centre-left) */} {/* tower vertical mullions */} {/* tower crown */} {/* Tower right (foreground, taller) */} {/* Street level */} {/* sidewalk slabs */} {/* trees mid-distance */} {/* faint figure walking */} {/* parked car silhouette in foreground */} {/* light atmospheric overlay */} ); return (
{cityscape} {/* darkening gradient at the bottom for legibility */}
{/* Top header — minimal, no plate */}
go('welcome')}>
Reservert · 8 min unna MinPlass
EH
{/* Floor / arrival-window time chips — positioned mid-screen */}
Ankomstvindu
{slots.map(s => { const on = slot === s.time && !s.taken; return ( ); })}
{/* Facility chip rail */}
{facilities.map((f) => ( ))}
{/* Bottom sheet — title + sub + circular CTA */}
Innkjørsel · Møhlenpris

Strandgaten 12.

Utleier Sondre H · ankomst {slot} · 2,5 t · 112 kr

{/* Tap hint that fades */}
Trykk for å se deg rundt
); } // ──────────────────────────────────────────────────────────── // 3. Host — earnings dashboard (sells the host product) // ──────────────────────────────────────────────────────────── function HostScreen({ go, density = 'roomy' }) { const isCompact = density === 'compact'; const [period, setPeriod] = React.useState('week'); const periods = [ { id: 'week', label: 'Uke', heading: 'denne uken', value: '1 240', total: '4 820 kr / måned' }, { id: 'month', label: 'Måned', heading: 'denne måneden', value: '4 820', total: '54 600 kr / år' }, { id: 'year', label: 'År', heading: 'i år', value: '54 600', total: '4 utleiere i ditt nabolag' }, ]; const cur = periods.find(p => p.id === period); return (
go('welcome')}>
Utleier
Inntekt · {cur.heading}

{cur.value} kr
{cur.heading}.

{/* period switcher */}
{periods.map(p => { const on = p.id === period; return ( ); })}
{/* big dark earning card */}
Trend · {cur.total}
{cur.value} kr
{[36, 48, 22, 60, 44, 86, 52].map((h, i) => (
))}
{['M', 'T', 'O', 'T', 'F', 'L', 'S'].map((d, i) => (
{d}
))}
go('welcome')}>Lei ut en plass til
); } window.WelcomeScreen = WelcomeScreen; window.LiveSpotScreen = LiveSpotScreen; window.HostScreen = HostScreen;