From bc234b44007a05ebd457f3de99e6283e9d9926d1 Mon Sep 17 00:00:00 2001
From: Mustafa <ayris.dev@gmail.com>
Date: Thu, 30 Jul 2026 13:20:40 +0300
Subject: [PATCH] feat: hotspots with animated line+arrow+card, always visible
 on last frame

---
 components/sections/CloudRevealSection.tsx | 136 ++++++++++-----------
 1 file changed, 66 insertions(+), 70 deletions(-)

diff --git a/components/sections/CloudRevealSection.tsx b/components/sections/CloudRevealSection.tsx
index 02ee716..4d5f501 100644
--- a/components/sections/CloudRevealSection.tsx
+++ b/components/sections/CloudRevealSection.tsx
@@ -242,36 +242,18 @@ 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,
-  },
+const HOTSPOTS: {
+  id: string
+  label: string
+  sub: string
+  x: number   // dot pozisyonu — ekranın % yatay
+  y: number   // dot pozisyonu — ekranın % dikey
+  dir: 'left' | 'right'  // kartın hangi tarafa uzayacağı
+}[] = [
+  { id: 'blok-a', label: '2+1 Daire', sub: 'Blok A · 89 m²', x: 34, y: 22, dir: 'left' },
+  { id: 'blok-b', label: '2+1 Daire', sub: 'Blok B · 84 m²', x: 70, y: 19, dir: 'right' },
+  { id: 'blok-c', label: '1+1 Daire', sub: 'Blok C · 60 m²', x: 50, y: 55, dir: 'right' },
+  { id: 'blok-d', label: '1+1 Daire', sub: 'Blok D · 47 m²', x: 20, y: 65, dir: 'left' },
 ]
 
 function UnitHotspots({
@@ -279,58 +261,72 @@ function UnitHotspots({
 }: {
   scrollYProgress: ReturnType<typeof useScroll>['scrollYProgress']
 }) {
-  const opacity = useTransform(scrollYProgress, [0.92, 0.98], [0, 1])
+  const containerOpacity = useTransform(scrollYProgress, [0.92, 0.98], [0, 1])
 
   return (
     <motion.div
-      style={{ opacity }}
+      style={{ opacity: containerOpacity }}
       className="absolute inset-0 z-20 pointer-events-none"
     >
       {HOTSPOTS.map((spot, i) => (
-        <motion.button
+        <div
           key={spot.id}
-          initial={{ scale: 0.8, opacity: 0 }}
-          animate={{ scale: 1, opacity: 1 }}
-          transition={{ delay: i * 0.15, duration: 0.4, ease: 'easeOut' }}
-          className="absolute pointer-events-auto group"
+          className="absolute"
           style={{ left: `${spot.x}%`, top: `${spot.y}%` }}
-          onClick={() => {
-            // İleride: daire içi frame animasyonunu tetikle
-            console.log('clicked:', spot.id)
-          }}
         >
-          {/* Pulsing dot */}
-          <span className="relative flex h-4 w-4 -translate-x-1/2 -translate-y-1/2">
-            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-white opacity-60" />
-            <span className="relative inline-flex rounded-full h-4 w-4 bg-white shadow-lg" />
-          </span>
+          {/* Dot + çizgi + kart — yatay flex */}
+          <div className={`flex items-center gap-0 ${spot.dir === 'left' ? 'flex-row-reverse' : 'flex-row'}`}>
 
-          {/* Label kartı — hover'da görünür, mobilde her zaman */}
-          <div className="absolute left-5 -top-8 min-w-max bg-black/70 backdrop-blur-sm border border-white/20 rounded-xl px-3 py-2 text-left opacity-0 group-hover:opacity-100 transition-opacity duration-200 md:opacity-0 max-md:opacity-100 pointer-events-none">
-            {/* Animated ok çizgisi */}
-            <svg
-              className="absolute -left-5 top-1/2 -translate-y-1/2"
-              width="20" height="2"
-              viewBox="0 0 20 2"
+            {/* Pulsing dot */}
+            <span className="relative flex h-3 w-3 shrink-0">
+              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-white opacity-70" />
+              <span className="relative inline-flex rounded-full h-3 w-3 bg-white" />
+            </span>
+
+            {/* Animated çizgi */}
+            <motion.div
+              className="h-px bg-white/60 shrink-0"
+              initial={{ width: 0 }}
+              animate={{ width: 48 }}
+              transition={{ delay: i * 0.2 + 0.1, duration: 0.4, ease: 'easeOut' }}
+            />
+
+            {/* Ok ucu */}
+            <motion.div
+              initial={{ opacity: 0, x: spot.dir === 'right' ? -4 : 4 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ delay: i * 0.2 + 0.4, duration: 0.2 }}
+              className="shrink-0 text-white/60"
             >
-              <motion.line
-                x1="0" y1="1" x2="20" y2="1"
-                stroke="white" strokeWidth="1" strokeOpacity="0.6"
-                initial={{ pathLength: 0 }}
-                animate={{ pathLength: 1 }}
-                transition={{ delay: i * 0.15 + 0.3, duration: 0.4 }}
-              />
-            </svg>
-            <p className="text-white text-xs font-medium tracking-wide">{spot.label}</p>
-            <p className="text-white/50 text-[10px] mt-0.5">{spot.sub}</p>
-            <div className="mt-1.5 flex items-center gap-1 text-white/60 text-[10px] tracking-widest uppercase">
-              <span>Detaylar</span>
-              <svg width="8" height="8" viewBox="0 0 8 8" fill="none">
-                <path d="M1 4h6M4 1l3 3-3 3" stroke="currentColor" strokeWidth="1" strokeLinecap="round"/>
-              </svg>
-            </div>
+              {spot.dir === 'right'
+                ? <svg width="6" height="8" viewBox="0 0 6 8" fill="none"><path d="M1 1l4 3-4 3" stroke="white" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/></svg>
+                : <svg width="6" height="8" viewBox="0 0 6 8" fill="none"><path d="M5 1L1 4l4 3" stroke="white" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/></svg>
+              }
+            </motion.div>
+
+            {/* Kart */}
+            <motion.button
+              initial={{ opacity: 0, x: spot.dir === 'right' ? -8 : 8 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ delay: i * 0.2 + 0.45, duration: 0.3, ease: 'easeOut' }}
+              className="pointer-events-auto bg-black/60 backdrop-blur-md border border-white/20 rounded-lg px-3 py-2 text-left hover:bg-black/80 hover:border-white/40 transition-all duration-200 active:scale-95 cursor-pointer"
+              onClick={() => {
+                // İleride: daire içi frame sekansını başlat
+                console.log('unit clicked:', spot.id)
+              }}
+            >
+              <p className="text-white text-xs font-medium tracking-wide whitespace-nowrap">{spot.label}</p>
+              <p className="text-white/50 text-[10px] mt-0.5 whitespace-nowrap">{spot.sub}</p>
+              <div className="mt-1.5 flex items-center gap-1 text-white/40 text-[10px] tracking-widest uppercase">
+                <span>İncele</span>
+                <svg width="8" height="8" viewBox="0 0 8 8" fill="none">
+                  <path d="M1 4h6M4 1l3 3-3 3" stroke="currentColor" strokeWidth="1" strokeLinecap="round"/>
+                </svg>
+              </div>
+            </motion.button>
+
           </div>
-        </motion.button>
+        </div>
       ))}
     </motion.div>
   )