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}
+
+
+
+ ))}
+
+ )
+}