feat: initialize reactjs project using vite

src/components/effects/Scene3D.module.css

@@ -0,0 +1,20 @@
+.container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  pointer-events: none;
+}
+
+.container canvas {
+  touch-action: none;
+}
+
+/* Fade out on smaller screens */
+@media (max-width: 768px) {
+  .container {
+    opacity: 0.5;
+  }
+}

src/components/effects/Scene3D.tsx

@@ -0,0 +1,96 @@
+import { useRef, useMemo } from 'react';
+import { Canvas, useFrame } from '@react-three/fiber';
+import { Float, MeshDistortMaterial } from '@react-three/drei';
+import * as THREE from 'three';
+import styles from './Scene3D.module.css';
+
+function FloatingShape() {
+  const meshRef = useRef<THREE.Mesh>(null);
+
+  useFrame((state) => {
+    if (meshRef.current) {
+      meshRef.current.rotation.x = state.clock.elapsedTime * 0.1;
+      meshRef.current.rotation.y = state.clock.elapsedTime * 0.15;
+    }
+  });
+
+  return (
+    <Float
+      speed={2}
+      rotationIntensity={0.5}
+      floatIntensity={1}
+    >
+      <mesh ref={meshRef} scale={2.5}>
+        <icosahedronGeometry args={[1, 1]} />
+        <MeshDistortMaterial
+          color="#7FD998"
+          emissive="#004D2A"
+          emissiveIntensity={0.3}
+          roughness={0.4}
+          metalness={0.8}
+          distort={0.3}
+          speed={2}
+        />
+      </mesh>
+    </Float>
+  );
+}
+
+function ParticleField() {
+  const count = 100;
+  
+  const positions = useMemo(() => {
+    const pos = new Float32Array(count * 3);
+    for (let i = 0; i < count; i++) {
+      pos[i * 3] = (Math.random() - 0.5) * 20;
+      pos[i * 3 + 1] = (Math.random() - 0.5) * 20;
+      pos[i * 3 + 2] = (Math.random() - 0.5) * 20;
+    }
+    return pos;
+  }, []);
+
+  const pointsRef = useRef<THREE.Points>(null);
+
+  useFrame((state) => {
+    if (pointsRef.current) {
+      pointsRef.current.rotation.y = state.clock.elapsedTime * 0.02;
+    }
+  });
+
+  return (
+    <points ref={pointsRef}>
+      <bufferGeometry>
+        <bufferAttribute
+          attach="attributes-position"
+          args={[positions, 3]}
+        />
+      </bufferGeometry>
+      <pointsMaterial
+        size={0.05}
+        color="#7FD998"
+        transparent
+        opacity={0.6}
+        sizeAttenuation
+      />
+    </points>
+  );
+}
+
+export function Scene3D() {
+  return (
+    <div className={styles.container}>
+      <Canvas
+        camera={{ position: [0, 0, 8], fov: 45 }}
+        dpr={[1, 2]}
+        gl={{ antialias: true, alpha: true }}
+      >
+        <ambientLight intensity={0.5} />
+        <directionalLight position={[10, 10, 5]} intensity={1} />
+        <pointLight position={[-10, -10, -5]} intensity={0.5} color="#7FD998" />
+        
+        <FloatingShape />
+        <ParticleField />
+      </Canvas>
+    </div>
+  );
+}

src/components/effects/index.ts

@@ -0,0 +1 @@
+export { Scene3D } from './Scene3D';

src/components/layout/CustomCursor.module.css

