56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import Image from 'next/image';
|
|
import { Button } from '@heroui/react';
|
|
import { useLanguage } from '@/contexts/LanguageContext';
|
|
|
|
export default function HeroButtons() {
|
|
const { t } = useLanguage();
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => {
|
|
setMounted(true);
|
|
}, 500);
|
|
return () => clearTimeout(timer);
|
|
}, []);
|
|
|
|
return (
|
|
<div
|
|
className="flex flex-row gap-5 items-start justify-start flex-shrink-0 relative"
|
|
style={{
|
|
transform: mounted ? 'translateY(0)' : 'translateY(3rem)',
|
|
opacity: mounted ? 1 : 0,
|
|
transition: 'transform 1s ease-out, opacity 1s ease-out'
|
|
}}
|
|
>
|
|
{/* Start Investing Button */}
|
|
<Button
|
|
size="lg"
|
|
className="bg-white text-[#111827] font-bold text-lg h-[60px] px-8"
|
|
endContent={
|
|
<Image
|
|
src="/component-10.svg"
|
|
alt="Arrow"
|
|
width={20}
|
|
height={20}
|
|
className="flex-shrink-0"
|
|
/>
|
|
}
|
|
>
|
|
{t('hero.startInvesting')}
|
|
</Button>
|
|
|
|
{/* Read the Whitepaper Button */}
|
|
<Button
|
|
size="lg"
|
|
variant="bordered"
|
|
className="border-white/20 bg-white/10 text-white font-bold text-lg h-[60px] px-8 backdrop-blur-[30px] hover:bg-white/20 hover:border-white/40"
|
|
>
|
|
{t('hero.readWhitepaper')}
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|