From abf4b33a22b665686811feb20cdc5473c3590ee0 Mon Sep 17 00:00:00 2001
From: mukeshs <mukesh@rootxwire.com>
Date: Wed, 29 Oct 2025 10:07:18 +0530
Subject: [PATCH] Further updates on 29-10-25

---
 src/components/about/process.tsx | 414 +++++++++++++++++++++----------
 1 file changed, 287 insertions(+), 127 deletions(-)

diff --git a/src/components/about/process.tsx b/src/components/about/process.tsx
index f1051bd..8524519 100644
--- a/src/components/about/process.tsx
+++ b/src/components/about/process.tsx
@@ -1,8 +1,44 @@
 'use client'
-import React, { useState } from "react";
+import React, { useState, useEffect, useRef } from "react";
 
 export default function Process() {
   const [activeStep, setActiveStep] = useState(-1);
+  const [scrollProgress, setScrollProgress] = useState(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const timelineRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (!containerRef.current || !timelineRef.current) return;
+      
+      const container = containerRef.current;
+      const timeline = timelineRef.current;
+      const rect = container.getBoundingClientRect();
+      const timelineHeight = timeline.scrollHeight - timeline.clientHeight;
+      
+      // Calculate when section enters viewport
+      if (rect.top <= 0 && rect.bottom >= window.innerHeight) {
+        // Section is sticky, scroll the timeline
+        const progress = Math.abs(rect.top) / (rect.height - window.innerHeight);
+        const clampedProgress = Math.max(0, Math.min(1, progress));
+        setScrollProgress(clampedProgress);
+        timeline.scrollTop = clampedProgress * timelineHeight;
+      } else if (rect.top > 0) {
+        // Before sticky
+        setScrollProgress(0);
+        timeline.scrollTop = 0;
+      } else {
+        // After sticky
+        setScrollProgress(1);
+        timeline.scrollTop = timelineHeight;
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    handleScroll(); // Initial check
+    
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
 
   const CalendarIcon = (
     <svg
@@ -25,154 +61,278 @@ export default function Process() {
   const steps = [
     {
       number: "1",
-      title: "Feb 2022",
-      description: "Trauma Registry established on Feb.2022 in collaboration with Transport Corporation of India Limited (TCI).",
+      title: "2017",
+      description: "Formation of Trauma Services",
       icon: CalendarIcon,
     },
     {
       number: "2",
-      title: "Dec 2023",
-      description: "Trauma Quality Improvement Programme established on Dec.2023 in collaboration with the Indian Council of Medical Research.",
+      title: "2020",
+      description: "Establishment of the Department of Trauma Surgery under Dr. Sukria Nayak",
       icon: CalendarIcon,
-    }, 
-    // {
-    //   number: "3",
-    //   title: "Nov 2022",
-    //   description: "Trauma centre begins operations with full emergency suite",
-    //   icon: CalendarIcon,
-    // },
+    },
+    {
+      number: "3",
+      title: "May 2021",
+      description: "Development of Trauma Protocols (MHTP, TROB, TRIP, Airway, Obstetric Trauma)",
+      icon: CalendarIcon,
+    },
+    {
+      number: "4",
+      title: "June 2022",
+      description: "Inauguration of CMC Ranipet Campus: Level 1 Trauma Centre",
+      icon: CalendarIcon,
+    },
+    {
+      number: "5",
+      title: "November 2022",
+      description: "Formation of T-ReCS (Trauma Registry – CMC – Pilot Study) under TCI-CMC Research Scholar Program",
+      icon: CalendarIcon,
+    },
+    {
+      number: "6",
+      title: "November 2022",
+      description: "Integration of Multidisciplinary Trauma Services",
+      icon: CalendarIcon,
+    },
+    {
+      number: "7",
+      title: "November 2022",
+      description: "Formation of Neurotrauma Unit",
+      icon: CalendarIcon,
+    },
+    {
+      number: "8",
+      title: "January 2023",
+      description: "Accreditation of Trauma Radiology Fellowship",
+      icon: CalendarIcon,
+    },
+    {
+      number: "9",
+      title: "August 2023",
+      description: "Inaugural ATLS® Course at CMC Vellore",
+      icon: CalendarIcon,
+    },
+    {
+      number: "10",
+      title: "September 2023",
+      description: "First Research Publication from the Department",
+      icon: CalendarIcon,
+    },
+    {
+      number: "11",
+      title: "October 2023",
+      description: "ACTraM Conference: Advances in Chest Trauma Management",
+      icon: CalendarIcon,
+    },
+    {
+      number: "12",
+      title: "October 2023",
+      description: "CME Cadaveric Workshop",
+      icon: CalendarIcon,
+    },
+    {
+      number: "13",
+      title: "December 2023",
+      description: "ICMR Trauma Quality Improvement Programme (TQIP) Initiated at CMC",
+      icon: CalendarIcon,
+    },
+    {
+      number: "14",
+      title: "February 2024",
+      description: "HOPE Grant & RCPSG Trauma First Responder Outreach Programme",
+      icon: CalendarIcon,
+    },
+    {
+      number: "15",
+      title: "April 2024",
+      description: "Launch of Masters of Trauma Online Lecture Series",
+      icon: CalendarIcon,
+    },
+    {
+      number: "16",
+      title: "April 2024",
+      description: "Inaugural ATCN® Course for Nurses",
+      icon: CalendarIcon,
+    },
+    {
+      number: "17",
+      title: "July 2024",
+      description: "MOU with GVK EMRI for Strengthening Pre-hospital Trauma Care",
+      icon: CalendarIcon,
+    },
+    {
+      number: "18",
+      title: "July 2024",
+      description: "Accreditation for FNB in Trauma and Acute Care Surgery",
+      icon: CalendarIcon,
+    },
+    {
+      number: "19",
+      title: "January 2025",
+      description: "Trauma Quality Workshop under ICMR-TQIP at CMC Vellore",
+      icon: CalendarIcon,
+    },
+    {
+      number: "20",
+      title: "March 2025",
+      description: "Formation of CMC Trauma Quality Improvement Committee",
+      icon: CalendarIcon,
+    },
+    {
+      number: "21",
+      title: "July 2025",
+      description: "Establishment of Trauma Orthopaedics Unit",
+      icon: CalendarIcon,
+    },
   ];
 
+  // Calculate extra height needed for scroll effect
+  const extraHeight = 2000;
+
   return (
-    <div className="bg-white py-12 sm:py-20">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6">
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16">
-          {/* Left Column */}
-          <div className="flex flex-col justify-start">
-            <div className="mb-8 lg:mb-16">
-              <div className="text-xl mb-4" style={{ color: "#e64838" }}>
-                Milestones
+    <div 
+      ref={containerRef}
+      className="bg-white py-10 sm:py-10" 
+      style={{ minHeight: `calc(100vh + ${extraHeight}px)` }}
+    >
+      <div className="sticky top-0 h-screen flex items-start pt-12 sm:pt-20">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 w-full">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16 items-start">
+            {/* Left Column */}
+            <div className="flex flex-col justify-start">
+              <div>
+                <div className="text-xl mb-4" style={{ color: "#e64838" }}>
+                  Milestones
+                </div>
+                <h2
+                  className="text-3xl sm:text-4xl md:text-5xl font-bold leading-tight mb-6"
+                  style={{ color: "#012068" }}
+                >
+                  Our Journey in Trauma Care
+                </h2>
+                <p className="text-base sm:text-lg leading-relaxed mb-8" style={{ color: '#333' }}>
+                  From the formation of Trauma Services in 2017 to establishing a Level-1 Trauma Facility and comprehensive trauma care programs, we continue to expand our emergency care services with dedication and excellence.
+                </p>
               </div>
-              <h2
-                className="text-3xl sm:text-4xl md:text-5xl font-bold leading-tight mb-6"
-                style={{ color: "#012068" }}
-              >
-                Our Journey in Trauma Care
-              </h2>
-              <p className="text-base sm:text-lg leading-relaxed mb-8" style={{ color: '#333' }}>
-                From the inauguration of our Department of Trauma Surgery to
-                establishing a Level-1 Trauma Facility, we continue to expand our
-                emergency care services with dedication and excellence.
-              </p>
             </div>
-          </div>
 
-          {/* Right Column - Steps */}
-          <div className="relative">
-            {steps.map((step, index) => (
-              <div
-                key={index}
-                className={`relative group cursor-pointer transition-all duration-500 ${
-                  index !== 0 ? "mt-8 sm:mt-12" : ""
-                }`}
-                onMouseEnter={() => setActiveStep(index)}
-                onMouseLeave={() => setActiveStep(-1)}
+            {/* Right Column - Auto-scrolling Timeline */}
+            <div className="relative h-[600px]">
+              <div 
+                ref={timelineRef}
+                className="h-full overflow-y-auto pr-2 pl-2 py-2 [&::-webkit-scrollbar]:hidden pointer-events-none" 
+                style={{
+                  scrollbarWidth: 'none',
+                  msOverflowStyle: 'none'
+                }}
               >
-                {/* Connecting Line */}
-                {index !== 0 && (
-                  <div className="absolute left-6 -top-8 sm:-top-12 w-0.5 h-8 sm:h-12 bg-gray-300 overflow-hidden">
-                    <div
-                      className={`w-full transition-all duration-700 ease-out origin-bottom ${
-                        activeStep >= index ||
-                        (activeStep === -1 && index === 0)
-                          ? "h-full scale-y-100"
-                          : "h-0 scale-y-0"
-                      }`}
-                      style={{ backgroundColor: "#012068" }}
-                    />
-                  </div>
-                )}
-
-                {/* Step Content */}
-                <div className="flex items-start gap-4 sm:gap-6">
-                  {/* Number Circle */}
+                {steps.map((step, index) => (
                   <div
-                    className={`relative z-10 flex-shrink-0 w-12 h-12 rounded-full flex items-center justify-center text-white font-semibold text-lg transition-all duration-500 transform ${
-                      activeStep === index ||
-                      (activeStep === -1 && index === 0)
-                        ? "scale-110 shadow-lg ring-4"
-                        : "scale-100 hover:scale-105"
-                    }`}
-                    style={{
-                      backgroundColor:
-                        activeStep === index ||
-                        (activeStep === -1 && index === 0)
-                          ? "#012068"
-                          : "#333", // Black when inactive
-                      "--tw-ring-color":
-                        activeStep === index ||
-                        (activeStep === -1 && index === 0)
-                          ? "#012068" + "33"
-                          : "transparent",
-                    } as React.CSSProperties}
+                    key={index}
+                    className={`relative group transition-all duration-500 ${
+                      index !== 0 ? "mt-8 sm:mt-12" : ""
+                    } ${index === 0 ? "pt-2" : ""}`}
+                    onMouseEnter={() => setActiveStep(index)}
+                    onMouseLeave={() => setActiveStep(-1)}
                   >
-                    {step.number}
-                  </div>
+                    {/* Connecting Line */}
+                    {index !== 0 && (
+                      <div className="absolute left-6 -top-8 sm:-top-12 w-0.5 h-8 sm:h-12 bg-gray-300 overflow-hidden">
+                        <div
+                          className={`w-full transition-all duration-700 ease-out origin-bottom ${
+                            activeStep >= index ||
+                            (activeStep === -1 && index === 0)
+                              ? "h-full scale-y-100"
+                              : "h-0 scale-y-0"
+                          }`}
+                          style={{ backgroundColor: "#012068" }}
+                        />
+                      </div>
+                    )}
 
-                  {/* Step Card */}
-                  <div
-                    className={`flex-1 p-4 sm:p-6 rounded-lg border transition-all duration-500 transform ${
-                      activeStep === index ||
-                      (activeStep === -1 && index === 0)
-                        ? "border-transparent text-white shadow-2xl scale-105 -translate-y-2"
-                        : "border-gray-300 hover:shadow-lg hover:-translate-y-1"
-                    }`}
-                    style={{
-                      backgroundColor:
-                        activeStep === index ||
-                        (activeStep === -1 && index === 0)
-                          ? "#012068"
-                          : "#f4f4f4",
-                      color:
-                        activeStep === index ||
-                        (activeStep === -1 && index === 0)
-                          ? "white"
-                          : "#333", // Black text when inactive
-                    }}
-                  >
-                    {/* Icon */}
-                    <div
-                      className={`mb-4 transition-all duration-500 transform ${
-                        activeStep === index ||
-                        (activeStep === -1 && index === 0)
-                          ? "text-white"
-                          : "scale-100 group-hover:scale-105"
-                      }`}
-                      style={{
-                        color:
+                    {/* Step Content */}
+                    <div className="flex items-start gap-4 sm:gap-6">
+                      {/* Number Circle */}
+                      <div
+                        className={`relative z-10 flex-shrink-0 w-12 h-12 rounded-full flex items-center justify-center text-white font-semibold text-lg transition-all duration-500 transform ${
                           activeStep === index ||
                           (activeStep === -1 && index === 0)
-                            ? "white"
-                            : "black", // Black icon when inactive
-                      }}
-                    >
-                      {step.icon}
-                    </div>
+                            ? "scale-110 shadow-lg ring-4"
+                            : "scale-100 hover:scale-105"
+                        }`}
+                        style={{
+                          backgroundColor:
+                            activeStep === index ||
+                            (activeStep === -1 && index === 0)
+                              ? "#012068"
+                              : "#333",
+                          "--tw-ring-color":
+                            activeStep === index ||
+                            (activeStep === -1 && index === 0)
+                              ? "#012068" + "33"
+                              : "transparent",
+                        } as React.CSSProperties}
+                      >
+                        {step.number}
+                      </div>
 
-                    {/* Text */}
-                    <h3 className="text-lg sm:text-xl font-semibold mb-3 transition-all duration-300">
-                      {step.title}
-                    </h3>
-                    <p className="text-sm sm:text-base leading-relaxed transition-all duration-500">
-                      {step.description}
-                    </p>
+                      {/* Step Card */}
+                      <div
+                        className={`flex-1 p-4 sm:p-6 rounded-lg border transition-all duration-500 transform ${
+                          activeStep === index ||
+                          (activeStep === -1 && index === 0)
+                            ? "border-transparent text-white shadow-2xl scale-105 -translate-y-2"
+                            : "border-gray-300 hover:shadow-lg hover:-translate-y-1"
+                        }`}
+                        style={{
+                          backgroundColor:
+                            activeStep === index ||
+                            (activeStep === -1 && index === 0)
+                              ? "#012068"
+                              : "#f4f4f4",
+                          color:
+                            activeStep === index ||
+                            (activeStep === -1 && index === 0)
+                              ? "white"
+                              : "#333",
+                        }}
+                      >
+                        {/* Icon */}
+                        <div
+                          className={`mb-4 transition-all duration-500 transform ${
+                            activeStep === index ||
+                            (activeStep === -1 && index === 0)
+                              ? "text-white"
+                              : "scale-100 group-hover:scale-105"
+                          }`}
+                          style={{
+                            color:
+                              activeStep === index ||
+                              (activeStep === -1 && index === 0)
+                                ? "white"
+                                : "black",
+                          }}
+                        >
+                          {step.icon}
+                        </div>
+
+                        {/* Text */}
+                        <h3 className="text-lg sm:text-xl font-semibold mb-3 transition-all duration-300">
+                          {step.title}
+                        </h3>
+                        <p className="text-sm sm:text-base leading-relaxed transition-all duration-500">
+                          {step.description}
+                        </p>
+                      </div>
+                    </div>
                   </div>
-                </div>
+                ))}
               </div>
-            ))}
+            </div>
           </div>
         </div>
       </div>
     </div>
   );
-}
+}
\ No newline at end of file