@@ -0,0 +1,67 @@
+.cursor {
+  position: fixed;
+  width: 40px;
+  height: 40px;
+  border: 2px solid var(--md-sys-color-primary);
+  border-radius: 50%;
+  pointer-events: none;
+  z-index: 9999;
+  transform: translate(-50%, -50%);
+  transition: 
+    width 0.15s ease-out,
+    height 0.15s ease-out,
+    border-color 0.15s ease-out,
+    background-color 0.15s ease-out,
+    opacity 0.15s ease-out;
+  mix-blend-mode: difference;
+}
+
+.cursorDot {
+  position: fixed;
+  width: 6px;
+  height: 6px;
+  background-color: var(--md-sys-color-primary);
+  border-radius: 50%;
+  pointer-events: none;
+  z-index: 10000;
+  transform: translate(-50%, -50%);
+  transition: opacity 0.15s ease-out;
+}
+
+.cursor.pointer {
+  width: 60px;
+  height: 60px;
+  border-color: var(--md-sys-color-primary);
+  background-color: rgba(127, 217, 152, 0.1);
+}
+
+.cursor.clicking {
+  width: 35px;
+  height: 35px;
+  background-color: rgba(127, 217, 152, 0.2);
+}
+
+.cursor.hidden,
+.cursorDot.hidden {
+  opacity: 0;
+}
+
+/* Hide on touch devices and when reduced motion is preferred */
+@media (hover: none), (prefers-reduced-motion: reduce) {
+  .cursor,
+  .cursorDot {
+    display: none;
+  }
+}
+
+/* Add global cursor hide for devices with custom cursor */
+@media (hover: hover) {
+  :global(body) {
+    cursor: none;
+  }
+
+  :global(a),
+  :global(button) {
+    cursor: none;
+  }
+}

src/components/layout/CustomCursor.tsx

@@ -0,0 +1,74 @@
+import { useState, useEffect, useCallback } from 'react';
+import styles from './CustomCursor.module.css';
+
+export function CustomCursor() {
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [isPointer, setIsPointer] = useState(false);
+  const [isHidden, setIsHidden] = useState(true);
+  const [isClicking, setIsClicking] = useState(false);
+
+  const handleMouseMove = useCallback((e: MouseEvent) => {
+    setPosition({ x: e.clientX, y: e.clientY });
+    setIsHidden(false);
+
+    const target = e.target as HTMLElement;
+    const isClickable =
+      target.tagName === 'A' ||
+      target.tagName === 'BUTTON' ||
+      !!target.closest('a') ||
+      !!target.closest('button') ||
+      window.getComputedStyle(target).cursor === 'pointer';
+    
+    setIsPointer(isClickable);
+  }, []);
+
+  const handleMouseDown = useCallback(() => setIsClicking(true), []);
+  const handleMouseUp = useCallback(() => setIsClicking(false), []);
+  const handleMouseLeave = useCallback(() => setIsHidden(true), []);
+  const handleMouseEnter = useCallback(() => setIsHidden(false), []);
+
+  useEffect(() => {
+    // Don't show custom cursor on touch devices
+    if (window.matchMedia('(hover: none)').matches) {
+      return;
+    }
+
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mousedown', handleMouseDown);
+    document.addEventListener('mouseup', handleMouseUp);
+    document.addEventListener('mouseleave', handleMouseLeave);
+    document.addEventListener('mouseenter', handleMouseEnter);
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mousedown', handleMouseDown);
+      document.removeEventListener('mouseup', handleMouseUp);
+      document.removeEventListener('mouseleave', handleMouseLeave);
+      document.removeEventListener('mouseenter', handleMouseEnter);
+    };
+  }, [handleMouseMove, handleMouseDown, handleMouseUp, handleMouseLeave, handleMouseEnter]);
+
+  // Don't render on touch devices
+  if (typeof window !== 'undefined' && window.matchMedia('(hover: none)').matches) {
+    return null;
+  }
+
+  return (
+    <>
+      <div
+        className={`${styles.cursor} ${isPointer ? styles.pointer : ''} ${isHidden ? styles.hidden : ''} ${isClicking ? styles.clicking : ''}`}
+        style={{
+          left: position.x,
+          top: position.y,
+        }}
+      />
+      <div
+        className={`${styles.cursorDot} ${isHidden ? styles.hidden : ''}`}
+        style={{
+          left: position.x,
+          top: position.y,
+        }}
+      />
+    </>
+  );
+}

src/components/layout/Footer.module.css

