Merge pull request #3 from MatissJurevics/cursor/hero-title-mobile-size-6292

Hero title mobile size

.dockerignore

@@ -0,0 +1,8 @@
+node_modules
+dist
+.git
+.gitignore
+*.log
+docker-compose.yml
+Dockerfile
+.dockerignore

Dockerfile

@@ -0,0 +1,19 @@
+# Stage 1: Build
+FROM oven/bun:1 AS builder
+
+WORKDIR /app
+
+COPY package.json package-lock.json ./
+RUN bun install
+
+COPY . .
+RUN bun run build
+
+# Stage 2: Serve
+FROM nginx:alpine
+
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

src/App.jsx

@@ -4,7 +4,8 @@ import HeroModel from './canvas/HeroModel';
 import ProductGrid from './components/ProductGrid';
 import InfoTabs from './components/InfoTabs';
 import Footer from './components/Footer';
-import './styles/index.css';
+import './index.css';
+import './styles/variables.css';
 import gsap from 'gsap';
 import { ScrollTrigger } from 'gsap/ScrollTrigger';
 import Lenis from '@studio-freight/lenis'
@@ -83,7 +84,7 @@ function App() {
             zIndex: 10,
             pointerEvents: 'none',
             textAlign: 'center',
-            color: '#000' // Solid black text to sit on top of wireframe
+            color: 'var(--text-main, #000)' // Adapts to dark mode
           }}>
             <div style={{ overflow: 'hidden' }}>
               <h1 className="hero-title" style={{

src/canvas/Globe.jsx

@@ -19,6 +19,12 @@ const GlobeMesh = () => {
     const groupRef = useRef();
     const [bordersTexture, setBordersTexture] = useState(null);
 
+    // Detect mobile device and reduce polygon count accordingly
+    const isMobile = useMemo(() => {
+        return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || 
+               (window.innerWidth <= 768);
+    }, []);
+
     // Generate Borders Texture using D3
     useEffect(() => {
         const generateTexture = async () => {
@@ -69,17 +75,23 @@ const GlobeMesh = () => {
         }
     });
 
+    // Reduce segment counts for mobile devices
+    const baseSphereSegments = isMobile ? 24 : 64; // Reduce from 64x64 to 24x24 on mobile
+    const wireframeSegments = isMobile ? 16 : 32; // Reduce from 32x32 to 16x16 on mobile
+    const markerSegments = isMobile ? 8 : 16; // Reduce from 16x16 to 8x8 on mobile
+    const ringSegments = isMobile ? 16 : 32; // Reduce from 32 to 16 on mobile
+
     return (
         <group ref={groupRef}>
             {/* 1. Base Dark Sphere (blocks background stars/wireframe from showing through backface) */}
             <mesh>
-                <sphereGeometry args={[1.95, 64, 64]} />
+                <sphereGeometry args={[1.95, baseSphereSegments, baseSphereSegments]} />
                 <meshBasicMaterial color="#000000" />
             </mesh>
 
             {/* 2. Light Wireframe Sphere - Outer Cage */}
             <mesh>
-                <sphereGeometry args={[2.0, 32, 32]} />
+                <sphereGeometry args={[2.0, wireframeSegments, wireframeSegments]} />
                 <meshBasicMaterial
                     color="#444"
                     wireframe={true}
@@ -91,7 +103,7 @@ const GlobeMesh = () => {
             {/* 3. Borders Sphere (Texture) */}
             {bordersTexture && (
                 <mesh>
-                    <sphereGeometry args={[2.01, 64, 64]} />
+                    <sphereGeometry args={[2.01, baseSphereSegments, baseSphereSegments]} />
                     <meshBasicMaterial
                         map={bordersTexture}
                         transparent={true}
@@ -105,11 +117,11 @@ const GlobeMesh = () => {
 
             {/* Ireland Marker */}
             <mesh position={irelandPos}>
-                <sphereGeometry args={[0.04, 16, 16]} />
+                <sphereGeometry args={[0.04, markerSegments, markerSegments]} />
                 <meshBasicMaterial color="#ff4d00" />
             </mesh>
             <mesh position={irelandPos}>
-                <ringGeometry args={[0.06, 0.09, 32]} />
+                <ringGeometry args={[0.06, 0.09, ringSegments]} />
                 <meshBasicMaterial color="#ff4d00" side={THREE.DoubleSide} transparent opacity={0.6} />
             </mesh>
         </group>

src/canvas/HeroModel.jsx

@@ -8,8 +8,15 @@ const Terrain = () => {
     const materialRef = useRef();
     const noise3D = useMemo(() => createNoise3D(), []);
 
-    // Create geometry with HIGHER segment count for smoother, denser wave like the reference
+    // Detect mobile device and reduce polygon count accordingly
-    const geometry = useMemo(() => new THREE.PlaneGeometry(20, 20, 100, 100), []);
+    const isMobile = useMemo(() => {
+        return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || 
+               (window.innerWidth <= 768);
+    }, []);
+
+    // Create geometry with reduced segment count for mobile devices
+    const segments = isMobile ? 28 : 100; // Reduce from 100x100 to 28x28 on mobile (50% polygon reduction)
+    const geometry = useMemo(() => new THREE.PlaneGeometry(20, 20, segments, segments), [segments]);
 
     useFrame((state) => {
         if (mesh.current) {
@@ -52,6 +59,12 @@ const Terrain = () => {
 };
 
 const HeroModel = () => {
+    // Detect dark mode for fog color
+    const fogColor = useMemo(() => {
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        return prefersDark ? '#0a0a0a' : '#e4e4e4';
+    }, []);
+
     return (
         <div style={{ width: '100%', height: '100vh', position: 'absolute', top: 0, left: 0, zIndex: 0 }}>
             <Canvas
@@ -66,7 +79,7 @@ const HeroModel = () => {
                     <Terrain />
 
                     {/* Fog to fade edges into background color */}
-                    <fog attach="fog" args={['#e4e4e4', 5, 20]} />
+                    <fog attach="fog" args={[fogColor, 5, 20]} />
                 </Suspense>
             </Canvas>
         </div>

src/components/ActivityHeatmap.jsx

@@ -6,6 +6,7 @@ const ActivityHeatmap = () => {
     const [loading, setLoading] = useState(true);
     const [data, setData] = useState([]);
     const [error, setError] = useState(null);
+    const [hoveredData, setHoveredData] = useState(null);
 
     useEffect(() => {
         const fetchData = async () => {
@@ -181,18 +182,18 @@ const ActivityHeatmap = () => {
 
             // Draw Gitea Bar (Bottom)
             if (d.gitea > 0) {
-                drawBar(g, pos.x, pos.y, tileWidth, tileHeight, giteaH, colorGitea, `Gitea: ${d.gitea} on ${d.date.toDateString()}`);
+                drawBar(g, pos.x, pos.y, tileWidth, tileHeight, giteaH, colorGitea, `Gitea: ${d.gitea} on ${d.date.toDateString()}`, d);
             }
 
             // Draw GitHub Bar (Top)
             // Adjust y position up by gitea height
             if (d.github > 0) {
-                drawBar(g, pos.x, pos.y - giteaH, tileWidth, tileHeight, githubH, colorGithub, `GitHub: ${d.github} on ${d.date.toDateString()}`);
+                drawBar(g, pos.x, pos.y - giteaH, tileWidth, tileHeight, githubH, colorGithub, `GitHub: ${d.github} on ${d.date.toDateString()}`, d);
             }
         });
 
         // Function to draw isometric prism
-        function drawBar(container, x, y, w, h, z, color, tooltipText) {
+        function drawBar(container, x, y, w, h, z, color, tooltipText, dataItem) {
             // Top Face
             const pathTop = `M${x} ${y - z} 
                               L${x + w} ${y + h - z} 
@@ -226,11 +227,24 @@ const ActivityHeatmap = () => {
             group.append("title").text(tooltipText);
 
             // Hover effect
-            //  group.on("mouseenter", function() {
+            group.on("mouseenter", function (event) {
-            //      d3.select(this).selectAll("path").attr("opacity", 0.8);
+                d3.select(this).selectAll("path").attr("opacity", 0.8);
-            //  }).on("mouseleave", function() {
+                // Calculate position relative to container
-            //      d3.select(this).selectAll("path").attr("opacity", 1);
+                const [mx, my] = d3.pointer(event, svg.node());
-            //  });
+                setHoveredData({
+                    x: mx,
+                    y: my,
+                    date: d3.select(this).datum().date,
+                    github: d3.select(this).datum().github,
+                    gitea: d3.select(this).datum().gitea
+                });
+            }).on("mouseleave", function () {
+                d3.select(this).selectAll("path").attr("opacity", 1);
+                setHoveredData(null);
+            });
+
+            // Attach data to group for access in handler
+            group.datum(dataItem);
         }
 
     }, [data, loading]);
@@ -262,7 +276,8 @@ const ActivityHeatmap = () => {
             alignItems: 'center',
             justifyContent: 'center',
             padding: '0',
-            overflow: 'hidden'
+            overflow: 'visible', // Allow tooltip to render outside if needed
+            position: 'relative' // Anchor for absolute tooltip
         }}>
             <h2 className="uppercase" style={{ fontSize: '1.5rem', marginBottom: '10px', color: '#888' }}>
                 Contribution Topography
@@ -282,6 +297,31 @@ const ActivityHeatmap = () => {
                 preserveAspectRatio="xMidYMid meet"
                 style={{ width: '100%', height: 'auto', overflow: 'visible' }}
             />
+
+            {hoveredData && (
+                <div style={{
+                    position: 'absolute',
+                    left: hoveredData.x + 10, // Closer offset
+                    top: hoveredData.y - 30,
+                    background: 'rgba(0,0,0,0.9)',
+                    border: '1px solid #444',
+                    borderRadius: '4px',
+                    padding: '10px',
+                    pointerEvents: 'none',
+                    zIndex: 10,
+                    fontSize: '0.8rem',
+                    fontFamily: 'monospace',
+                    boxShadow: '0 4px 10px rgba(0,0,0,0.5)'
+                }}>
+                    <div style={{ fontWeight: 'bold', marginBottom: '5px', color: '#fff' }}>
+                        {hoveredData.date ? hoveredData.date.toDateString() : 'Date'}
+                    </div>
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
+                        <div style={{ color: '#2da44e' }}>GitHub: {hoveredData.github || 0}</div>
+                        <div style={{ color: '#ff4d00' }}>Gitea: {hoveredData.gitea || 0}</div>
+                    </div>
+                </div>
+            )}
         </section>
     );
 };

src/components/Footer.jsx

@@ -36,20 +36,20 @@ const Footer = () => {
                     <p style={{ marginBottom: '20px', color: '#888' }}>
                         Occasional updates on new projects and experiments.
                     </p>
-                    <div style={{ display: 'flex', borderBottom: '1px solid #333' }}>
+                    <form
+                        action="https://buttondown.com/api/emails/embed-subscribe/matiss"
+                        method="post"
+                        target="_blank"
+                        style={{ display: 'flex', borderBottom: '1px solid #333' }}
+                    >
                         <input
+                            className="footer-input"
                             type="email"
+                            name="email"
                             placeholder="email address"
-                            style={{
-                                background: 'transparent',
-                                border: 'none',
-                                color: '#fff',
-                                padding: '10px 0',
-                                flex: 1,
-                                outline: 'none'
-                            }}
                         />
-                        <button style={{
+                        <input type="hidden" value="1" name="embed" />
+                        <button type="submit" style={{
                             background: 'transparent',
                             border: 'none',
                             color: '#ff4d00',
@@ -59,7 +59,7 @@ const Footer = () => {
                         }}>
                             Subscribe
                         </button>
-                    </div>
+                    </form>
                 </div>
             </div>
 

src/components/ProductGrid.jsx

@@ -6,11 +6,12 @@ import '../styles/variables.css';
 
 gsap.registerPlugin(ScrollTrigger);
 
-const products = [
+
-    { id: 1, name: 'Portfolio V1', desc: 'Web Design', price: '2023' },
+
-    { id: 2, name: 'Neon Dreams', desc: 'WebGL Experience', price: '2024' },
+const REPO_LIST = [
-    { id: 3, name: 'Type Lab', desc: 'Typography Tool', price: '2024' },
+    'MatissJurevics/Gene-AI',
-    { id: 4, name: 'Audio Vis', desc: 'Sound Reactive', price: '2023' },
+    'MatissJurevics/movesync',
+    'MatissJurevics/script-server',
 ];
 
 const ProductGrid = () => {
@@ -18,8 +19,63 @@ const ProductGrid = () => {
     const titleRef = useRef(null);
     const itemRefs = useRef([]);
     const [selectedProject, setSelectedProject] = useState(null);
+    const [products, setProducts] = useState([]);
 
     useEffect(() => {
+        const fetchRepos = async () => {
+            const promises = REPO_LIST.map(async (repoName, index) => {
+                try {
+                    const res = await fetch(`https://api.github.com/repos/${repoName}`);
+                    if (!res.ok) throw new Error('Fetch failed');
+                    const data = await res.json();
+                    return {
+                        id: index + 1,
+                        name: data.name,
+                        desc: data.description || data.language || 'No description',
+                        price: `★ ${data.stargazers_count}`,
+                        language: data.language,
+                        url: data.html_url,
+                        raw: data
+                    };
+                } catch (e) {
+                    console.warn(`Failed to load ${repoName}`, e);
+                    // Fallback or skip
+                    return {
+                        id: index + 1,
+                        name: repoName.split('/')[1],
+                        desc: 'Loading Error',
+                        price: 'NT',
+                        url: '#'
+                    };
+                }
+            });
+
+            const results = await Promise.all(promises);
+
+            // Add Manual Gumroad Project
+            const manualProject = {
+                id: 'wireframe', // unique string ID to avoid collision
+                name: 'Wireframe UI Kit',
+                desc: 'Web Design Resource',
+                price: '$29',
+                url: 'https://saetom.gumroad.com/l/WireframeUIKit',
+                image: '/images/wireframe_kit.png',
+                details: `
+                    A comprehensive Wireframe UI Kit designed to speed up your prototyping workflow.
+                    Includes over 100+ customizable components, varying layouts, and responsive patterns.
+                    Perfect for designers and developers looking to create high-fidelity wireframes quickly.
+                `
+            };
+
+            setProducts([manualProject, ...results]);
+        };
+
+        fetchRepos();
+    }, []);
+
+    useEffect(() => {
+        if (!products.length) return; // Wait for data
+
         const ctx = gsap.context(() => {
             // Animate Title
             gsap.from(titleRef.current, {
@@ -52,46 +108,52 @@ const ProductGrid = () => {
         }, gridRef);
 
         return () => ctx.revert();
-    }, []);
+    }, [products]);
 
     const onEnter = ({ currentTarget }) => {
-        gsap.to(currentTarget, { backgroundColor: '#fff', scale: 0.98, duration: 0.3 });
+        const computedStyle = getComputedStyle(document.documentElement);
+        const hoverBg = computedStyle.getPropertyValue('--product-bg-hover').trim() || '#fff';
+        const gridLine = computedStyle.getPropertyValue('--grid-line').trim() || '#ccc';
+        gsap.to(currentTarget, { backgroundColor: hoverBg, scale: 0.98, duration: 0.3 });
         gsap.to(currentTarget.querySelector('.product-img'), { scale: 1.1, duration: 0.3 });
         gsap.to(currentTarget.querySelector('.indicator'), { backgroundColor: '#ff4d00', scale: 1.5, duration: 0.3 });
     };
 
     const onLeave = ({ currentTarget }) => {
-        gsap.to(currentTarget, { backgroundColor: '#f5f5f5', scale: 1, duration: 0.3 });
+        const computedStyle = getComputedStyle(document.documentElement);
+        const productBg = computedStyle.getPropertyValue('--product-bg').trim() || '#f5f5f5';
+        const gridLine = computedStyle.getPropertyValue('--grid-line').trim() || '#ccc';
+        gsap.to(currentTarget, { backgroundColor: productBg, scale: 1, duration: 0.3 });
         gsap.to(currentTarget.querySelector('.product-img'), { scale: 1, duration: 0.3 });
-        gsap.to(currentTarget.querySelector('.indicator'), { backgroundColor: '#ccc', scale: 1, duration: 0.3 });
+        gsap.to(currentTarget.querySelector('.indicator'), { backgroundColor: gridLine, scale: 1, duration: 0.3 });
     };
 
     return (
         <>
             <section id="work" ref={gridRef} style={{
                 padding: '100px 20px',
-                background: '#fff',
+                background: 'var(--bg-color, #fff)',
                 minHeight: '100vh'
             }}>
                 <div style={{ maxWidth: '1400px', margin: '0 auto' }}>
                     <div style={{
                         marginBottom: '60px',
-                        borderBottom: '1px solid #000',
+                        borderBottom: '1px solid var(--text-main, #000)',
                         paddingBottom: '20px',
                         display: 'flex',
                         justifyContent: 'space-between',
                         alignItems: 'baseline'
                     }} ref={titleRef}>
-                        <h2 className="uppercase" style={{ fontSize: '2rem', margin: 0 }}>Selected Work</h2>
+                        <h2 className="uppercase" style={{ fontSize: '2rem', margin: 0, color: 'var(--text-main, #000)' }}>Selected Work</h2>
-                        <span className="mono" style={{ fontSize: '0.9rem', color: '#666' }}>DESIGN / CODE</span>
+                        <span className="mono" style={{ fontSize: '0.9rem', color: 'var(--text-dim, #666)' }}>DESIGN / CODE</span>
                     </div>
 
                     <div style={{
                         display: 'grid',
                         gridTemplateColumns: 'repeat(auto-fill, minmax(350px, 1fr))',
                         gap: '2px', // Tight gap for grid lines effect
-                        background: '#ccc', // Color of grid lines
+                        background: 'var(--grid-line, #ccc)', // Color of grid lines
-                        border: '1px solid #ccc'
+                        border: '1px solid var(--grid-line, #ccc)'
                     }}>
                         {products.map((p, i) => (
                             <div
@@ -99,7 +161,7 @@ const ProductGrid = () => {
                                 ref={el => itemRefs.current[i] = el}
                                 className="product-item"
                                 style={{
-                                    background: '#f5f5f5',
+                                    background: 'var(--product-bg, #f5f5f5)',
                                     height: '450px',
                                     padding: '30px',
                                     display: 'flex',
@@ -114,33 +176,43 @@ const ProductGrid = () => {
                                 onClick={() => setSelectedProject(p)}
                             >
                                 <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%', zIndex: 2 }}>
-                                    <span className="mono" style={{ fontSize: '0.8rem', color: '#ff4d00' }}>0{p.id}</span>
+                                    <span className="mono" style={{ fontSize: '0.8rem', color: '#ff4d00' }}>
+                                        {typeof p.id === 'number' ? `0${p.id}` : 'NEW'}
+                                    </span>
                                     <div className="indicator" style={{
                                         width: '8px',
                                         height: '8px',
-                                        background: '#ccc',
+                                        background: 'var(--grid-line, #ccc)',
                                         borderRadius: '50%'
                                     }}></div>
                                 </div>
 
-                                {/* Placeholder for Product Image */}
+                                {/* Product Image or Placeholder */}
                                 <div className="product-img" style={{
                                     flex: 1,
                                     display: 'flex',
                                     alignItems: 'center',
                                     justifyContent: 'center',
-                                    fontSize: '5rem',
+                                    fontSize: '3rem',
-                                    color: '#e0e0e0',
+                                    color: 'var(--text-dim, #e0e0e0)',
                                     fontWeight: 800,
-                                    userSelect: 'none'
+                                    userSelect: 'none',
+                                    textAlign: 'center',
+                                    wordBreak: 'break-word',
+                                    lineHeight: 1.2,
+                                    overflow: 'hidden'
                                 }}>
-                                    MJ
+                                    {p.image ? (
+                                        <img src={p.image} alt={p.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+                                    ) : (
+                                        p.name.substring(0, 10)
+                                    )}
                                 </div>
 
                                 <div style={{ zIndex: 2 }}>
-                                    <h3 style={{ fontSize: '1.5rem', marginBottom: '5px' }}>{p.name}</h3>
+                                    <h3 style={{ fontSize: '1.5rem', marginBottom: '5px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', color: 'var(--text-main, #000)' }}>{p.name}</h3>
-                                    <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.9rem', color: '#666' }}>
+                                    <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.9rem', color: 'var(--text-dim, #666)' }}>
-                                        <span>{p.desc}</span>
+                                        <span style={{ maxWidth: '70%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.desc}</span>
                                         <span>{p.price}</span>
                                     </div>
                                 </div>

src/components/ProjectModal.jsx

@@ -102,9 +102,16 @@ const ProjectModal = ({ project, onClose }) => {
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'center',
-                        borderRight: '1px solid #ccc'
+                        borderRight: '1px solid #ccc',
+                        overflow: 'hidden'
                     }}>
-                        <h1 style={{ fontSize: '8vw', color: '#f0f0f0', fontWeight: '900' }}>MJ</h1>
+                        {project.image ? (
+                            <img src={project.image} alt={project.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+                        ) : (
+                            <h1 style={{ fontSize: '8vw', color: '#f0f0f0', fontWeight: '900' }}>
+                                {project.name ? project.name.substring(0, 2).toUpperCase() : 'MJ'}
+                            </h1>
+                        )}
                     </div>
 
                     {/* Right: Info */}
@@ -118,23 +125,18 @@ const ProjectModal = ({ project, onClose }) => {
                     }}>
                         <div>
                             <span className="mono" style={{ color: '#ff4d00', marginBottom: '10px', display: 'block' }}>
-                                {project.price} {/* Using 'price' for Year based on previous data struct */}
+                                {project.price}
                             </span>
                             <h2 className="uppercase" style={{ fontSize: '3rem', lineHeight: 1, marginBottom: '20px' }}>
                                 {project.name}
                             </h2>
                             <p style={{ fontSize: '1.1rem', color: '#444', marginBottom: '40px', lineHeight: 1.6 }}>
-                                This is a detailed description of the {project.name} project.
+                                {project.details || project.desc || "No details available."}
-                                It explores the intersection of design and technology,
-                                focusing on user experience and visual impact.
                             </p>
 
                             <div className="mono" style={{ fontSize: '0.9rem', color: '#666' }}>
-                                <h4 style={{ color: '#000', marginBottom: '10px' }}>Role</h4>
+                                <h4 style={{ color: '#000', marginBottom: '10px' }}>Type</h4>
-                                <p>Design, Development</p>
+                                <p>{project.language || 'Design / Resource'}</p>
-                                <br />
-                                <h4 style={{ color: '#000', marginBottom: '10px' }}>Tech Stack</h4>
-                                <p>React, Three.js, GSAP</p>
                             </div>
                         </div>
 
@@ -152,6 +154,7 @@ const ProjectModal = ({ project, onClose }) => {
                         }}
                             onMouseEnter={(e) => e.target.style.background = '#ff4d00'}
                             onMouseLeave={(e) => e.target.style.background = '#000'}
+                            onClick={() => window.open(project.url, '_blank')}
                         >
                             View Live
                         </button>

src/index.css

@@ -25,8 +25,6 @@ a:hover {
 
 body {
   margin: 0;
-  display: flex;
-  place-items: center;
   min-width: 320px;
   min-height: 100vh;
 }
@@ -36,6 +34,48 @@ h1 {
   line-height: 1.1;
 }
 
+/* Footer Input */
+.footer-input {
+  background: transparent;
+  border: none;
+  color: #fff;
+  padding: 5px 0;
+  font-size: 0.9rem;
+  flex: 1;
+  outline: none;
+  transition: all 0.3s ease;
+}
+
+.footer-input:focus {
+  border-bottom: 1px solid #ff4d00;
+}
+
+.footer-input::placeholder {
+  color: #666;
+  transition: color 0.3s ease;
+}
+
+.footer-input:focus::placeholder {
+  color: #888;
+}
+
+/* Footer Links */
+footer ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+footer a {
+  color: #888;
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+
+footer a:hover {
+  color: #ff4d00;
+}
+
 button {
   border-radius: 8px;
   border: 1px solid transparent;
@@ -71,3 +111,16 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+
+/* Hero Title Mobile Responsive */
+@media (max-width: 768px) {
+  .hero-title {
+    font-size: 3rem !important;
+  }
+}
+
+@media (max-width: 480px) {
+  .hero-title {
+    font-size: 2rem !important;
+  }
+}

src/main.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.jsx'
-import './styles/index.css'
+import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>

src/styles/index.css

@@ -1,54 +0,0 @@
-@import './variables.css';
-
-* {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-body {
-    background-color: var(--bg-color);
-    color: var(--text-main);
-    font-family: var(--font-main);
-    font-size: 14px;
-    line-height: 1.5;
-    overflow-x: hidden;
-    /* Hide scrollbar potentially */
-}
-
-a {
-    color: inherit;
-    text-decoration: none;
-}
-
-ul {
-    list-style: none;
-}
-
-/* Utilities */
-.uppercase {
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-}
-
-.mono {
-    font-family: monospace;
-}
-
-canvas {
-    touch-action: none;
-}
-
-/* Utility to hide scrollbar */
-.hide-scrollbar {
-    -ms-overflow-style: none !important;
-    /* IE and Edge */
-    scrollbar-width: none !important;
-    /* Firefox */
-}
-
-.hide-scrollbar::-webkit-scrollbar {
-    display: none !important;
-}

src/styles/variables.css

@@ -1,10 +1,12 @@
 :root {
-  /* Teenage Engineering Palette */
+  /* Teenage Engineering Palette - Dark mode default */
-  --bg-color: #e4e4e4;
+  --bg-color: #0a0a0a;
-  --text-main: #000000;
+  --text-main: #e4e4e4;
-  --text-dim: #666666;
+  --text-dim: #888888;
   --accent-orange: #ff4d00;
-  --grid-line: #cccccc;
+  --grid-line: #333333;
+  --product-bg: #1a1a1a;
+  --product-bg-hover: #2a2a2a;
   
   /* Typos */
   --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
@@ -13,3 +15,15 @@
   /* Layout */
   --header-height: 60px;
 }
+
+@media (prefers-color-scheme: light) {
+  :root {
+    /* Light mode overrides */
+    --bg-color: #e4e4e4;
+    --text-main: #000000;
+    --text-dim: #666666;
+    --grid-line: #cccccc;
+    --product-bg: #f5f5f5;
+    --product-bg-hover: #ffffff;
+  }
+}