feat(ui): update UI v1

frontend/src/components/home/Timeline.tsx

@@ -16,6 +16,7 @@ function Item({ item, index }: { item: Milestone; index: number }) {
 
   return (
     <li ref={ref} className="relative md:grid md:grid-cols-2 md:gap-16">
+      {/* دایره‌ها: مرکز دایره در موبایل و دسکتاپ دقیقاً روی مرکز خط 2px است */}
       <span
         aria-hidden="true"
         className={`absolute right-[-5px] top-8 z-10 h-3 w-3 rounded-full transition-all duration-500 ease-lux md:right-1/2 md:translate-x-1/2 ${
@@ -35,7 +36,6 @@ function Item({ item, index }: { item: Milestone; index: number }) {
       >
         <EditableItem resource="timeline" item={item}>
           <div className="group relative overflow-hidden rounded-2xl border border-ivory/10 bg-ink/40 p-6 backdrop-blur-md transition-all duration-500 ease-lux hover:-translate-y-1.5 hover:border-copper/50 hover:bg-ink/60 hover:shadow-[0_12px_40px_-10px_rgba(197,143,92,0.35)] md:p-8">
-            {/* لایه نوری ظریف که در هاور روشن می‌شود */}
             <div className="absolute inset-0 bg-gradient-to-br from-white/[0.03] to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
             
             <span className="relative z-10 text-sm font-medium tracking-widest text-copper">{item.year}</span>
@@ -72,13 +72,15 @@ export function Timeline() {
         </div>
 
         <div ref={ref} className="relative mx-auto mt-20 max-w-4xl">
+          {/* خط پس‌زمینه ثابت - عرض 2px و همراستایی دقیق با مرکز */}
           <span
             aria-hidden="true"
-            className="absolute inset-y-0 right-0 w-px bg-ivory/10 md:right-1/2"
+            className="absolute inset-y-0 right-0 w-[2px] bg-ivory/10 md:right-1/2 md:translate-x-1/2"
           />
+          {/* خط متحرک - عرض 2px و همراستایی دقیق با مرکز */}
           <motion.span
             aria-hidden="true"
-            className="absolute inset-y-0 right-0 w-px 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"
+            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 }}
           />