@@ -0,0 +1,88 @@
+.footer {
+  margin-top: auto;
+  padding: var(--space-2xl) 0;
+  background-color: var(--md-sys-color-surface-container-lowest);
+  border-top: 1px solid var(--md-sys-color-outline-variant);
+}
+
+.content {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-lg);
+}
+
+.brand {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 0.25em;
+  font-size: 1.25rem;
+  font-weight: 700;
+}
+
+.logoText {
+  color: var(--md-sys-color-on-surface);
+}
+
+.logoAccent {
+  color: var(--md-sys-color-primary);
+}
+
+.copyright {
+  font-size: 0.875rem;
+  color: var(--md-sys-color-on-surface);
+  opacity: 0.6;
+}
+
+.links {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+}
+
+.socialLink {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  color: var(--md-sys-color-on-surface);
+  background-color: var(--md-sys-color-surface-container);
+  border-radius: var(--radius-full);
+  transition: color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);
+}
+
+.socialLink:hover {
+  color: var(--md-sys-color-primary);
+  background-color: var(--md-sys-color-surface-container-high);
+  transform: translateY(-2px);
+}
+
+.credit {
+  font-size: 0.875rem;
+  color: var(--md-sys-color-on-surface);
+  opacity: 0.6;
+}
+
+.heart {
+  color: var(--md-sys-color-primary);
+  font-weight: 500;
+}
+
+@media (max-width: 768px) {
+  .content {
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .brand {
+    align-items: center;
+  }
+}

src/components/layout/Footer.tsx

@@ -0,0 +1,52 @@
+import { useTranslation } from '../../i18n';
+import styles from './Footer.module.css';
+
+export function Footer() {
+  const { t } = useTranslation();
+  const currentYear = new Date().getFullYear();
+
+  return (
+    <footer className={styles.footer}>
+      <div className={`${styles.content} container`}>
+        <div className={styles.brand}>
+          <span className={styles.logo}>
+            <span className={styles.logoText}>Ragusa</span>
+            <span className={styles.logoAccent}>IT</span>
+          </span>
+          <p className={styles.copyright}>
+            {t.footer.copyright.replace('{year}', String(currentYear))}
+          </p>
+        </div>
+
+        <div className={styles.links}>
+          <a
+            href="https://github.com/ragusa-it"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={styles.socialLink}
+            aria-label="GitHub"
+          >
+            <svg
+              viewBox="0 0 24 24"
+              width="24"
+              height="24"
+              fill="currentColor"
+              aria-hidden="true"
+            >
+              <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
+            </svg>
+          </a>
+        </div>
+
+        <div className={styles.credit}>
+          <p>
+            {t.footer.madeWith}{' '}
+            <span className={styles.heart}>React</span>{' '}
+            {t.footer.and}{' '}
+            <span className={styles.heart}>TypeScript</span>
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+}

src/components/layout/Navbar.module.css

@@ -0,0 +1,204 @@
+.header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  padding: var(--space-md) 0;
+  transition: background-color var(--transition-normal), backdrop-filter var(--transition-normal);
+}
+
+.header.scrolled {
+  background-color: rgba(15, 20, 16, 0.85);
+  backdrop-filter: blur(12px);
+  border-bottom: 1px solid var(--md-sys-color-outline-variant);
+}
+
+.nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-lg);
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 0.25em;
+  font-size: 1.5rem;
+  font-weight: 700;
+  text-decoration: none;
+  color: var(--md-sys-color-on-surface);
+}
+
+.logoText {
+  color: var(--md-sys-color-on-surface);
+}
+
+.logoAccent {
+  color: var(--md-sys-color-primary);
+}
+
+.navLinks {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xl);
+}
+
+.navLink {
+  position: relative;
+  padding: var(--space-sm) var(--space-md);
+  font-size: 0.95rem;
+  font-weight: 500;
+  color: var(--md-sys-color-on-surface);
+  text-decoration: none;
+  opacity: 0.8;
+  transition: opacity var(--transition-fast), color var(--transition-fast);
+}
+
+.navLink:hover {
+  opacity: 1;
+  color: var(--md-sys-color-primary);
+}
+
+.navLink.active {
+  opacity: 1;
+  color: var(--md-sys-color-primary);
+}
+
+.activeIndicator {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background-color: var(--md-sys-color-primary);
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+}
+
+.langToggle {
+  display: flex;
+  align-items: center;
+  gap: 0.25em;
+  padding: var(--space-sm) var(--space-md);
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--md-sys-color-on-surface);
+  background: transparent;
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: var(--radius-full);
+  cursor: pointer;
+  transition: border-color var(--transition-fast), background-color var(--transition-fast);
+}
+
+.langToggle:hover {
+  border-color: var(--md-sys-color-primary);
+  background-color: var(--md-sys-color-surface-container);
+}
+
+.langDivider {
+  opacity: 0.5;
+}
+
+.activeLang {
+  color: var(--md-sys-color-primary);
+}
+
+.mobileMenuBtn {
+  display: none;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+
+.hamburger {
+  position: relative;
+  display: block;
+  width: 24px;
+  height: 2px;
+  margin: 0 auto;
+  background-color: var(--md-sys-color-on-surface);
+  border-radius: 2px;
+  transition: background-color var(--transition-fast);
+}
+
+.hamburger::before,
+.hamburger::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  width: 24px;
+  height: 2px;
+  background-color: var(--md-sys-color-on-surface);
+  border-radius: 2px;
+  transition: transform var(--transition-normal);
+}
+
+.hamburger::before {
+  top: -7px;
+}
+
+.hamburger::after {
+  bottom: -7px;
+}
+
+.hamburger.open {
+  background-color: transparent;
+}
+
+.hamburger.open::before {
+  transform: translateY(7px) rotate(45deg);
+}
+
+.hamburger.open::after {
+  transform: translateY(-7px) rotate(-45deg);
+}
+
+/* Mobile styles */
+@media (max-width: 768px) {
+  .navLinks {
+    position: fixed;
+    top: 70px;
+    left: 0;
+    right: 0;
+    flex-direction: column;
+    gap: 0;
+    padding: var(--space-lg);
+    background-color: rgba(15, 20, 16, 0.98);
+    backdrop-filter: blur(12px);
+    border-bottom: 1px solid var(--md-sys-color-outline-variant);
+    transform: translateY(-100%);
+    opacity: 0;
+    visibility: hidden;
+    transition: transform var(--transition-normal), opacity var(--transition-normal), visibility var(--transition-normal);
+  }
+
+  .navLinks.open {
+    transform: translateY(0);
+    opacity: 1;
+    visibility: visible;
+  }
+
+  .navLink {
+    width: 100%;
+    padding: var(--space-md);
+    text-align: center;
+    font-size: 1.1rem;
+  }
+
+  .mobileMenuBtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

src/components/layout/Navbar.tsx

@@ -0,0 +1,90 @@
+import { useState, useEffect } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { motion } from 'motion/react';
+import { useTranslation } from '../../i18n';
+import styles from './Navbar.module.css';
+
+export function Navbar() {
+  const { t, language, setLanguage } = useTranslation();
+  const location = useLocation();
+  const [isScrolled, setIsScrolled] = useState(false);
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 20);
+    };
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  useEffect(() => {
+    setIsMobileMenuOpen(false);
+  }, [location.pathname]);
+
+  const navLinks = [
+    { path: '/', label: t.nav.home },
+    { path: '/about', label: t.nav.about },
+    { path: '/contact', label: t.nav.contact },
+  ];
+
+  const toggleLanguage = () => {
+    setLanguage(language === 'de' ? 'en' : 'de');
+  };
+
+  return (
+    <motion.header
+      className={`${styles.header} ${isScrolled ? styles.scrolled : ''}`}
+      initial={{ y: -100 }}
+      animate={{ y: 0 }}
+      transition={{ duration: 0.5, ease: 'easeOut' }}
+    >
+      <nav className={`${styles.nav} container`}>
+        <Link to="/" className={styles.logo}>
+          <span className={styles.logoText}>Ragusa</span>
+          <span className={styles.logoAccent}>IT</span>
+        </Link>
+
+        <div className={`${styles.navLinks} ${isMobileMenuOpen ? styles.open : ''}`}>
+          {navLinks.map((link) => (
+            <Link
+              key={link.path}
+              to={link.path}
+              className={`${styles.navLink} ${location.pathname === link.path ? styles.active : ''}`}
+            >
+              {link.label}
+              {location.pathname === link.path && (
+                <motion.div
+                  className={styles.activeIndicator}
+                  layoutId="activeNav"
+                  transition={{ type: 'spring', stiffness: 380, damping: 30 }}
+                />
+              )}
+            </Link>
+          ))}
+        </div>
+
+        <div className={styles.actions}>
+          <button
+            onClick={toggleLanguage}
+            className={styles.langToggle}
+            aria-label={`Switch to ${language === 'de' ? 'English' : 'German'}`}
+          >
+            <span className={language === 'de' ? styles.activeLang : ''}>DE</span>
+            <span className={styles.langDivider}>/</span>
+            <span className={language === 'en' ? styles.activeLang : ''}>EN</span>
+          </button>
+
+          <button
+            className={styles.mobileMenuBtn}
+            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+            aria-label="Toggle menu"
+            aria-expanded={isMobileMenuOpen}
+          >
+            <span className={`${styles.hamburger} ${isMobileMenuOpen ? styles.open : ''}`} />
+          </button>
+        </div>
+      </nav>
+    </motion.header>
+  );
+}

