93 lines
2.6 KiB
TypeScript
93 lines
2.6 KiB
TypeScript
import { Link } from 'react-router-dom';
|
|
import { motion } from 'motion/react';
|
|
import { useTranslation } from '../../i18n';
|
|
import { useTypingEffect } from '../../hooks';
|
|
import { Scene3D } from '../effects';
|
|
import { Button } from '../ui';
|
|
import styles from './Hero.module.css';
|
|
|
|
export function Hero() {
|
|
const { t } = useTranslation();
|
|
|
|
const { text } = useTypingEffect({
|
|
words: t.hero.rotatingWords,
|
|
typingSpeed: 80,
|
|
deletingSpeed: 40,
|
|
pauseDuration: 2500,
|
|
});
|
|
|
|
return (
|
|
<section className={styles.hero}>
|
|
<Scene3D />
|
|
|
|
<div className={`${styles.content} container`}>
|
|
<motion.div
|
|
className={styles.text}
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, ease: 'easeOut' }}
|
|
>
|
|
<motion.p
|
|
className={styles.greeting}
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ delay: 0.2 }}
|
|
>
|
|
{t.hero.greeting}
|
|
</motion.p>
|
|
|
|
<motion.h1
|
|
className={styles.title}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.3, duration: 0.5 }}
|
|
>
|
|
{t.hero.company}
|
|
</motion.h1>
|
|
|
|
<motion.div
|
|
className={styles.tagline}
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ delay: 0.5 }}
|
|
>
|
|
<span>{t.hero.tagline}</span>
|
|
<span className={styles.typed}>
|
|
{text}
|
|
<span className={styles.cursor}>|</span>
|
|
</span>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
className={styles.cta}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.7, duration: 0.5 }}
|
|
>
|
|
<Link to="/contact">
|
|
<Button variant="primary" size="lg">
|
|
{t.hero.cta}
|
|
</Button>
|
|
</Link>
|
|
<Link to="/about">
|
|
<Button variant="outline" size="lg">
|
|
{t.hero.ctaSecondary}
|
|
</Button>
|
|
</Link>
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
|
|
<div className={styles.scrollIndicator}>
|
|
<motion.div
|
|
className={styles.scrollMouse}
|
|
animate={{ y: [0, 8, 0] }}
|
|
transition={{ repeat: Infinity, duration: 1.5, ease: 'easeInOut' }}
|
|
>
|
|
<span className={styles.scrollWheel} />
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|