41 lines
1.4 KiB
TypeScript
41 lines
1.4 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { motion } from 'framer-motion';
|
||
|
|
import { useLanguage } from '@/contexts/LanguageContext';
|
||
|
|
|
||
|
|
export default function HeroTitle() {
|
||
|
|
const { t } = useLanguage();
|
||
|
|
|
||
|
|
const titleStyle = {
|
||
|
|
fontSize: 'clamp(48px, 6.5vw, 140px)',
|
||
|
|
lineHeight: '100%',
|
||
|
|
letterSpacing: '-0.03em',
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex flex-col gap-4 items-start justify-start self-stretch flex-shrink-0 relative overflow-hidden select-none">
|
||
|
|
<motion.div
|
||
|
|
className="text-special-white text-left relative self-stretch font-domine md:whitespace-nowrap"
|
||
|
|
style={{ ...titleStyle, fontWeight: 400 }}
|
||
|
|
initial={{ opacity: 0, x: -60, filter: 'blur(12px)' }}
|
||
|
|
whileInView={{ opacity: 1, x: 0, filter: 'blur(0px)' }}
|
||
|
|
viewport={{ once: true }}
|
||
|
|
transition={{ duration: 0.9, ease: 'easeOut', delay: 0.2 }}
|
||
|
|
>
|
||
|
|
{t('hero.title1')}
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
<motion.div
|
||
|
|
className="text-special-white text-left relative w-full font-domine md:whitespace-nowrap"
|
||
|
|
style={{ ...titleStyle, fontWeight: 700 }}
|
||
|
|
initial={{ opacity: 0, x: 60, filter: 'blur(12px)' }}
|
||
|
|
whileInView={{ opacity: 1, x: 0, filter: 'blur(0px)' }}
|
||
|
|
viewport={{ once: true }}
|
||
|
|
transition={{ duration: 0.9, ease: 'easeOut', delay: 0.4 }}
|
||
|
|
>
|
||
|
|
{t('hero.title2')}
|
||
|
|
</motion.div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|