src/components/layout/index.ts

@@ -0,0 +1,3 @@
+export { Navbar } from './Navbar';
+export { Footer } from './Footer';
+export { CustomCursor } from './CustomCursor';

src/components/sections/Hero.module.css

@@ -0,0 +1,146 @@
+.hero {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding: var(--space-3xl) 0;
+  overflow: hidden;
+}
+
+.content {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.text {
+  max-width: 800px;
+  text-align: center;
+}
+
+.greeting {
+  font-size: 1.125rem;
+  font-weight: 500;
+  color: var(--md-sys-color-primary);
+  margin-bottom: var(--space-md);
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.title {
+  font-size: clamp(2.5rem, 6vw, 5rem);
+  font-weight: 700;
+  line-height: 1.1;
+  margin-bottom: var(--space-lg);
+  background: linear-gradient(
+    135deg,
+    var(--md-sys-color-on-surface) 0%,
+    var(--md-sys-color-primary) 50%,
+    var(--md-sys-color-on-surface) 100%
+  );
+  background-size: 200% auto;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  animation: shimmer 3s ease-in-out infinite;
+}
+
+@keyframes shimmer {
+  0%, 100% {
+    background-position: 0% center;
+  }
+  50% {
+    background-position: 100% center;
+  }
+}
+
+.tagline {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5em;
+  font-size: clamp(1.25rem, 3vw, 2rem);
+  color: var(--md-sys-color-on-surface);
+  opacity: 0.9;
+  margin-bottom: var(--space-2xl);
+}
+
+.typed {
+  color: var(--md-sys-color-primary);
+  font-weight: 600;
+  min-width: 200px;
+  text-align: left;
+}
+
+.cursor {
+  display: inline-block;
+  margin-left: 2px;
+  animation: blink 1s step-end infinite;
+}
+
+@keyframes blink {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+
+.cta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-md);
+}
+
+.scrollIndicator {
+  position: absolute;
+  bottom: var(--space-2xl);
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1;
+}
+
+.scrollMouse {
+  width: 26px;
+  height: 42px;
+  border: 2px solid var(--md-sys-color-outline);
+  border-radius: 13px;
+  display: flex;
+  justify-content: center;
+  padding-top: 8px;
+}
+
+.scrollWheel {
+  width: 4px;
+  height: 8px;
+  background-color: var(--md-sys-color-primary);
+  border-radius: 2px;
+}
+
+@media (max-width: 768px) {
+  .typed {
+    min-width: auto;
+    display: block;
+    width: 100%;
+    text-align: center;
+  }
+  
+  .cta {
+    flex-direction: column;
+  }
+  
+  .cta a {
+    width: 100%;
+  }
+  
+  .cta button {
+    width: 100%;
+  }
+}

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>
+  );
+}

