feat: Implement hero text and model fade-in animations, and update site navigation and footer content.

src/App.jsx

@@ -14,6 +14,7 @@ function App() {
   const lenisRef = useRef()
 
   useEffect(() => {
+    // Lenis setup
     const lenis = new Lenis({
       duration: 1.2,
       easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
@@ -34,8 +35,28 @@ function App() {
 
     requestAnimationFrame(raf)
 
+    // Hero Text Animation
+    const ctx = gsap.context(() => {
+      const tl = gsap.timeline();
+      tl.from(".hero-title", {
+        y: 100,
+        opacity: 0,
+        duration: 1.5,
+        ease: "power4.out",
+        delay: 0.5
+      })
+        .from(".hero-subtitle", {
+          y: 20,
+          opacity: 0,
+          duration: 1,
+          ease: "power3.out"
+        }, "-=1");
+
+    });
+
     return () => {
       lenis.destroy()
+      ctx.revert();
     }
   }, [])
 
@@ -64,16 +85,19 @@ function App() {
             mixBlendMode: 'difference', // Ensure text pops against wireframe
             color: '#fff'
           }}>
-            <h1 style={{
-              fontSize: '8rem',
-              fontWeight: '900',
-              lineHeight: '0.8',
-              letterSpacing: '-0.05em',
-              textTransform: 'uppercase'
-            }}>
-              Matiss <br /> Jurevics
-            </h1>
-            <p style={{
+            <div style={{ overflow: 'hidden' }}>
+              <h1 className="hero-title" style={{
+                fontSize: '8rem',
+                fontWeight: '900',
+                lineHeight: '0.8',
+                zIndex: 10,
+                letterSpacing: '-0.05em',
+                textTransform: 'uppercase'
+              }}>
+                Matiss <br /> Jurevics
+              </h1>
+            </div>
+            <p className="hero-subtitle" style={{
               marginTop: '30px',
               fontSize: '1.2rem',
               fontFamily: 'monospace',

src/canvas/HeroModel.jsx

@@ -5,6 +5,7 @@ import * as THREE from 'three';
 
 const Terrain = () => {
     const mesh = useRef();
+    const materialRef = useRef();
     const noise3D = useMemo(() => createNoise3D(), []);
 
     // Create geometry with HIGHER segment count for smoother, denser wave like the reference
@@ -27,16 +28,24 @@ const Terrain = () => {
             // Slight rotation
             mesh.current.rotation.x = -Math.PI / 2.5;
             mesh.current.rotation.z += 0.0005;
+
+            // Entrance animation logic (simple lerp for opacity)
+            // We start opacity at 0 in the material and lerp to 0.15
+            // Ideally use a spring or GSAP, but lerp is cheap and easy here
+            if (materialRef.current) {
+                materialRef.current.opacity = THREE.MathUtils.lerp(materialRef.current.opacity, 0.15, 0.02);
+            }
         }
     });
 
     return (
         <mesh ref={mesh} geometry={geometry}>
             <meshBasicMaterial
+                ref={materialRef}
                 color="#000000"
                 wireframe={true}
                 transparent={true}
-                opacity={0.15}
+                opacity={0} // Start invisible for animation
             />
         </mesh>
     );

src/components/Footer.jsx

@@ -16,39 +16,26 @@ const Footer = () => {
                 gap: '40px'
             }}>
                 <div>
-                    <h4 className="uppercase" style={{ marginBottom: '20px', color: '#666' }}>Products</h4>
+                    <h4 className="uppercase" style={{ marginBottom: '20px', color: '#666' }}>Socials</h4>
                     <ul style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
-                        <li><a href="#">OP-1 Field</a></li>
-                        <li><a href="#">TX-6</a></li>
-                        <li><a href="#">OP-Z</a></li>
-                        <li><a href="#">Pocket Operators</a></li>
-                        <li><a href="#">OD-11</a></li>
+                        <li><a href="#">Instagram</a></li>
+                        <li><a href="#">Twitter / X</a></li>
+                        <li><a href="#">LinkedIn</a></li>
+                        <li><a href="#">GitHub</a></li>
                     </ul>
                 </div>
 
                 <div>
-                    <h4 className="uppercase" style={{ marginBottom: '20px', color: '#666' }}>Support</h4>
+                    <h4 className="uppercase" style={{ marginBottom: '20px', color: '#666' }}>Contact</h4>
                     <ul style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
-                        <li><a href="#">Downloads</a></li>
-                        <li><a href="#">Guides</a></li>
-                        <li><a href="#">Warranty</a></li>
-                        <li><a href="#">Contact</a></li>
-                    </ul>
-                </div>
-
-                <div>
-                    <h4 className="uppercase" style={{ marginBottom: '20px', color: '#666' }}>Company</h4>
-                    <ul style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
-                        <li><a href="#">About</a></li>
-                        <li><a href="#">Press</a></li>
-                        <li><a href="#">Careers</a></li>
+                        <li><a href="mailto:im@mati.ss">im@mati.ss</a></li>
                     </ul>
                 </div>
 
                 <div style={{ minWidth: '300px' }}>
-                    <h4 className="uppercase" style={{ marginBottom: '20px', color: '#ff4d00' }}>Newsletter</h4>
+                    <h4 className="uppercase" style={{ marginBottom: '20px', color: '#ff4d00' }}>Stay Updated</h4>
                     <p style={{ marginBottom: '20px', color: '#888' }}>
-                        Sign up for the latest news, product releases, and exclusive offers.
+                        Occasional updates on new projects and experiments.
                     </p>
                     <div style={{ display: 'flex', borderBottom: '1px solid #333' }}>
                         <input
@@ -87,7 +74,7 @@ const Footer = () => {
                 alignItems: 'center',
                 color: '#444'
             }}>
-                <div className="uppercase" style={{ fontSize: '1.2rem', fontWeight: 'bold' }}>Teenage Engineering</div>
+                <div className="uppercase" style={{ fontSize: '1.2rem', fontWeight: 'bold' }}>Matiss Jurevics</div>
                 <div className="mono" style={{ fontSize: '0.8rem' }}>© 2024</div>
             </div>
         </footer>

src/components/Header.jsx

@@ -37,9 +37,6 @@ const Header = () => {
                 <a href="#contact">Contact</a>
             </nav>
 
-            <div className="cart">
-                Cart (0)
-            </div>
         </header>
     );
 };