fix: adjust timeline animation
This commit is contained in:
parent
1797b0d96d
commit
91c6544f0c
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user