src/components/sections/Services.module.css

@@ -0,0 +1,36 @@
+.services {
+  padding: var(--space-3xl) 0;
+  background-color: var(--md-sys-color-surface-container-lowest);
+}
+
+.header {
+  text-align: center;
+  margin-bottom: var(--space-3xl);
+}
+
+.title {
+  font-size: clamp(2rem, 4vw, 3rem);
+  font-weight: 700;
+  margin-bottom: var(--space-md);
+  color: var(--md-sys-color-on-surface);
+}
+
+.subtitle {
+  font-size: 1.125rem;
+  color: var(--md-sys-color-on-surface);
+  opacity: 0.75;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: var(--space-xl);
+}
+
+@media (min-width: 1024px) {
+  .grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}

src/components/sections/Services.tsx

@@ -0,0 +1,95 @@
+import { motion, type Variants } from 'motion/react';
+import { useTranslation } from '../../i18n';
+import { Card } from '../ui';
+import styles from './Services.module.css';
+
+const icons = {
+  code: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <polyline points="16 18 22 12 16 6" />
+      <polyline points="8 6 2 12 8 18" />
+    </svg>
+  ),
+  support: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M21 12a9 9 0 0 1-9 9m9-9a9 9 0 0 0-9-9m9 9H3m9 9a9 9 0 0 1-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 0 1 9-9" />
+    </svg>
+  ),
+  consulting: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
+      <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
+    </svg>
+  ),
+  hosting: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <rect x="2" y="2" width="20" height="8" rx="2" ry="2" />
+      <rect x="2" y="14" width="20" height="8" rx="2" ry="2" />
+      <line x1="6" y1="6" x2="6.01" y2="6" />
+      <line x1="6" y1="18" x2="6.01" y2="18" />
+    </svg>
+  ),
+};
+
+const containerVariants: Variants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.15,
+    },
+  },
+};
+
+const itemVariants: Variants = {
+  hidden: { opacity: 0, y: 30 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 0.5,
+      ease: [0.4, 0, 0.2, 1],
+    },
+  },
+};
+
+export function Services() {
+  const { t } = useTranslation();
+
+  return (
+    <section className={styles.services}>
+      <div className="container">
+        <motion.div
+          className={styles.header}
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: '-100px' }}
+          transition={{ duration: 0.5 }}
+        >
+          <h2 className={styles.title}>{t.services.title}</h2>
+          <p className={styles.subtitle}>{t.services.subtitle}</p>
+        </motion.div>
+
+        <motion.div
+          className={styles.grid}
+          variants={containerVariants}
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true, margin: '-50px' }}
+        >
+          {t.services.items.map((service, index) => (
+            <motion.div key={index} variants={itemVariants}>
+              <Card>
+                <Card.Icon>
+                  {icons[service.icon as keyof typeof icons]}
+                </Card.Icon>
+                <Card.Title>{service.title}</Card.Title>
+                <Card.Description>{service.description}</Card.Description>
+              </Card>
+            </motion.div>
+          ))}
+        </motion.div>
+      </div>
+    </section>
+  );
+}

