// ============ SCENE ILLUSTRATIONS ============
// Architectural-drawing style illustrations in the same visual language as
// HouseIllustration (grid paper, thin lines, mono labels, clay + green + dark).
//
// All scenes use viewBox 0 0 400 340 (ratio ~4/3) unless noted — they crop
// gracefully inside containers of other ratios.
const SceneFrame = ({ children, viewBox = '0 0 400 340', bg = 'var(--cream-3)', id = 'scn' }) => (
);
const MonoLabel = ({ x, y, children, anchor = 'start', color = '#3D5A40', size = 7 }) => (
{children}
);
const Person = ({ x, y, scale = 1, color = '#1A2019' }) => (
);
const Sun = ({ x, y, r = 10 }) => (
);
// ============ HERO SCENES ============
// Hero A — Family in front of home (emotional, wide landscape)
const HeroFamilyScene = () => (
{/* horizon hills */}
{/* large sun */}
{/* house silhouette - centered */}
{/* solar panels on roof */}
{Array.from({length: 4}).map((_, c) =>
Array.from({length: 3}).map((_, r) => (
))
)}
{/* windows glowing */}
{/* family silhouettes - foreground */}
{/* adult 1 */}
{/* adult 2 */}
{/* child */}
{/* ground */}
{/* annotation */}
FAMILIE · EIGENHEIM · 11,16 kWp
SÜDLAGE ↗
);
// Hero B — Cinematic house at dusk (wide)
const HeroHouseNightScene = () => (
{/* gradient-ish sky with stroked sun */}
{/* mountains */}
{/* wide house */}
{/* solar panel grid on entire roof */}
{Array.from({length: 10}).map((_, c) =>
Array.from({length: 4}).map((_, r) => (
))
)}
{/* illuminated windows */}
{[0, 1, 2, 3, 4, 5].map(i => (
))}
{/* tree silhouettes */}
{/* ground */}
{Array.from({length: 40}).map((_, i) => (
))}
{/* annotation */}
KALAE · KOMPLETTANLAGE 'FAMILIE'
11,16 kWp · 40 MODULE
);
// Hero C — Technician with customer (portrait)
const HeroTechnicianScene = () => (
{/* Small house in background */}
{/* panels */}
{Array.from({length: 4}).map((_, i) => (
))}
{/* technician + customer - larger, foreground */}
{/* customer */}
{/* body */}
{/* arms */}
{/* technician - slightly behind */}
{/* hard hat */}
{/* pointing arm */}
{/* clipboard in hand */}
{/* ground */}
BERATER + KUNDE · VOR-ORT-TERMIN
);
// Small roof detail (hero C secondary image, square)
const HeroRoofDetailScene = () => (
{/* angled roof detail - closeup panels */}
{Array.from({length: 5}).map((_, c) =>
Array.from({length: 6}).map((_, r) => (
))
)}
{/* cell lines inside each module */}
{Array.from({length: 5}).map((_, c) =>
Array.from({length: 6}).map((_, r) => (
))
)}
DACH-DETAIL · FULL BLACK
);
// ============ PROCESS SCENES (6) ============
// 01 - Phone/call
const ProcCallScene = () => (
{/* phone */}
{/* speech bubble icon */}
{/* connection line */}
01 · GESPRÄCH · 30 MIN
);
// 02 - Satellite / roof analysis
const ProcRoofAnalysisScene = () => (
{/* laptop */}
{/* roof outline w/ panel layout */}
{/* panels on roof */}
{Array.from({length: 5}).map((_, c) =>
Array.from({length: 3}).map((_, r) => (
))
)}
{/* dimension lines */}
{/* laptop base */}
{/* cursor */}
02 · DACH-CHECK · 48 STD
);
// 03 - Planning / blueprint
const ProcPlanningScene = () => (
{/* drawing sheet */}
{/* title block */}
{/* blueprint roof plan */}
{/* panel grid */}
{Array.from({length: 5}).map((_, c) =>
Array.from({length: 4}).map((_, r) => (
))
)}
{/* dimensions */}
8.40 m
{/* ruler + pencil */}
{Array.from({length: 18}).map((_, i) => (
))}
03 · PLANUNG + STATIK
);
// 04 - Montage
const ProcMontageScene = () => (
{/* house + partially-installed panels */}
{/* installed panels left half */}
{Array.from({length: 4}).map((_, c) =>
Array.from({length: 3}).map((_, r) => (
))
)}
{/* being-installed panel (tilted) */}
{/* ghost panels right half */}
{Array.from({length: 3}).map((_, c) =>
Array.from({length: 3}).map((_, r) => (
))
)}
{/* tech on roof */}
{/* ladder */}
{Array.from({length: 8}).map((_, i) => (
))}
{/* ground */}
04 · MONTAGE · 1–2 TAGE
);
// 05 - Handshake / handover
const ProcHandoverScene = () => (
{/* finished house small */}
{Array.from({length: 5}).map((_, c) =>
Array.from({length: 3}).map((_, r) => (
))
)}
{/* checkmark badge */}
{/* two hands/figures shaking hands */}
{/* clasped hands */}
05 · ÜBERGABE + ANMELDUNG
);
// 06 - App dashboard
const ProcAppScene = () => (
{/* phone with dashboard */}
{/* header */}
HEUTE
18,4 kWh
{/* bar chart */}
{[30, 44, 58, 50, 36, 22, 14].map((h, i) => (
))}
{/* stats row */}
96%
AUTARKIE
+4,20€
ERSPART
{/* icons row */}
06 · APP · 25 JAHRE BEGLEITUNG
);
// ============ ABOUT SCENES ============
// Founder portrait-style drawing (tall)
const FounderScene = () => (
{/* portrait bust - stylized */}
{/* shoulders / body */}
{/* shirt line */}
{/* neck */}
{/* head */}
{/* hair */}
{/* eyes (thin) */}
{/* nose */}
{/* mouth - slight smile */}
{/* subtle beard */}
JAKOB MEISTER · GRÜNDER · SEIT 2016
);
// Team small (square)
const TeamScene = () => (
{/* 4 people in row */}
{[0, 1, 2, 3].map(i => (
{/* hard hat */}
{/* head */}
{/* body */}
{/* arms */}
))}
MONTAGE-TEAM · 34 MITARBEITENDE
);
// Advisor portrait - Jakob Tietz (contact, square)
const AdvisorScene = () => (
{/* shoulders / shirt */}
{/* collar */}
{/* neck */}
{/* head */}
{/* hair - short, warm */}
{/* eyes */}
{/* brows */}
{/* nose */}
{/* mouth - warm smile */}
{/* subtle stubble */}
JAKOB TIETZ
);
// Expose
Object.assign(window, {
HeroFamilyScene,
HeroHouseNightScene,
HeroTechnicianScene,
HeroRoofDetailScene,
ProcCallScene,
ProcRoofAnalysisScene,
ProcPlanningScene,
ProcMontageScene,
ProcHandoverScene,
ProcAppScene,
FounderScene,
TeamScene,
AdvisorScene,
});