first pass

package.json

@@ -16,7 +16,7 @@
     "framer-motion": "^11.13.5",
     "motion": "^11.13.5",
     "next": "15.0.4",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "react-dom": "^18.2.0",
     "three": "^0.171.0"
   },

src/components/robot/robotRenderer.tsx

@@ -4,6 +4,8 @@ import React, { useEffect, useRef } from "react";
 import * as THREE from "three";
 import URDFLoader from "urdf-loader";
 
+const URDF_URL = "/cad/gpr-20241204.urdf";
+
 const RobotRenderer: React.FC = () => {
   const mountRef = useRef<HTMLDivElement | null>(null);
 
@@ -17,16 +19,24 @@ const RobotRenderer: React.FC = () => {
     );
     const renderer = new THREE.WebGLRenderer();
     renderer.setSize(window.innerWidth, window.innerHeight);
+    renderer.setPixelRatio(window.devicePixelRatio);
 
     if (mountRef.current) {
       mountRef.current.appendChild(renderer.domElement);
     }
 
     const loader = new URDFLoader();
-    loader.load("/cad/gpr-20241204.urdf", (robot: THREE.Object3D) => {
+    loader.load(URDF_URL, (robot: THREE.Object3D) => {
       scene.add(robot);
     });
 
+    const light = new THREE.AmbientLight(0x404040);
+    scene.add(light);
+
+    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
+    directionalLight.position.set(1, 1, 1).normalize();
+    scene.add(directionalLight);
+
     camera.position.z = 5;
 
     const animate = () => {
@@ -36,14 +46,23 @@ const RobotRenderer: React.FC = () => {
 
     animate();
 
+    const handleResize = () => {
+      camera.aspect = window.innerWidth / window.innerHeight;
+      camera.updateProjectionMatrix();
+      renderer.setSize(window.innerWidth, window.innerHeight);
+    };
+
+    window.addEventListener("resize", handleResize);
+
     return () => {
       if (mountRef.current) {
         mountRef.current.removeChild(renderer.domElement);
       }
+      window.removeEventListener("resize", handleResize);
     };
   }, []);
 
-  return <div ref={mountRef} />;
+  return <div ref={mountRef} className="w-full h-full" />;
 };
 
 export default RobotRenderer;

src/pages/index.tsx

@@ -5,8 +5,8 @@ import RobotRenderer from "@/components/robot/robotRenderer";
 
 const HeaderSection = () => {
   return (
-    <section className="pt-16 bg-black text-white">
-      <div className="flex flex-col items-center text-center pt-10">
+    <section className="pt-16">
+      <div className="flex flex-col items-center text-center pt-10 px-4 max-w-full">
         <h1 className="text-5xl mt-16">
           The world&apos;s first humanoid robot for those who prefer transparency over trust.
         </h1>
@@ -21,25 +21,25 @@ const HeaderSection = () => {
 
 const RobotSection = () => {
   return (
-    <div className="flex flex-col items-center text-center pt-10">
+    <div className="flex flex-col items-center text-center pt-10 max-w-full aspect-square border-2 rounded-lg my-8">
       <RobotRenderer />
     </div>
   );
 };
 
 const BuyNowSection = () => {
   return (
-    <div className="flex flex-col items-center text-center pt-10">
+    <div className="flex flex-col items-center text-center pt-10 max-w-full">
       <CTAButton />
     </div>
   );
 };
 
 export default function Home() {
   return (
-    <div className="min-h-screen flex flex-col bg-black text-white">
+    <div className="min-h-screen flex flex-col">
       <NavBar />
-      <main className="flex-grow p-8 max-w-7xl mx-auto">
+      <main className="flex-grow p-8 max-w-7xl mx-auto px-4 w-full">
         <HeaderSection />
         <RobotSection />
         <BuyNowSection />

src/styles/globals.css

@@ -120,16 +120,3 @@ pre {
   @apply font-normal;
   font-style: normal;
 }
-
-.scroll-lock {
-  overflow: hidden;
-  height: 100vh; /* Prevents resizing quirks */
-}
-
-::-webkit-scrollbar-thumb {
-  display: none;
-}
-
-::-webkit-scrollbar {
-  display: none;
-}