src/components/sections/index.ts

@@ -0,0 +1,2 @@
+export { Hero } from './Hero';
+export { Services } from './Services';

src/components/ui/Button.module.css

@@ -0,0 +1,82 @@
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-sm);
+  font-family: var(--md-sys-typescale-body-font);
+  font-weight: 600;
+  border: none;
+  border-radius: var(--radius-full);
+  cursor: pointer;
+  transition: 
+    background-color var(--transition-fast),
+    color var(--transition-fast),
+    box-shadow var(--transition-fast);
+}
+
+.button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Sizes */
+.sm {
+  padding: var(--space-sm) var(--space-md);
+  font-size: 0.875rem;
+}
+
+.md {
+  padding: var(--space-md) var(--space-xl);
+  font-size: 1rem;
+}
+
+.lg {
+  padding: var(--space-lg) var(--space-2xl);
+  font-size: 1.125rem;
+}
+
+/* Variants */
+.primary {
+  background-color: var(--md-sys-color-primary);
+  color: var(--md-sys-color-on-primary);
+}
+
+.primary:hover:not(:disabled) {
+  background-color: var(--md-sys-color-on-primary-container);
+  box-shadow: 0 4px 20px rgba(127, 217, 152, 0.3);
+}
+
+.secondary {
+  background-color: var(--md-sys-color-surface-container-high);
+  color: var(--md-sys-color-on-surface);
+}
+
+.secondary:hover:not(:disabled) {
+  background-color: var(--md-sys-color-surface-container-highest);
+}
+
+.outline {
+  background-color: transparent;
+  color: var(--md-sys-color-primary);
+  border: 2px solid var(--md-sys-color-primary);
+}
+
+.outline:hover:not(:disabled) {
+  background-color: rgba(127, 217, 152, 0.1);
+}
+
+/* Loader */
+.loader {
+  width: 20px;
+  height: 20px;
+  border: 2px solid transparent;
+  border-top-color: currentColor;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

src/components/ui/Button.tsx

@@ -0,0 +1,42 @@
+import { type ReactNode } from 'react';
+import { motion } from 'motion/react';
+import styles from './Button.module.css';
+
+interface ButtonProps {
+  variant?: 'primary' | 'secondary' | 'outline';
+  size?: 'sm' | 'md' | 'lg';
+  children: ReactNode;
+  isLoading?: boolean;
+  disabled?: boolean;
+  className?: string;
+  type?: 'button' | 'submit' | 'reset';
+  onClick?: () => void;
+}
+
+export function Button({
+  variant = 'primary',
+  size = 'md',
+  children,
+  isLoading,
+  disabled,
+  className,
+  type = 'button',
+  onClick,
+}: ButtonProps) {
+  return (
+    <motion.button
+      type={type}
+      className={`${styles.button} ${styles[variant]} ${styles[size]} ${className || ''}`}
+      disabled={disabled || isLoading}
+      whileHover={{ scale: 1.02 }}
+      whileTap={{ scale: 0.98 }}
+      onClick={onClick}
+    >
+      {isLoading ? (
+        <span className={styles.loader} />
+      ) : (
+        children
+      )}
+    </motion.button>
+  );
+}

src/components/ui/Card.module.css

@@ -0,0 +1,51 @@
+.card {
+  position: relative;
+  padding: var(--space-xl);
+  background-color: var(--md-sys-color-surface-container);
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: var(--radius-lg);
+  transition: 
+    border-color var(--transition-fast),
+    box-shadow var(--transition-fast),
+    background-color var(--transition-fast);
+}
+
+.card.hoverable:hover {
+  border-color: var(--md-sys-color-primary);
+  background-color: var(--md-sys-color-surface-container-high);
+  box-shadow: 
+    0 8px 32px rgba(0, 0, 0, 0.3),
+    0 0 0 1px rgba(127, 217, 152, 0.1),
+    inset 0 1px 0 rgba(127, 217, 152, 0.1);
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  margin-bottom: var(--space-lg);
+  background-color: var(--md-sys-color-primary-container);
+  border-radius: var(--radius-md);
+  color: var(--md-sys-color-on-primary-container);
+}
+
+.icon svg {
+  width: 28px;
+  height: 28px;
+}
+
+.title {
+  margin-bottom: var(--space-sm);
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--md-sys-color-on-surface);
+}
+
+.description {
+  font-size: 0.95rem;
+  line-height: 1.6;
+  color: var(--md-sys-color-on-surface);
+  opacity: 0.75;
+}

