fix(timeline): خط زمانی روی خود فهرست بسته می‌شود و تا دایرهٔ کارت پایانی پر می‌شود

frontend/src/components/home/Timeline.tsx

@@ -55,10 +55,10 @@ function Item({ item, index, featured = false }: { item: Milestone; index: numbe
 export function Timeline() {
   const { timeline } = useSite()
   const { t } = useLang()
-  const ref = useRef<HTMLDivElement>(null)
+  const ref = useRef<HTMLOListElement>(null)
   const { scrollYProgress } = useScroll({
     target: ref,
-    offset: ['start 70%', 'end 60%'],
+    offset: ['start 70%', 'end 72%'],
   })
   const scaleY = useTransform(scrollYProgress, [0, 1], [0, 1])
 
@@ -75,20 +75,20 @@ export function Timeline() {
           />
         </div>
 
-        <div ref={ref} className="relative mx-auto mt-20 max-w-4xl">
+        <div className="relative mx-auto mt-20 max-w-4xl">
-          {/* خط پس‌زمینه ثابت - عرض 2px و همراستایی دقیق با مرکز */}
+          {/* خط روی خود فهرست بسته می‌شود؛ انتهایش به انتهای کارت آخر (مرکز دایره) می‌رسد */}
-          <span
+          <ol ref={ref} className="relative flex flex-col gap-12 md:gap-16">
-            aria-hidden="true"
+            {/* خط پس‌زمینه ثابت - عرض 2px و همراستایی دقیق با مرکز */}
-            className="absolute inset-y-0 right-0 w-[2px] bg-ivory/10 md:right-1/2 md:translate-x-1/2"
+            <span
-          />
+              aria-hidden="true"
-          {/* خط متحرک - عرض 2px و همراستایی دقیق با مرکز */}
+              className="absolute inset-y-0 right-0 w-[2px] bg-ivory/10 md:right-1/2 md:translate-x-1/2"
-          <motion.span
+            />
-            aria-hidden="true"
+            {/* خط متحرک - عرض 2px و همراستایی دقیق با مرکز */}
-            className="absolute inset-y-0 right-0 w-[2px] origin-top bg-gradient-to-b from-copper/80 via-copper to-copper/20 shadow-[0_0_10px_rgba(197,143,92,0.5)] md:right-1/2 md:translate-x-1/2"
+            <motion.span
-            style={{ scaleY }}
+              aria-hidden="true"
-          />
+              className="absolute inset-y-0 right-0 w-[2px] origin-top bg-gradient-to-b from-copper/80 via-copper to-copper/20 shadow-[0_0_10px_rgba(197,143,92,0.5)] md:right-1/2 md:translate-x-1/2"
-
+              style={{ scaleY }}
-          <ol className="flex flex-col gap-12 md:gap-16">
+            />
             {timeline.map((item, i) => (
               <Item key={item.id} item={item} index={i} featured={i === timeline.length - 1} />
             ))}