first commit
This commit is contained in:
178
src/components/about/process.tsx
Normal file
178
src/components/about/process.tsx
Normal file
@ -0,0 +1,178 @@
|
||||
'use client'
|
||||
import React, { useState } from "react";
|
||||
|
||||
export default function Process() {
|
||||
const [activeStep, setActiveStep] = useState(-1);
|
||||
|
||||
const CalendarIcon = (
|
||||
<svg
|
||||
width={34}
|
||||
height={34}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
|
||||
<line x1="16" y1="2" x2="16" y2="6" />
|
||||
<line x1="8" y1="2" x2="8" y2="6" />
|
||||
<line x1="3" y1="10" x2="21" y2="10" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const steps = [
|
||||
{
|
||||
number: "1",
|
||||
title: "2020",
|
||||
description: "Department of Trauma Surgery inaugurated at Town Campus",
|
||||
icon: CalendarIcon,
|
||||
},
|
||||
{
|
||||
number: "2",
|
||||
title: "2022",
|
||||
description: "Ranipet Campus opens as Level-1 Trauma Facility",
|
||||
icon: CalendarIcon,
|
||||
},
|
||||
{
|
||||
number: "3",
|
||||
title: "Nov 2022",
|
||||
description: "Trauma centre begins operations with full emergency suite",
|
||||
icon: CalendarIcon,
|
||||
},
|
||||
];
|
||||
|
||||
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>
|
||||
<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)}
|
||||
>
|
||||
{/* 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 */}
|
||||
<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}
|
||||
>
|
||||
{step.number}
|
||||
</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:
|
||||
activeStep === index ||
|
||||
(activeStep === -1 && index === 0)
|
||||
? "white"
|
||||
: "black", // Black icon when inactive
|
||||
}}
|
||||
>
|
||||
{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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user