import React, { useState, useEffect, useRef } from 'react'; import { ArrowRight, Menu, X, ArrowUpRight } from 'lucide-react'; // --- Custom Hook for Intersection Observer (Scroll Animations) --- const useOnScreen = (options) => { const ref = useRef(null); const [isVisible, setIsVisible] = useState(false); useEffect(() => { const observer = new IntersectionObserver(([entry]) => { if (entry.isIntersecting) { setIsVisible(true); observer.disconnect(); // Trigger only once } }, options); if (ref.current) { observer.observe(ref.current); } return () => { if (ref.current) observer.unobserve(ref.current); }; }, [ref, options]); return [ref, isVisible]; }; // --- Components --- const Navbar = () => { const [isScrolled, setIsScrolled] = useState(false); const [isOpen, setIsOpen] = useState(false); useEffect(() => { const handleScroll = () => { setIsScrolled(window.scrollY > 50); }; window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, []); return ( ); }; const Hero = () => { const [mousePos, setMousePos] = useState({ x: 0, y: 0 }); useEffect(() => { const handleMouseMove = (e) => { setMousePos({ x: (e.clientX / window.innerWidth - 0.5) * 20, // -10 to 10 y: (e.clientY / window.innerHeight - 0.5) * 20, }); }; window.addEventListener('mousemove', handleMouseMove); return () => window.removeEventListener('mousemove', handleMouseMove); }, []); return (
{/* Dynamic Background Glow */}
{/* Grain Overlay */}

Beyond the Visual

Silent
Impact

); }; const FadeSection = ({ children, className = "" }) => { const [ref, isVisible] = useOnScreen({ threshold: 0.1 }); return (
{children}
); }; const ProjectCard = ({ number, title, category, align = "left" }) => { const [isHovered, setIsHovered] = useState(false); return (
setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} >
0{number}

{title}

{category}
{/* Subtle Glow on Hover */}
); }; const Content = () => { return (
{/* Description Section */}

The Philosophy

True impact does not scream; it resonates. We create digital experiences that linger in the mind like a haunting melody. By stripping away the noise, we reveal the essential core.

{/* Works Section */}

Selected Works
{/* Image Grid / Moodboard */}
{[1,2,3,4].map((i) => (
{/* Placeholder for Images - Using CSS gradients for abstract art feel */}
))}
{/* Footer */}
); }; const App = () => { return (
{/* Fixed: Removed 'jsx' and 'global' attributes to prevent console warnings */}
); }; export default App;