65 lines
1.7 KiB
TypeScript
65 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { useLanguage } from '@/contexts/LanguageContext';
|
|
|
|
export default function HeroTitle() {
|
|
const { t } = useLanguage();
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => {
|
|
setMounted(true);
|
|
}, 400);
|
|
return () => clearTimeout(timer);
|
|
}, []);
|
|
|
|
return (
|
|
<div
|
|
className="flex flex-col gap-8 items-start justify-start self-stretch flex-shrink-0 relative"
|
|
style={{
|
|
transform: mounted ? 'translateY(0)' : 'translateY(3rem)',
|
|
opacity: mounted ? 1 : 0,
|
|
transition: 'transform 1s ease-out, opacity 1s ease-out'
|
|
}}
|
|
>
|
|
<div className="flex flex-col gap-4 items-start justify-start self-stretch flex-shrink-0 relative">
|
|
<div
|
|
className="text-[#fcfcfd] text-left relative self-stretch font-domine"
|
|
style={{
|
|
fontSize: '100px',
|
|
lineHeight: '100%',
|
|
letterSpacing: '-0.03em',
|
|
fontWeight: 400
|
|
}}
|
|
>
|
|
{t('hero.title1')}
|
|
</div>
|
|
|
|
<div
|
|
className="text-[#fcfcfd] text-left relative w-[926px] h-[100px] font-domine"
|
|
style={{
|
|
fontSize: '100px',
|
|
lineHeight: '100%',
|
|
letterSpacing: '-0.03em',
|
|
fontWeight: 700
|
|
}}
|
|
>
|
|
{t('hero.title2')}
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className="text-[#fcfcfd] text-left relative w-[488px] flex items-center justify-start font-domine"
|
|
style={{
|
|
fontSize: '16px',
|
|
lineHeight: '150%',
|
|
fontWeight: 400
|
|
}}
|
|
>
|
|
{t('hero.description')}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|