diff --git a/components/sections/CloudRevealSection.tsx b/components/sections/CloudRevealSection.tsx index 553543a..02ee716 100644 --- a/components/sections/CloudRevealSection.tsx +++ b/components/sections/CloudRevealSection.tsx @@ -227,6 +227,9 @@ export default function CloudRevealSection() {
+ {/* HOTSPOTS — son frame'de görünür */} + + {/* Progress bar */}
@@ -236,3 +239,99 @@ export default function CloudRevealSection() {
) } + +// ─── Hotspot bileşeni ──────────────────────────────────────────────────────── + +const HOTSPOTS = [ + { + id: 'blok-a', + label: '2+1 Daire', + sub: 'Blok A · 89 m²', + // Ekranın yüzde konumu (sol-üst köşeden) + x: 34, + y: 22, + }, + { + id: 'blok-b', + label: '2+1 Daire', + sub: 'Blok B · 84 m²', + x: 70, + y: 19, + }, + { + id: 'blok-c', + label: '1+1 Daire', + sub: 'Blok C · 60 m²', + x: 50, + y: 55, + }, + { + id: 'blok-d', + label: '1+1 Daire', + sub: 'Blok D · 47 m²', + x: 20, + y: 65, + }, +] + +function UnitHotspots({ + scrollYProgress, +}: { + scrollYProgress: ReturnType['scrollYProgress'] +}) { + const opacity = useTransform(scrollYProgress, [0.92, 0.98], [0, 1]) + + return ( + + {HOTSPOTS.map((spot, i) => ( + { + // İleride: daire içi frame animasyonunu tetikle + console.log('clicked:', spot.id) + }} + > + {/* Pulsing dot */} + + + + + + {/* Label kartı — hover'da görünür, mobilde her zaman */} +
+ {/* Animated ok çizgisi */} + + + +

{spot.label}

+

{spot.sub}

+
+ Detaylar + + + +
+
+
+ ))} +
+ ) +}