fix: adjust timeline animation

This commit is contained in:
BunyodL 2025-04-27 18:54:17 +05:00
parent 1797b0d96d
commit 91c6544f0c

View File

@ -74,18 +74,22 @@ export function CompanyTimeline() {
data-aos='zoom-in-down'
>
<div className='mb-2 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
<Calendar className='h-5 w-5 text-red-600' />
<Calendar className='size-5 text-red-600' />
</div>
<h3 className='text-xl font-bold'>{event.year}</h3>
<h4 className='mb-2 text-lg font-semibold'>{event.title}</h4>
</div>
<div
className={`${index % 2 === 0 ? 'md:pl-10' : 'md:order-first md:pr-10 md:text-right'}`}
className={
index % 2 === 0
? 'md:pl-10'
: 'md:order-first md:pr-10 md:text-right'
}
>
<Card
className='overflow-hidden transition-all hover:shadow-md'
data-aos={index % 2 === 0 ? 'fade-up' : 'fade-right'}
data-aos={'fade-up'}
>
<CardContent className='p-4'>
<p className='text-gray-600'>{event.description}</p>
@ -94,8 +98,8 @@ export function CompanyTimeline() {
</div>
</div>
<div className='absolute top-5 left-1/2 -ml-3 hidden h-6 w-6 items-center justify-center rounded-full bg-red-600 md:flex'>
<div className='h-3 w-3 rounded-full bg-white'></div>
<div className='absolute top-5 left-1/2 -ml-3 hidden size-6 items-center justify-center rounded-full bg-red-600 md:flex'>
<div className='size-3 rounded-full bg-white'></div>
</div>
</div>
))}
@ -105,16 +109,18 @@ export function CompanyTimeline() {
<div className='mt-8 text-center'>
<Button
variant='outline'
onClick={() => setExpanded(!expanded)}
onClick={() => {
setExpanded(!expanded);
}}
className='inline-flex items-center'
>
{expanded ? (
<>
Свернуть <ChevronUp className='ml-2 h-4 w-4' />
Свернуть <ChevronUp className='ml-2 size-4' />
</>
) : (
<>
Показать больше <ChevronDown className='ml-2 h-4 w-4' />
Показать больше <ChevronDown className='ml-2 size-4' />
</>
)}
</Button>