src/components/ui/Card.tsx

@@ -0,0 +1,49 @@
+import { type ReactNode } from 'react';
+import { motion } from 'motion/react';
+import styles from './Card.module.css';
+
+interface CardProps {
+  children: ReactNode;
+  className?: string;
+  hover?: boolean;
+}
+
+export function Card({ children, className, hover = true }: CardProps) {
+  return (
+    <motion.div
+      className={`${styles.card} ${hover ? styles.hoverable : ''} ${className || ''}`}
+      whileHover={hover ? { y: -4 } : undefined}
+      transition={{ duration: 0.2 }}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+interface CardIconProps {
+  children: ReactNode;
+}
+
+export function CardIcon({ children }: CardIconProps) {
+  return <div className={styles.icon}>{children}</div>;
+}
+
+interface CardTitleProps {
+  children: ReactNode;
+}
+
+export function CardTitle({ children }: CardTitleProps) {
+  return <h3 className={styles.title}>{children}</h3>;
+}
+
+interface CardDescriptionProps {
+  children: ReactNode;
+}
+
+export function CardDescription({ children }: CardDescriptionProps) {
+  return <p className={styles.description}>{children}</p>;
+}
+
+Card.Icon = CardIcon;
+Card.Title = CardTitle;
+Card.Description = CardDescription;

src/components/ui/Input.module.css

@@ -0,0 +1,58 @@
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+}
+
+.label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--md-sys-color-on-surface);
+}
+
+.input {
+  padding: var(--space-md);
+  font-family: var(--md-sys-typescale-body-font);
+  font-size: 1rem;
+  color: var(--md-sys-color-on-surface);
+  background-color: var(--md-sys-color-surface-container);
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: var(--radius-md);
+  transition: 
+    border-color var(--transition-fast),
+    box-shadow var(--transition-fast),
+    background-color var(--transition-fast);
+}
+
+.input::placeholder {
+  color: var(--md-sys-color-outline);
+}
+
+.input:hover {
+  border-color: var(--md-sys-color-outline);
+  background-color: var(--md-sys-color-surface-container-high);
+}
+
+.input:focus {
+  outline: none;
+  border-color: var(--md-sys-color-primary);
+  box-shadow: 0 0 0 3px rgba(127, 217, 152, 0.15);
+}
+
+.textarea {
+  min-height: 150px;
+  resize: vertical;
+}
+
+.hasError .input {
+  border-color: var(--md-sys-color-error);
+}
+
+.hasError .input:focus {
+  box-shadow: 0 0 0 3px rgba(255, 180, 171, 0.15);
+}
+
+.error {
+  font-size: 0.8125rem;
+  color: var(--md-sys-color-error);
+}

