adilovcode/oriyo_next
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: adjust timeline animation

Browse Source
This commit is contained in:
BunyodL 2025-04-27 18:54:17 +05:00
parent 1797b0d96d
commit 91c6544f0c
1 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/widgets/about-page/company-timeline.tsx
View File

@ -74,18 +74,22 @@ export function CompanyTimeline() {
data-aos='zoom-in-down' data-aos='zoom-in-down'
> >
<div className='mb-2 inline-flex items-center justify-center rounded-full bg-red-100 p-2'> <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> </div>
<h3 className='text-xl font-bold'>{event.year}</h3> <h3 className='text-xl font-bold'>{event.year}</h3>
<h4 className='mb-2 text-lg font-semibold'>{event.title}</h4> <h4 className='mb-2 text-lg font-semibold'>{event.title}</h4>
</div> </div>
<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 <Card
className='overflow-hidden transition-all hover:shadow-md' 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'> <CardContent className='p-4'>
<p className='text-gray-600'>{event.description}</p> <p className='text-gray-600'>{event.description}</p>
@ -94,8 +98,8 @@ export function CompanyTimeline() {
</div> </div>
</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='absolute top-5 left-1/2 -ml-3 hidden size-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='size-3 rounded-full bg-white'></div>
</div> </div>
</div> </div>
))} ))}
@ -105,16 +109,18 @@ export function CompanyTimeline() {
<div className='mt-8 text-center'> <div className='mt-8 text-center'>
<Button <Button
variant='outline' variant='outline'
onClick={() => setExpanded(!expanded)} onClick={() => {
setExpanded(!expanded);
}}
className='inline-flex items-center' className='inline-flex items-center'
> >
{expanded ? ( {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> </Button>