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

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

@@ -12,26 +12,54 @@ const releases = [
export function Timeline() {
return (
<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) => (
<motion.div
key={release.version}
initial={{ opacity: 0, x: -20 }}
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"
>
<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" />
</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">
<h3 className="text-xl font-semibold text-gray-900 mb-2">
{/* Timeline content */}
<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}
</h3>
<time className="text-sm text-gray-500 font-light">{release.date}</time>
<p className="mt-2 text-gray-700 text-lg leading-relaxed">{release.description}</p>
<time
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>
</motion.div>
))}