feat: initialize reactjs project using vite

src/components/sections/Hero.tsx

@@ -0,0 +1,92 @@
+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>
+  );
+}