Snigdha-OS/Snigdha-OS.github.io
2
0
Fork 0
mirror of https://github.com/Snigdha-OS/Snigdha-OS.github.io.git synced 2025-09-14 16:45:01 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

✨ style: change minor in ui

Browse Source
This commit is contained in:
eshanized
2025-01-06 14:09:11 +05:30
parent 5a1493331c
commit 8b94442b54
1 changed files with 37 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/about/Timeline.tsx
View File

@@ -12,26 +12,54 @@ const releases = [
export function Timeline() { export function Timeline() {
return ( return (
<div className="relative"> <div className="relative">
<div className="absolute left-4 top-0 bottom-0 w-0.5 bg-gray-200" /> {/* Vertical timeline line */}
<div className="absolute left-4 top-0 bottom-0 w-1 bg-gray-300 rounded" aria-hidden="true" />
{/* Timeline items */}
{releases.map((release, index) => ( {releases.map((release, index) => (
<motion.div <motion.div
key={release.version} key={release.version}
initial={{ opacity: 0, x: -20 }} initial={{ opacity: 0, x: -20 }}
whileInView={{ opacity: 1, x: 0 }} whileInView={{ opacity: 1, x: 0 }}
transition={{ delay: index * 0.2, duration: 0.8 }} viewport={{ once: true }}
transition={{ delay: index * 0.15, duration: 0.7 }}
className="relative pl-12 pb-12" className="relative pl-12 pb-12"
> >
<div className="absolute left-0 top-0 p-2 bg-cornflower-blue/70 rounded-full border-2 border-white shadow-lg"> {/* Timeline point */}
<div
className="absolute left-0 top-0 p-2 bg-blue-600 rounded-full border-2 border-white shadow-lg"
role="img"
aria-label={`Release date: ${release.date}`}
>
<Calendar className="h-5 w-5 text-white" /> <Calendar className="h-5 w-5 text-white" />
</div> </div>
<div className="bg-white/80 backdrop-blur-sm p-6 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out"> {/* Timeline content */}
<h3 className="text-xl font-semibold text-gray-900 mb-2"> <div
className="bg-white/90 backdrop-blur p-6 rounded-lg shadow-md hover:shadow-lg transition-transform transform hover:-translate-y-1 duration-300 ease-in-out"
tabIndex={0}
role="group"
aria-labelledby={`release-title-${release.version}`}
aria-describedby={`release-desc-${release.version}`}
>
<h3
id={`release-title-${release.version}`}
className="text-xl font-semibold text-gray-900 mb-2"
>
Snigdha OS {release.version} Snigdha OS {release.version}
</h3> </h3>
<time className="text-sm text-gray-500 font-light">{release.date}</time> <time
<p className="mt-2 text-gray-700 text-lg leading-relaxed">{release.description}</p> id={`release-date-${release.version}`}
className="text-sm text-gray-500 font-light"
>
{release.date}
</time>
<p
id={`release-desc-${release.version}`}
className="mt-3 text-gray-700 text-lg leading-relaxed"
>
{release.description}
</p>
</div> </div>
</motion.div> </motion.div>
))} ))}