From 9759ab2698e81155cc9c0f38fa2dd4d71ced2fb9 Mon Sep 17 00:00:00 2001
From: aramesh-site deploy <deploy@aramesh-site.local>
Date: Wed, 7 Oct 2026 18:20:14 +0000
Subject: [PATCH] =?UTF-8?q?feat(timeline):=20=D8=AE=D8=B7=20=D8=B1=D9=88?=
 =?UTF-8?q?=DB=8C=20=D8=AF=D8=A7=DB=8C=D8=B1=D9=87=20=D8=AA=D9=85=D8=A7?=
 =?UTF-8?q?=D9=85=20=D9=85=DB=8C=E2=80=8C=D8=B4=D9=88=D8=AF=20=D9=88=20?=
 =?UTF-8?q?=DA=A9=D8=A7=D8=B1=D8=AA=20=D9=BE=D8=A7=DB=8C=D8=A7=D9=86=DB=8C?=
 =?UTF-8?q?=20=D8=B2=DB=8C=D8=B1=20=D8=A2=D9=86=20=D9=85=DB=8C=E2=80=8C?=
 =?UTF-8?q?=D9=86=D8=B4=DB=8C=D9=86=D8=AF=20=E2=80=94=20=D9=84=D8=A8=D9=87?=
 =?UTF-8?q?=D9=94=20=D8=A8=D8=A7=D9=84=D8=A7=DB=8C=20=DA=A9=D8=A7=D8=B1?=
 =?UTF-8?q?=D8=AA=20=D8=AF=D9=82=DB=8C=D9=82=D8=A7=D9=8B=20=D8=B1=D9=88?=
 =?UTF-8?q?=DB=8C=20=D9=86=D9=82=D8=B7=D9=87=D9=94=20=D9=BE=D8=A7=DB=8C?=
 =?UTF-8?q?=D8=A7=D9=86=20=D8=AE=D8=B7=20(=D8=A7=D9=86=D8=AF=D8=A7=D8=B2?=
 =?UTF-8?q?=D9=87=E2=80=8C=DA=AF=DB=8C=D8=B1=DB=8C=20DOM=20=D8=A8=D8=B1?=
 =?UTF-8?q?=D8=A7=DB=8C=20=D9=87=D8=B1=20=D9=85=D8=AD=D8=AA=D9=88=D8=A7/?=
 =?UTF-8?q?=D8=A7=D9=86=D8=AF=D8=A7=D8=B2=D9=87)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/home/Timeline.tsx | 39 ++++++++++++++++++-----
 1 file changed, 31 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/home/Timeline.tsx b/frontend/src/components/home/Timeline.tsx
index 1128240..304c10c 100644
--- a/frontend/src/components/home/Timeline.tsx
+++ b/frontend/src/components/home/Timeline.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react'
+import React, { useLayoutEffect, useRef, useState } from 'react'
 import { motion, useScroll, useTransform, useInView } from 'framer-motion'
 import { useSite, type TimelineItem } from '../../api'
 import { useLang } from '../../i18n/lang'
@@ -9,17 +9,17 @@ const ease = [0.23, 1, 0.32, 1] as const
 
 type Milestone = TimelineItem
 
-function Item({ item, index, featured = false }: { item: Milestone; index: number; featured?: boolean }) {
-  const ref = useRef<HTMLLIElement>(null)
+function Item({ item, index, featured = false, onLi }: { item: Milestone; index: number; featured?: boolean; onLi?: (el: HTMLLIElement | null) => void }) {
+  const ref = useRef<HTMLLIElement | null>(null)
   const active = useInView(ref, { once: true, amount: 0.6 })
   const onRight = index % 2 === 0
 
   return (
-    <li ref={ref} className={`relative md:grid md:grid-cols-2 md:gap-16 ${featured ? 'mt-10 md:mt-16' : ''}`}>
+    <li ref={(el) => { ref.current = el; onLi?.(el) }} className={`relative md:grid md:grid-cols-2 md:gap-16 ${featured ? 'mt-10 md:mt-16' : ''}`}>
       {/* دایره‌ها: مرکز دایره در موبایل و دسکتاپ دقیقاً روی مرکز خط 2px است */}
       <span
         aria-hidden="true"
-        className={`absolute right-[-5px] top-1/2 z-10 -translate-y-1/2 h-3 w-3 rounded-full transition-all duration-500 ease-lux md:right-1/2 md:translate-x-1/2 ${
+        className={`absolute right-[-5px] z-10 -translate-y-1/2 h-3 w-3 rounded-full transition-all duration-500 ease-lux md:right-1/2 md:translate-x-1/2 ${featured ? 'top-0' : 'top-1/2'} ${
           active
             ? 'bg-copper shadow-[0_0_15px_rgba(197,143,92,0.6),0_0_0_6px_rgba(213,135,76,0.15)]'
             : 'bg-ivory/20'
@@ -56,12 +56,34 @@ export function Timeline() {
   const { timeline } = useSite()
   const { t } = useLang()
   const ref = useRef<HTMLOListElement>(null)
+  const lastLiRef = useRef<HTMLLIElement | null>(null)
+  // فاصلهٔ انتهای فهرست تا بالای کارت پایانی — خط دقیقاً روی بالای کارت تمام می‌شود
+  const [lineBottom, setLineBottom] = useState(0)
   const { scrollYProgress } = useScroll({
     target: ref,
-    offset: ['start 70%', 'end 100%'],
+    offset: ['start 70%', 'end 110%'],
   })
   const scaleY = useTransform(scrollYProgress, [0, 1], [0, 1])
 
+  useLayoutEffect(() => {
+    const measure = () => {
+      const ol = ref.current
+      const li = lastLiRef.current
+      if (!ol || !li) return
+      const gap = ol.getBoundingClientRect().bottom - li.getBoundingClientRect().top
+      setLineBottom(Math.max(0, Math.round(gap)))
+    }
+    measure()
+    const observer = new ResizeObserver(measure)
+    if (ref.current) observer.observe(ref.current)
+    if (lastLiRef.current) observer.observe(lastLiRef.current)
+    window.addEventListener('resize', measure)
+    return () => {
+      observer.disconnect()
+      window.removeEventListener('resize', measure)
+    }
+  }, [])
+
   return (
     <section className="bg-char py-24 md:py-32" aria-labelledby="timeline-title">
       <div className="mx-auto w-full max-w-site px-6 lg:px-10">
@@ -82,15 +104,16 @@ export function Timeline() {
             <span
               aria-hidden="true"
               className="absolute inset-y-0 right-0 w-[2px] bg-ivory/10 md:right-1/2 md:translate-x-1/2"
+              style={{ bottom: lineBottom }}
             />
             {/* خط متحرک - عرض 2px و همراستایی دقیق با مرکز */}
             <motion.span
               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/55 shadow-[0_0_10px_rgba(197,143,92,0.5)] md:right-1/2 md:translate-x-1/2"
-              style={{ scaleY }}
+              style={{ scaleY, bottom: lineBottom }}
             />
             {timeline.map((item, i) => (
-              <Item key={item.id} item={item} index={i} featured={i === timeline.length - 1} />
+              <Item key={item.id} item={item} index={i} featured={i === timeline.length - 1} onLi={i === timeline.length - 1 ? (el) => { lastLiRef.current = el } : undefined} />
             ))}
           </ol>
           <div className="mt-12">