src/components/ui/Input.tsx

@@ -0,0 +1,58 @@
+import { type InputHTMLAttributes, type TextareaHTMLAttributes, forwardRef } from 'react';
+import styles from './Input.module.css';
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label: string;
+  error?: string;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ label, error, id, className, ...props }, ref) => {
+    const inputId = id || label.toLowerCase().replace(/\s+/g, '-');
+    
+    return (
+      <div className={`${styles.field} ${error ? styles.hasError : ''} ${className || ''}`}>
+        <label htmlFor={inputId} className={styles.label}>
+          {label}
+        </label>
+        <input
+          ref={ref}
+          id={inputId}
+          className={styles.input}
+          {...props}
+        />
+        {error && <span className={styles.error}>{error}</span>}
+      </div>
+    );
+  }
+);
+
+Input.displayName = 'Input';
+
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label: string;
+  error?: string;
+}
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ label, error, id, className, ...props }, ref) => {
+    const inputId = id || label.toLowerCase().replace(/\s+/g, '-');
+    
+    return (
+      <div className={`${styles.field} ${error ? styles.hasError : ''} ${className || ''}`}>
+        <label htmlFor={inputId} className={styles.label}>
+          {label}
+        </label>
+        <textarea
+          ref={ref}
+          id={inputId}
+          className={`${styles.input} ${styles.textarea}`}
+          {...props}
+        />
+        {error && <span className={styles.error}>{error}</span>}
+      </div>
+    );
+  }
+);
+
+Textarea.displayName = 'Textarea';

src/components/ui/index.ts

@@ -0,0 +1,3 @@
+export { Button } from './Button';
+export { Card } from './Card';
+export { Input, Textarea } from './Input';