49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
'use client';
|
|
|
|
import { DotLottieReact } from '@lottiefiles/dotlottie-react';
|
|
import GlobalMapLottie from '@workspace/ui/lotties/global-map.json';
|
|
import { motion } from 'framer-motion';
|
|
import { useTranslations } from 'next-intl';
|
|
|
|
export function GlobalMap() {
|
|
const t = useTranslations('index');
|
|
return (
|
|
<motion.section
|
|
initial={{ opacity: 0 }}
|
|
whileInView={{ opacity: 1 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5 }}
|
|
>
|
|
<motion.h2
|
|
initial={{ opacity: 0, y: -20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5 }}
|
|
className='mb-2 text-center text-3xl font-bold'
|
|
>
|
|
{t('global_map_itle')}
|
|
</motion.h2>
|
|
<motion.p
|
|
initial={{ opacity: 0, y: -20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: 0.1 }}
|
|
className='text-muted-foreground mb-8 text-center text-lg'
|
|
>
|
|
{t('global_map_description')}
|
|
</motion.p>
|
|
<motion.div
|
|
className='aspect-video w-full overflow-hidden'
|
|
initial={{ scale: 0.9, opacity: 0 }}
|
|
animate={{ scale: 1, opacity: 1 }}
|
|
transition={{
|
|
type: 'spring',
|
|
stiffness: 100,
|
|
damping: 15,
|
|
delay: 0.4,
|
|
}}
|
|
>
|
|
<DotLottieReact className='w-full scale-150' data={GlobalMapLottie} autoplay loop />
|
|
</motion.div>
|
|
</motion.section>
|
|
);
|
|
}
|