55 lines
1.4 KiB
JavaScript
55 lines
1.4 KiB
JavaScript
|
import { motion } from 'framer-motion';
|
||
|
|
import { useTranslation } from 'react-i18next';
|
||
|
|
export default function HeroSection() {
|
||
|
|
const {t} =useTranslation()
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<motion.div
|
||
|
|
className="text-center mb-12"
|
||
|
|
initial="hidden"
|
||
|
|
animate="visible"
|
||
|
|
variants={{
|
||
|
|
hidden: { opacity: 0 },
|
||
|
|
visible: {
|
||
|
|
opacity: 1,
|
||
|
|
transition: { staggerChildren: 0.2 },
|
||
|
|
},
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<motion.h1
|
||
|
|
className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-amber-50 mb-6 leading-tight tracking-tight"
|
||
|
|
variants={{
|
||
|
|
hidden: { opacity: 0, y: 20 },
|
||
|
|
visible: { opacity: 1, y: 0 },
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{t("heroTitleLine1")}
|
||
|
|
<br />
|
||
|
|
<motion.span
|
||
|
|
className="text-amber-300"
|
||
|
|
animate={{
|
||
|
|
y: [0, -10, 0],
|
||
|
|
}}
|
||
|
|
transition={{
|
||
|
|
duration: 2,
|
||
|
|
repeat: Infinity,
|
||
|
|
ease: "easeInOut",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{t("heroTitleLine2")}
|
||
|
|
</motion.span>
|
||
|
|
</motion.h1>
|
||
|
|
<motion.p
|
||
|
|
className="text-base sm:text-lg text-amber-50 max-w-2xl mx-auto leading-relaxed"
|
||
|
|
variants={{
|
||
|
|
hidden: { opacity: 0, y: 20 },
|
||
|
|
visible: { opacity: 1, y: 0 },
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{t("heroSubtitle")}
|
||
|
|
</motion.p>
|
||
|
|
</motion.div>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|