diff --git a/app/components/HeroWorkspace3D.tsx b/app/components/HeroWorkspace3D.tsx
new file mode 100644
index 0000000..0d9f2fd
--- /dev/null
+++ b/app/components/HeroWorkspace3D.tsx
@@ -0,0 +1,236 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import * as THREE from "three";
+
+export default function HeroWorkspace3D() {
+  const mountRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const mount = mountRef.current;
+    if (!mount) return;
+
+    const scene = new THREE.Scene();
+    scene.fog = new THREE.Fog(0x10131f, 8, 24);
+
+    const camera = new THREE.PerspectiveCamera(42, 1, 0.1, 100);
+    camera.position.set(0, 2.4, 9.2);
+
+    const renderer = new THREE.WebGLRenderer({
+      antialias: true,
+      alpha: true,
+      preserveDrawingBuffer: true,
+      powerPreference: "high-performance",
+    });
+    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+    renderer.setClearColor(0x000000, 0);
+    mount.appendChild(renderer.domElement);
+
+    const group = new THREE.Group();
+    scene.add(group);
+
+    const ambient = new THREE.AmbientLight(0xffffff, 1.25);
+    scene.add(ambient);
+
+    const key = new THREE.DirectionalLight(0xffffff, 2.4);
+    key.position.set(4, 8, 6);
+    scene.add(key);
+
+    const teal = new THREE.PointLight(0x2dd4bf, 3.2, 16);
+    teal.position.set(-4, 2, 5);
+    scene.add(teal);
+
+    const coral = new THREE.PointLight(0xfb7185, 2.8, 15);
+    coral.position.set(4, 1.5, 3);
+    scene.add(coral);
+
+    const yellow = new THREE.PointLight(0xfacc15, 1.6, 10);
+    yellow.position.set(0, 3.2, 1.5);
+    scene.add(yellow);
+
+    const matDesk = new THREE.MeshStandardMaterial({
+      color: 0x202638,
+      roughness: 0.62,
+      metalness: 0.14,
+    });
+    const matDark = new THREE.MeshStandardMaterial({
+      color: 0x0f172a,
+      roughness: 0.45,
+      metalness: 0.35,
+    });
+    const matScreen = new THREE.MeshStandardMaterial({
+      color: 0x07111f,
+      emissive: 0x123f4c,
+      emissiveIntensity: 0.7,
+      roughness: 0.25,
+    });
+    const matTeal = new THREE.MeshStandardMaterial({
+      color: 0x2dd4bf,
+      emissive: 0x0f766e,
+      emissiveIntensity: 1.2,
+      roughness: 0.3,
+    });
+    const matCoral = new THREE.MeshStandardMaterial({
+      color: 0xfb7185,
+      emissive: 0xbe123c,
+      emissiveIntensity: 0.75,
+      roughness: 0.34,
+    });
+    const matYellow = new THREE.MeshStandardMaterial({
+      color: 0xfacc15,
+      emissive: 0xa16207,
+      emissiveIntensity: 0.55,
+      roughness: 0.38,
+    });
+    const matGlass = new THREE.MeshPhysicalMaterial({
+      color: 0xe2e8f0,
+      transparent: true,
+      opacity: 0.18,
+      roughness: 0.18,
+      metalness: 0.05,
+      transmission: 0.2,
+    });
+
+    const desk = new THREE.Mesh(new THREE.BoxGeometry(7.8, 0.22, 3.6), matDesk);
+    desk.position.set(0, -1.25, -0.35);
+    group.add(desk);
+
+    const monitor = new THREE.Mesh(new THREE.BoxGeometry(4.3, 2.55, 0.16), matDark);
+    monitor.position.set(0, 0.42, -0.55);
+    group.add(monitor);
+
+    const screen = new THREE.Mesh(new THREE.BoxGeometry(3.9, 2.15, 0.06), matScreen);
+    screen.position.set(0, 0.42, -0.44);
+    group.add(screen);
+
+    const stand = new THREE.Mesh(new THREE.BoxGeometry(0.36, 1.1, 0.28), matDark);
+    stand.position.set(0, -0.85, -0.55);
+    group.add(stand);
+
+    const base = new THREE.Mesh(new THREE.BoxGeometry(1.65, 0.18, 0.9), matDark);
+    base.position.set(0, -1.33, -0.2);
+    group.add(base);
+
+    const laptop = new THREE.Group();
+    const laptopBase = new THREE.Mesh(new THREE.BoxGeometry(2.25, 0.12, 1.4), matDark);
+    const laptopScreen = new THREE.Mesh(new THREE.BoxGeometry(2.1, 1.25, 0.08), matScreen);
+    laptopBase.position.set(0, -0.05, 0);
+    laptopScreen.position.set(0, 0.62, -0.64);
+    laptopScreen.rotation.x = -0.24;
+    laptop.add(laptopBase, laptopScreen);
+    laptop.position.set(2.55, -1.06, 0.78);
+    laptop.rotation.y = -0.5;
+    group.add(laptop);
+
+    const lineMaterial = new THREE.LineBasicMaterial({
+      color: 0x67e8f9,
+      transparent: true,
+      opacity: 0.74,
+    });
+
+    for (let row = 0; row < 8; row += 1) {
+      const width = row % 3 === 0 ? 2.5 : row % 2 === 0 ? 1.75 : 2.15;
+      const y = 1.22 - row * 0.24;
+      const geometry = new THREE.BufferGeometry().setFromPoints([
+        new THREE.Vector3(-1.7, y, -0.38),
+        new THREE.Vector3(-1.7 + width, y, -0.38),
+      ]);
+      const line = new THREE.Line(geometry, lineMaterial);
+      group.add(line);
+    }
+
+    const chips = [
+      { x: -3.3, y: 1.6, z: -0.9, m: matTeal },
+      { x: 3.1, y: 1.35, z: -0.8, m: matCoral },
+      { x: -2.8, y: -0.05, z: 0.65, m: matYellow },
+      { x: 2.95, y: -0.22, z: -0.05, m: matGlass },
+      { x: 0.05, y: 2.15, z: -1.05, m: matGlass },
+    ];
+
+    const chipMeshes: THREE.Mesh[] = [];
+    chips.forEach((chip, index) => {
+      const mesh = new THREE.Mesh(new THREE.BoxGeometry(1.1, 0.55, 0.08), chip.m);
+      mesh.position.set(chip.x, chip.y, chip.z);
+      mesh.rotation.set(0.12 * index, -0.22 + index * 0.1, 0.08 * index);
+      chipMeshes.push(mesh);
+      group.add(mesh);
+    });
+
+    const connectorMaterial = new THREE.LineBasicMaterial({
+      color: 0xf8fafc,
+      transparent: true,
+      opacity: 0.22,
+    });
+    const connectorPoints = [
+      new THREE.Vector3(-3.3, 1.6, -0.9),
+      new THREE.Vector3(0, 0.42, -0.3),
+      new THREE.Vector3(3.1, 1.35, -0.8),
+      new THREE.Vector3(0.05, 2.15, -1.05),
+      new THREE.Vector3(-2.8, -0.05, 0.65),
+      new THREE.Vector3(2.95, -0.22, -0.05),
+    ];
+    const connectors = new THREE.Line(
+      new THREE.BufferGeometry().setFromPoints(connectorPoints),
+      connectorMaterial
+    );
+    group.add(connectors);
+
+    const grid = new THREE.GridHelper(12, 18, 0x64748b, 0x334155);
+    grid.position.y = -1.42;
+    grid.position.z = -0.3;
+    grid.material.transparent = true;
+    (grid.material as THREE.Material).opacity = 0.18;
+    group.add(grid);
+
+    const pointer = { x: 0, y: 0 };
+    const onPointerMove = (event: PointerEvent) => {
+      const rect = mount.getBoundingClientRect();
+      pointer.x = ((event.clientX - rect.left) / rect.width - 0.5) * 2;
+      pointer.y = ((event.clientY - rect.top) / rect.height - 0.5) * 2;
+    };
+    window.addEventListener("pointermove", onPointerMove);
+
+    const resize = () => {
+      const rect = mount.getBoundingClientRect();
+      renderer.setSize(rect.width, rect.height, false);
+      camera.aspect = rect.width / Math.max(rect.height, 1);
+      camera.updateProjectionMatrix();
+    };
+    resize();
+    window.addEventListener("resize", resize);
+
+    let frame = 0;
+    let raf = 0;
+    const animate = () => {
+      frame += 0.01;
+      group.rotation.y = THREE.MathUtils.lerp(group.rotation.y, pointer.x * 0.16, 0.04);
+      group.rotation.x = THREE.MathUtils.lerp(group.rotation.x, -pointer.y * 0.08, 0.04);
+      chipMeshes.forEach((mesh, index) => {
+        mesh.position.y += Math.sin(frame + index) * 0.0018;
+      });
+      monitor.rotation.y = Math.sin(frame * 0.7) * 0.025;
+      laptop.rotation.z = Math.sin(frame * 0.8) * 0.015;
+      renderer.render(scene, camera);
+      raf = window.requestAnimationFrame(animate);
+    };
+    animate();
+
+    return () => {
+      window.cancelAnimationFrame(raf);
+      window.removeEventListener("resize", resize);
+      window.removeEventListener("pointermove", onPointerMove);
+      mount.removeChild(renderer.domElement);
+      renderer.dispose();
+      scene.traverse((object) => {
+        if (object instanceof THREE.Mesh) {
+          object.geometry.dispose();
+          const material = object.material;
+          if (Array.isArray(material)) material.forEach((item) => item.dispose());
+          else material.dispose();
+        }
+      });
+    };
+  }, []);
+
+  return <div ref={mountRef} className="absolute inset-0 h-full w-full" aria-hidden="true" />;
+}
diff --git a/app/components/Logo.tsx b/app/components/Logo.tsx
index 65cb4da..9e88ede 100644
--- a/app/components/Logo.tsx
+++ b/app/components/Logo.tsx
@@ -4,10 +4,15 @@ import React from "react";
 const Logo = () => {
   return (
     <div>
-      <Link href="/">
-        <div className="flex items-center text-2xl font-bold cursor-pointer2">
-          <span className="text-pink-600">VibeX</span>
-          <span className="text-white">Code</span>
+      <Link href="/" aria-label="VibeXCode home">
+        <div className="flex items-center gap-2 text-xl font-bold tracking-tight cursor-pointer2">
+          <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-zinc-950 text-sm text-white shadow-lg shadow-teal-500/20 dark:bg-white dark:text-zinc-950">
+            VX
+          </span>
+          <span>
+            <span className="text-zinc-950 dark:text-white">VibeX</span>
+            <span className="text-teal-500">Code</span>
+          </span>
         </div>
       </Link>
     </div>
diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx
index 0b9f188..8e5a527 100644
--- a/app/components/Navbar.tsx
+++ b/app/components/Navbar.tsx
@@ -1,37 +1,45 @@
 "use client";
 
-import React, { useEffect, useState, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
 import { AnimatePresence, motion } from "framer-motion";
+import {
+  Code2,
+  Compass,
+  LayoutDashboard,
+  LogOut,
+  Menu,
+  Rocket,
+  Settings,
+  Shield,
+  User,
+  Users,
+  X,
+} from "lucide-react";
+import { useDispatch, useSelector } from "react-redux";
+import { getAuth, signOut } from "firebase/auth";
+
 import ThemeToggle from "./ThemeToggle";
 import Logo from "./Logo";
-import { useDispatch, useSelector } from "react-redux";
 import { AppDispatch, RootState } from "../store/store";
 import { login, logout as logoutAction } from "../store/authSlice";
 import authservice from "@/app/auth/firebase-auth";
-import { getAuth, signOut } from "firebase/auth";
 import { app } from "@/lib/firebase";
-import { CgProfile } from "react-icons/cg";
 import { isAdminEmail } from "@/lib/auth";
 import { useHeartbeat } from "@/lib/useHeartbeat";
+import { cn } from "@/lib/utils";
 
-// Single source of truth for navbar labels → URLs.
-// Routes keep their existing casing to avoid breaking external links/bookmarks.
-const NAV_ROUTES: Record<string, string> = {
-  Problems: "/problems",
-  Explore: "/Explore",
-  Dashboard: "/Dashboard",
-  Community: "/community",
-};
+const NAV_ITEMS = [
+  { label: "Problems", href: "/problems", icon: Code2 },
+  { label: "Explore", href: "/Explore", icon: Compass },
+  { label: "Dashboard", href: "/Dashboard", icon: LayoutDashboard },
+  { label: "Community", href: "/community", icon: Users },
+];
 
-const menuItemVariants = {
-  hidden: { opacity: 0, x: -10 },
-  visible: (i: number) => ({
-    opacity: 1,
-    x: 0,
-    transition: { delay: i * 0.05 },
-  }),
+const menuVariants = {
+  hidden: { opacity: 0, y: -8, scale: 0.98 },
+  visible: { opacity: 1, y: 0, scale: 1 },
 };
 
 const Navbar = () => {
@@ -40,68 +48,45 @@ const Navbar = () => {
   const [showProfileMenu, setShowProfileMenu] = useState(false);
   const profileRef = useRef<HTMLDivElement | null>(null);
   const dispatch = useDispatch<AppDispatch>();
-
   const authState = useSelector((state: RootState) => state.auth);
   const isLoggedIn = authState.status;
 
-  // Presence heartbeat — runs everywhere the Navbar is mounted, which is
-  // every authenticated page.
   useHeartbeat(isLoggedIn ? authState.userData?.email : null);
 
   useEffect(() => {
     const checkUser = async () => {
       try {
         const userData = await authservice.checkUser();
-        if (userData) {
-          dispatch(login({ status: true, userData }));
-        } else {
-          dispatch(login({ status: false, userData: null }));
-        }
+        dispatch(login({ status: Boolean(userData), userData: userData || null }));
       } catch (error) {
         console.error("Error checking user:", error);
         dispatch(login({ status: false, userData: null }));
       }
     };
 
-    if (!isLoggedIn) {
-      checkUser();
-    }
+    if (!isLoggedIn) checkUser();
   }, [dispatch, isLoggedIn]);
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
-      if (
-        profileRef.current &&
-        !profileRef.current.contains(event.target as Node)
-      ) {
+      if (profileRef.current && !profileRef.current.contains(event.target as Node)) {
         setShowProfileMenu(false);
       }
     };
-    if (showProfileMenu) {
-      document.addEventListener("mousedown", handleClickOutside);
-    }
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
+    if (showProfileMenu) document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [showProfileMenu]);
 
-  const handleVibeClick = () => {
-    setMenuOpen(false);
-    setShowProfileMenu(false);
-    router.push("/problems");
-  };
-
-  const handleMobileNavClick = (path: string) => {
+  const navigate = (href: string) => {
     setMenuOpen(false);
     setShowProfileMenu(false);
-    router.push(path);
+    router.push(href);
   };
 
   const handleLogout = async () => {
     try {
       dispatch(logoutAction());
-      const auth = getAuth(app);
-      await signOut(auth);
+      await signOut(getAuth(app));
       await authservice.logout();
       router.push("/login");
       router.refresh();
@@ -112,244 +97,175 @@ const Navbar = () => {
     }
   };
 
-  const navItems = ["Problems", "Explore", "Dashboard", "Community"];
-
   return (
-    <nav className="w-full py-4 px-6 md:px-8 relative z-30 bg-transparent dark:bg-[#020612] transition-all">
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-3">
-          {/* Mobile menu button */}
-          <motion.button
-            whileTap={{ scale: 0.9 }}
+    <nav className="sticky top-0 z-50 w-full px-3 py-3 sm:px-5">
+      <div className="mx-auto flex max-w-7xl items-center justify-between rounded-2xl border border-white/50 bg-white/74 px-3 py-2 shadow-[0_18px_60px_rgba(15,23,42,0.12)] backdrop-blur-xl dark:border-white/10 dark:bg-zinc-950/68 dark:shadow-black/30">
+        <div className="flex items-center gap-2">
+          <button
             onClick={() => setMenuOpen((prev) => !prev)}
-            className="md:hidden text-3xl text-purple-600 dark:text-teal-300 focus:outline-none cursor-pointer2"
-          >
-            <motion.span
-              initial={false}
-              animate={{ rotate: menuOpen ? 45 : 0 }}
-              className="block"
-            >
-              {menuOpen ? "✕" : "☰"}
-            </motion.span>
-          </motion.button>
-          <motion.div
-            initial={{ opacity: 0, x: -20 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ duration: 0.5 }}
+            className="rounded-xl p-2 text-zinc-700 transition hover:bg-zinc-100 dark:text-zinc-200 dark:hover:bg-white/10 md:hidden"
+            aria-label={menuOpen ? "Close navigation menu" : "Open navigation menu"}
           >
-            <Logo />
-          </motion.div>
+            {menuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+          </button>
+          <Logo />
         </div>
 
-        {/* Main navigation items (desktop) */}
-        <div className="hidden md:flex items-center gap-6 cursor-pointer2">
-          {navItems.map((item) => (
-            <motion.div
-              key={item}
-              whileHover={{ scale: 1.05 }}
-              whileTap={{ scale: 0.95 }}
-            >
+        <div className="hidden items-center gap-1 md:flex">
+          {NAV_ITEMS.map((item) => {
+            const Icon = item.icon;
+            return (
               <Link
-                href={NAV_ROUTES[item]}
-                className="text-gray-800 dark:text-white font-medium hover:text-purple-600 dark:hover:text-purple-400 transition-all cursor-pointer2"
+                key={item.href}
+                href={item.href}
+                className="group inline-flex items-center gap-2 rounded-xl px-3 py-2 text-sm font-medium text-zinc-700 transition hover:bg-zinc-950 hover:text-white dark:text-zinc-200 dark:hover:bg-white dark:hover:text-zinc-950"
               >
-                {item}
+                <Icon className="h-4 w-4 opacity-70 transition group-hover:opacity-100" />
+                {item.label}
               </Link>
-            </motion.div>
-          ))}
+            );
+          })}
         </div>
 
-        {/* Right section */}
-        <div className="flex items-center gap-2 min-w-[110px] justify-end relative ">
-          {/* ThemeToggle always first */}
+        <div className="flex items-center gap-2">
           <ThemeToggle />
-
           {isLoggedIn ? (
-            <>
-              {/* Profile Button and Popup */}
-              <div className="relative" ref={profileRef}>
-                <button
-                  onClick={() => setShowProfileMenu((v) => !v)}
-                  className="p-2 rounded-full focus:outline-none text-black dark:text-white dark:hover:bg-zinc-800 transition cursor-pointer2"
-                  title="Profile"
-                  aria-haspopup="menu"
-                  aria-expanded={showProfileMenu}
-                >
-                  <CgProfile className="w-7 h-7" />
-                </button>
-                {/* Dropdown */}
-                <AnimatePresence>
-                  {showProfileMenu && (
-                    <motion.div
-                      initial={{ opacity: 0, y: -10 }}
-                      animate={{ opacity: 1, y: 0 }}
-                      exit={{ opacity: 0, y: -10 }}
-                      transition={{ duration: 0.17 }}
-                      className="absolute right-0 mt-2 w-48 bg-white dark:bg-zinc-900 rounded-lg shadow-lg p-3 flex flex-col gap-1 z-50"
-                    >
-                      <button
-                        onClick={() => {
-                          setShowProfileMenu(false);
-                          router.push("/Profile");
-                        }}
-                        className="py-2 px-3 hover:bg-zinc-100 dark:hover:bg-zinc-800 dark:text-white rounded text-left transition"
-                      >
-                        Profile
-                      </button>
-                      <button
-                        onClick={() => {
-                          setShowProfileMenu(false);
-                          router.push("/submissions");
-                        }}
-                        className="py-2 px-3 hover:bg-zinc-100 dark:hover:bg-zinc-800 dark:text-white rounded text-left transition"
-                      >
-                        Submissions
-                      </button>
-                      <button
-                        onClick={() => {
-                          setShowProfileMenu(false);
-                          router.push("/settings");
-                        }}
-                        className="py-2 px-3 hover:bg-zinc-100 dark:hover:bg-zinc-800 dark:text-white rounded text-left transition"
-                      >
-                        Settings
-                      </button>
-                      {isAdminEmail(authState.userData?.email) && (
-                        <button
-                          onClick={() => {
-                            setShowProfileMenu(false);
-                            router.push("/admin");
-                          }}
-                          className="py-2 px-3 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded text-left text-purple-600 dark:text-purple-300 font-medium transition"
-                        >
-                          🛡️ Admin
-                        </button>
-                      )}
-                      <button
-                        onClick={handleLogout}
-                        className="py-2 px-3 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded text-left text-red-500 transition"
-                      >
-                        Logout
-                      </button>
-                      <button
-                        onClick={handleVibeClick}
-                        className="py-2 px-3 mt-1 rounded font-semibold bg-gradient-to-r from-pink-500 via-fuchsia-500 to-rose-500 text-white shadow-[0_0_10px_#ff00ff] hover:opacity-90 transition"
-                      >
-                        Start Vibing
-                      </button>
-                    </motion.div>
-                  )}
-                </AnimatePresence>
-              </div>
-            </>
+            <div className="relative" ref={profileRef}>
+              <button
+                onClick={() => setShowProfileMenu((value) => !value)}
+                className="flex items-center gap-2 rounded-xl border border-zinc-200 bg-white px-2.5 py-2 text-sm font-medium text-zinc-900 shadow-sm transition hover:border-zinc-300 dark:border-white/10 dark:bg-white/10 dark:text-white dark:hover:bg-white/15"
+                aria-haspopup="menu"
+                aria-expanded={showProfileMenu}
+              >
+                <User className="h-4 w-4" />
+                <span className="hidden max-w-28 truncate sm:inline">
+                  {authState.userData?.name || "Account"}
+                </span>
+              </button>
+              <AnimatePresence>
+                {showProfileMenu && (
+                  <motion.div
+                    variants={menuVariants}
+                    initial="hidden"
+                    animate="visible"
+                    exit="hidden"
+                    transition={{ duration: 0.16 }}
+                    className="absolute right-0 mt-3 w-56 overflow-hidden rounded-2xl border border-zinc-200 bg-white p-2 shadow-2xl dark:border-white/10 dark:bg-zinc-950"
+                  >
+                    <MenuButton icon={User} label="Profile" onClick={() => navigate("/Profile")} />
+                    <MenuButton icon={Code2} label="Submissions" onClick={() => navigate("/submissions")} />
+                    <MenuButton icon={Settings} label="Settings" onClick={() => navigate("/settings")} />
+                    {isAdminEmail(authState.userData?.email) && (
+                      <MenuButton icon={Shield} label="Admin" onClick={() => navigate("/admin")} accent />
+                    )}
+                    <div className="my-1 h-px bg-zinc-200 dark:bg-white/10" />
+                    <MenuButton icon={Rocket} label="Start Vibing" onClick={() => navigate("/problems")} strong />
+                    <MenuButton icon={LogOut} label="Logout" onClick={handleLogout} danger />
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </div>
           ) : (
-            // LOGGED OUT: Show only Login button
-            <motion.button
-              whileHover={{ scale: 1.05 }}
-              whileTap={{ scale: 0.95 }}
-              onClick={() => router.push("/login")}
-              className="bg-gradient-to-r from-pink-500 via-fuchsia-500 to-rose-500 text-white px-4 py-2 rounded-full font-semibold shadow-[0_0_10px_#ff00ff] hover:opacity-90 transition-all text-sm"
-            >
-              Log In
-            </motion.button>
+            <div className="flex items-center gap-2">
+              <button
+                onClick={() => navigate("/login")}
+                className="hidden rounded-xl px-3 py-2 text-sm font-semibold text-zinc-700 transition hover:bg-zinc-100 dark:text-zinc-200 dark:hover:bg-white/10 sm:inline-flex"
+              >
+                Log In
+              </button>
+              <button
+                onClick={() => navigate("/signup")}
+                className="inline-flex items-center gap-2 rounded-xl bg-zinc-950 px-3.5 py-2 text-sm font-semibold text-white shadow-lg shadow-teal-500/20 transition hover:-translate-y-0.5 hover:bg-zinc-800 dark:bg-white dark:text-zinc-950 dark:hover:bg-zinc-200"
+              >
+                <Rocket className="h-4 w-4" />
+                Join
+              </button>
+            </div>
           )}
         </div>
       </div>
 
-      {/* Overlay for mobile */}
       <AnimatePresence>
         {menuOpen && (
           <motion.div
-            className="fixed inset-0 bg-black/30 backdrop-blur-sm z-20 md:hidden"
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            onClick={() => setMenuOpen(false)}
-          />
-        )}
-      </AnimatePresence>
-
-      {/* Mobile Menu */}
-      <AnimatePresence>
-        {menuOpen && (
-          <motion.ul
-            initial={{ opacity: 0, y: -20 }}
+            initial={{ opacity: 0, y: -10 }}
             animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -20 }}
-            transition={{ duration: 0.4 }}
-            className="absolute top-full left-0 w-full md:hidden bg-white dark:bg-zinc-900 rounded-b-xl p-6 shadow-xl z-30 space-y-4"
+            exit={{ opacity: 0, y: -10 }}
+            transition={{ duration: 0.2 }}
+            className="mx-auto mt-2 max-w-7xl rounded-2xl border border-white/50 bg-white/92 p-3 shadow-2xl backdrop-blur-xl dark:border-white/10 dark:bg-zinc-950/92 md:hidden"
           >
-            {navItems.map((item, i) => (
-              <motion.li
-                key={item}
-                custom={i}
-                variants={menuItemVariants}
-                initial="hidden"
-                animate="visible"
-                exit="hidden"
-              >
-                <button
-                  onClick={() => handleMobileNavClick(NAV_ROUTES[item])}
-                  className="text-left w-full text-gray-800 dark:text-white text-base font-medium hover:text-purple-600 dark:hover:text-purple-400 transition-all"
-                >
-                  {item}
-                </button>
-              </motion.li>
-            ))}
-            <motion.li
-              custom={3}
-              variants={menuItemVariants}
-              initial="hidden"
-              animate="visible"
-              exit="hidden"
-              className="pt-2 border-t border-zinc-300 dark:border-zinc-700"
-            >
-              <div className="flex flex-col gap-4 mt-3 cursor-pointer2">
+            <div className="grid gap-1">
+              {NAV_ITEMS.map((item) => {
+                const Icon = item.icon;
+                return (
+                  <button
+                    key={item.href}
+                    onClick={() => navigate(item.href)}
+                    className="flex items-center gap-3 rounded-xl px-3 py-3 text-left text-sm font-semibold text-zinc-800 transition hover:bg-zinc-100 dark:text-zinc-100 dark:hover:bg-white/10"
+                  >
+                    <Icon className="h-4 w-4 text-teal-500" />
+                    {item.label}
+                  </button>
+                );
+              })}
+              <div className="mt-2 grid grid-cols-2 gap-2 border-t border-zinc-200 pt-3 dark:border-white/10">
                 {isLoggedIn ? (
                   <>
-                    <button
-                      onClick={() => handleMobileNavClick("/Profile")}
-                      className="text-purple-600 dark:text-white text-xl hover:underline scale-90"
-                      title="Profile"
-                    >
+                    <button onClick={() => navigate("/Profile")} className="rounded-xl bg-zinc-100 px-3 py-2 text-sm font-semibold dark:bg-white/10">
                       Profile
                     </button>
-                    <button
-                      onClick={handleLogout}
-                      className="text-red-500 hover:underline font-medium"
-                    >
+                    <button onClick={handleLogout} className="rounded-xl bg-red-50 px-3 py-2 text-sm font-semibold text-red-600 dark:bg-red-950/30">
                       Logout
                     </button>
                   </>
                 ) : (
                   <>
-                    <button
-                      onClick={() => handleMobileNavClick("/login")}
-                      className="text-purple-600 dark:text-teal-300 font-medium hover:underline"
-                    >
+                    <button onClick={() => navigate("/login")} className="rounded-xl bg-zinc-100 px-3 py-2 text-sm font-semibold dark:bg-white/10">
                       Log In
                     </button>
-                    <button
-                      onClick={() => handleMobileNavClick("/signup")}
-                      className="bg-gradient-to-r from-purple-400 to-pink-500 text-white px-4 py-2 rounded-full font-semibold shadow hover:opacity-90 transition-all text-sm cursor-pointer2"
-                    >
+                    <button onClick={() => navigate("/signup")} className="rounded-xl bg-zinc-950 px-3 py-2 text-sm font-semibold text-white dark:bg-white dark:text-zinc-950">
                       Sign Up
                     </button>
                   </>
                 )}
-                <button
-                  onClick={handleVibeClick}
-                  className="px-4 py-2 rounded-full bg-gradient-to-r from-pink-500 via-fuchsia-500 to-rose-500 animate-pulse text-white text-sm font-semibold shadow-[0_0_10px_#ff00ff] hover:opacity-90 transition-all duration-300"
-                >
-                  Start Vibing
-                </button>
               </div>
-            </motion.li>
-          </motion.ul>
+            </div>
+          </motion.div>
         )}
       </AnimatePresence>
     </nav>
   );
 };
 
+function MenuButton({
+  icon: Icon,
+  label,
+  onClick,
+  accent,
+  danger,
+  strong,
+}: {
+  icon: React.ComponentType<{ className?: string }>;
+  label: string;
+  onClick: () => void;
+  accent?: boolean;
+  danger?: boolean;
+  strong?: boolean;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        "flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-left text-sm font-medium transition hover:bg-zinc-100 dark:hover:bg-white/10",
+        accent && "text-teal-600 dark:text-teal-300",
+        danger && "text-red-600 dark:text-red-400",
+        strong && "bg-zinc-950 text-white hover:bg-zinc-800 dark:bg-white dark:text-zinc-950 dark:hover:bg-zinc-200"
+      )}
+    >
+      <Icon className="h-4 w-4" />
+      {label}
+    </button>
+  );
+}
+
 export default Navbar;
diff --git a/app/page.tsx b/app/page.tsx
index ee1f1a8..878e451 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,262 +1,246 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import AOS from "aos";
-import "aos/dist/aos.css";
-import Image from "next/image";
 import Link from "next/link";
-import Navbar from "./components/Navbar";
-import authservice from "@/app/auth/firebase-auth";
 import { motion } from "framer-motion";
 import { useSelector } from "react-redux";
+import {
+  ArrowRight,
+  Braces,
+  CheckCircle2,
+  Code2,
+  MessageSquare,
+  Play,
+  Sparkles,
+  Trophy,
+  Users,
+  Zap,
+} from "lucide-react";
+
+import Navbar from "./components/Navbar";
+import HeroWorkspace3D from "./components/HeroWorkspace3D";
+import authservice from "@/app/auth/firebase-auth";
 import { RootState } from "./store/store";
 
-// Static ring props — values are derived from index, no Math.random() so
-// server and client render identical HTML (was causing a hydration flash).
-const MOBILE_RING_POSITIONS = [
-  { top: 30, left: 40 },
-  { bottom: 30, right: 30 },
-  { top: 50, right: 20 },
-  { bottom: 60, left: 30 },
-  { bottom: 60, right: 30 },
+const capabilities = [
+  {
+    icon: Code2,
+    title: "Practice that feels alive",
+    text: "Solve problems, run code, track progress, and keep momentum without leaving the workspace.",
+  },
+  {
+    icon: MessageSquare,
+    title: "Real-time developer chat",
+    text: "Discuss approaches, share files, launch tools, and collaborate while the context is still fresh.",
+  },
+  {
+    icon: Trophy,
+    title: "Progress with signal",
+    text: "Leaderboards, submissions, and activity views help you see what improved and what needs work.",
+  },
 ];
 
-const DESKTOP_RING_POSITIONS = [
-  { top: 96, left: 80 },
-  { bottom: 16, right: 40 },
-  { top: 40, right: 64 },
-  { bottom: 64, left: 40 },
-  { bottom: 112, right: 112 },
+const workflow = [
+  "Choose a topic or open the playground",
+  "Build, test, ask, and discuss in one flow",
+  "Save progress and return with context intact",
 ];
 
-type RingPos = {
-  top?: number;
-  left?: number;
-  bottom?: number;
-  right?: number;
-};
-
-const ringStyle = (
-  pos: RingPos,
-  i: number,
-  keyframe: string
-): React.CSSProperties =>
-  ({
-    position: "absolute",
-    ...pos,
-    opacity: i % 2 === 0 ? 0.4 : 0.3,
-    // Stagger animation timings so they don't move in lockstep, but
-    // deterministically — same value every render.
-    animation: `${keyframe} ${3000 + i * 250}ms ease-in-out infinite alternate`,
-    "--ring-anim-x": `${(i % 2 === 0 ? 1 : -1) * (10 + i * 4)}px`,
-    "--ring-anim-y": `${(i % 3 === 0 ? 1 : -1) * (12 + i * 3)}px`,
-  } as unknown as React.CSSProperties);
-
-const mobileRingProps = MOBILE_RING_POSITIONS.map((pos, i) => ({
-  style: ringStyle(pos, i, "floatRingMobile"),
-}));
-
-const desktopRingProps = DESKTOP_RING_POSITIONS.map((pos, i) => ({
-  style: ringStyle(pos, i, "floatRingDesktop"),
-}));
-
-// Define the CSS animation keyframes
-const mobileRingsCSS = `
-@keyframes floatRingMobile {
-  0%   { transform: translate(0, 0);}
-  100% {
-    transform: translate(var(--ring-anim-x,12px), var(--ring-anim-y,12px));
-  }
-}
-`;
-
-const desktopRingsCSS = `
-@keyframes floatRingDesktop {
-  0%   { transform: translate(0, 0);}
-  100% {
-    transform: translate(var(--ring-anim-x,12px), var(--ring-anim-y,12px));
-  }
-}
-`;
+const stats = [
+  { label: "Core routes", value: "50+" },
+  { label: "Realtime tools", value: "Live" },
+  { label: "Focus mode", value: "24/7" },
+];
 
 export default function Home() {
   const [loggedIn, setLoggedIn] = useState(false);
-  const value = useSelector((state: RootState) => state.auth.status);
+  const authStatus = useSelector((state: RootState) => state.auth.status);
 
   useEffect(() => {
-    AOS.init({
-      duration: 1000,
-      once: true,
-    });
     const checkUser = async () => {
       try {
         const result = await authservice.checkUser();
-        if (result) setLoggedIn(true);
+        setLoggedIn(Boolean(result));
       } catch (error) {
         console.error("Error checking user authentication:", error);
         setLoggedIn(false);
       }
     };
     checkUser();
-  }, [value]);
+  }, [authStatus]);
+
+  const primaryHref = loggedIn ? "/problems" : "/signup";
+  const primaryLabel = loggedIn ? "Continue Coding" : "Start Free";
 
   return (
-    <>
-      {/* Add animation CSS to the head */}
-      <style>{mobileRingsCSS + desktopRingsCSS}</style>
-      <div className="h-screen md:overflow-hidden overflow-auto">
-        <Navbar />
-        <main className="min-h-screen w-full text-black dark:text-white dark:bg-[#020612] px-4 sm:px-8 md:px-24 pb-8 transition-colors duration-300 relative overflow-hidden">
-          {/* Top left headphones -- large only */}
-          <div
-            className="fixed top-2 left-1/2 transform -translate-x-1/2 z-50 pointer-events-none animate-float-in-top hidden sm:block md:w-[320px] w-[200px]"
-            data-aos="fade-down"
-          >
-            <Image
-              src="/assets/headphones1.png"
-              alt="Hanging Headphones"
-              width={320}
-              height={320}
-              className="rotate-180 object-contain translate-y-0 translate-x-50 animate-levitate"
-              style={{
-                filter: "drop-shadow(-10px -10px 30px rgba(168, 85, 247, 0.6))",
-              }}
-              priority
-            />
-          </div>
+    <div className="min-h-screen overflow-x-hidden bg-[#f7f3eb] text-zinc-950 dark:bg-[#080a0f] dark:text-white">
+      <Navbar />
 
-          {/* Bottom right laptop -- large only */}
-          <div
-            className="fixed bottom-0 right-4 sm:right-20 z-40 pointer-events-none animate-enter-up hidden sm:block md:w-[300px] w-[180px]"
-            data-aos="fade-up"
-          >
-            <div className="animate-levitate">
-              <Image
-                src="/assets/lap2.png"
-                alt="Laptop"
-                width={300}
-                height={300}
-                className="rotate-[-20deg] object-contain"
-                style={{
-                  filter:
-                    "drop-shadow(-10px -10px 30px rgba(168, 85, 247, 0.6))",
-                }}
-                priority
-              />
-            </div>
-          </div>
+      <main>
+        <section className="relative -mt-20 min-h-[calc(100svh+1rem)] overflow-hidden pt-20">
+          <div className="absolute inset-0 bg-[linear-gradient(115deg,#f8fafc_0%,#f7f3eb_34%,#d7f7ee_68%,#ffd9c7_100%)] dark:bg-[linear-gradient(115deg,#080a0f_0%,#111827_42%,#052e2b_70%,#2a1116_100%)]" />
+          <HeroWorkspace3D />
+          <div className="absolute inset-0 bg-[linear-gradient(90deg,rgba(247,243,235,0.94)_0%,rgba(247,243,235,0.78)_39%,rgba(247,243,235,0.16)_76%)] dark:bg-[linear-gradient(90deg,rgba(8,10,15,0.96)_0%,rgba(8,10,15,0.76)_42%,rgba(8,10,15,0.12)_78%)]" />
 
-          {/* Main content: flex container with responsive stacking */}
-          <div className="flex flex-col-reverse md:flex-row items-center md:justify-between justify-center gap-8 md:gap-10 min-h-[calc(100vh-4rem)] pt-12 md:pt-24 relative z-20 max-w-7xl mx-auto">
-            {loggedIn ? (
+          <div className="relative z-10 mx-auto flex min-h-[calc(100svh-5rem)] max-w-7xl items-center px-4 pb-16 pt-10 sm:px-6 lg:px-8">
+            <div className="max-w-3xl">
               <motion.div
-                className="flex-1 text-center md:text-left"
-                initial={{ opacity: 0, x: -50 }}
-                animate={{ opacity: 1, x: 0 }}
-                transition={{ duration: 0.8 }}
+                initial={{ opacity: 0, y: 18 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.55 }}
+                className="mb-5 inline-flex items-center gap-2 rounded-full border border-zinc-950/10 bg-white/70 px-3 py-1.5 text-sm font-medium text-zinc-700 shadow-sm backdrop-blur dark:border-white/10 dark:bg-white/10 dark:text-zinc-200"
               >
-                <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold leading-tight">
-                  <span className="text-purple-600">A</span>{" "}
-                  <span className="text-gray-900 dark:text-white">New Way</span>{" "}
-                  <span className="text-purple-600">To</span>{" "}
-                  <span className="text-purple-500">Learn</span>
-                </h1>
-                <p className="mt-4 sm:mt-6 text-gray-700 dark:text-gray-300 text-base sm:text-lg max-w-lg mx-auto md:mx-0">
-                  VibexCode is the best platform to help you enhance your
-                  skills, expand your knowledge and prepare for technical
-                  interviews.
-                </p>
-                <Link href="/problems" passHref>
-                  <motion.button
-                    whileHover={{ scale: 1.05 }}
-                    whileTap={{ scale: 0.95 }}
-                    className="mt-6 sm:mt-8 bg-gradient-to-r from-purple-500 to-pink-500 text-white px-6 sm:px-8 py-3 sm:py-3 rounded-full text-base sm:text-lg font-semibold shadow hover:opacity-90 transition-all w-full sm:w-auto max-w-xs mx-auto md:mx-0"
-                  >
-                    Begin Coding
-                  </motion.button>
-                </Link>
+                <Sparkles className="h-4 w-4 text-teal-500" />
+                Developer workspace for practice, chat, and momentum
               </motion.div>
-            ) : (
+
+              <motion.h1
+                initial={{ opacity: 0, y: 22 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 0.08, duration: 0.65 }}
+                className="max-w-4xl text-5xl font-black leading-[0.95] tracking-normal text-zinc-950 dark:text-white sm:text-6xl lg:text-7xl"
+              >
+                Code better with a workspace that keeps up.
+              </motion.h1>
+
+              <motion.p
+                initial={{ opacity: 0, y: 18 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 0.18, duration: 0.55 }}
+                className="mt-6 max-w-2xl text-base leading-7 text-zinc-700 dark:text-zinc-300 sm:text-lg"
+              >
+                VibeXCode brings practice, real-time community chat, coding tools,
+                progress tracking, and collaboration into one smooth developer-first
+                environment.
+              </motion.p>
+
               <motion.div
-                className="flex-1 text-center md:text-left"
-                initial={{ opacity: 0, x: -50 }}
-                animate={{ opacity: 1, x: 0 }}
-                transition={{ duration: 0.8 }}
+                initial={{ opacity: 0, y: 16 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 0.28, duration: 0.5 }}
+                className="mt-8 flex flex-col gap-3 sm:flex-row"
               >
-                <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold leading-tight">
-                  <span className="text-purple-600">A</span>{" "}
-                  <span className="text-gray-900 dark:text-white">New Way</span>{" "}
-                  <span className="text-purple-600">To</span>{" "}
-                  <span className="text-purple-500">Learn</span>
-                </h1>
-                <p className="mt-4 sm:mt-6 text-gray-700 dark:text-gray-300 text-base sm:text-lg max-w-lg mx-auto md:mx-0">
-                  VibexCode is the best platform to help you enhance your
-                  skills, expand your knowledge and prepare for technical
-                  interviews.
-                </p>
-                <Link href="/signup" passHref>
-                  <motion.button
-                    whileHover={{ scale: 1.05 }}
-                    whileTap={{ scale: 0.95 }}
-                    className="mt-6 sm:mt-8 bg-gradient-to-r from-purple-500 to-pink-500 text-white px-6 sm:px-8 py-3 sm:py-3 rounded-full text-base sm:text-lg font-semibold shadow hover:opacity-90 transition-all w-full sm:w-auto max-w-xs mx-auto md:mx-0"
-                  >
-                    Create Account
-                  </motion.button>
+                <Link
+                  href={primaryHref}
+                  className="group inline-flex items-center justify-center gap-2 rounded-xl bg-zinc-950 px-5 py-3 text-sm font-bold text-white shadow-2xl shadow-teal-500/20 transition hover:-translate-y-0.5 hover:bg-zinc-800 dark:bg-white dark:text-zinc-950 dark:hover:bg-zinc-200"
+                >
+                  {primaryLabel}
+                  <ArrowRight className="h-4 w-4 transition group-hover:translate-x-0.5" />
+                </Link>
+                <Link
+                  href="/playground"
+                  className="inline-flex items-center justify-center gap-2 rounded-xl border border-zinc-950/10 bg-white/72 px-5 py-3 text-sm font-bold text-zinc-900 shadow-lg backdrop-blur transition hover:-translate-y-0.5 hover:bg-white dark:border-white/10 dark:bg-white/10 dark:text-white dark:hover:bg-white/15"
+                >
+                  <Play className="h-4 w-4" />
+                  Open Playground
                 </Link>
               </motion.div>
-            )}
 
-            {/* Right Decorative Circles: animate randomly on mobile only */}
-            <div className="flex-1 relative flex flex-col justify-end items-end h-full w-full max-w-md md:max-w-none sm:hidden">
-              {mobileRingProps.map((ring, i) => (
-                <div
-                  key={i}
-                  className={[
-                    "absolute z-0",
-                    i === 0
-                      ? "w-20 h-20 border-8 border-purple-300 dark:border-purple-700 rounded-full"
-                      : i === 1
-                      ? "w-12 h-12 border-8 border-purple-300 dark:border-purple-700 rounded-full"
-                      : i === 2
-                      ? "w-10 h-10 border-4 border-purple-400 dark:border-purple-600 rounded-full"
-                      : i === 3
-                      ? "w-16 h-16 border-4 border-pink-400 dark:border-pink-600 rounded-full"
-                      : "w-8 h-8 border-4 border-blue-400 dark:border-blue-600 rounded-full",
-                  ].join(" ")}
-                  style={ring.style}
-                />
-              ))}
+              <motion.div
+                initial={{ opacity: 0, y: 14 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 0.38, duration: 0.5 }}
+                className="mt-9 grid max-w-xl grid-cols-3 gap-3"
+              >
+                {stats.map((stat) => (
+                  <div key={stat.label} className="rounded-xl border border-zinc-950/10 bg-white/64 px-3 py-3 backdrop-blur dark:border-white/10 dark:bg-white/10">
+                    <p className="text-2xl font-black">{stat.value}</p>
+                    <p className="mt-1 text-xs font-medium text-zinc-600 dark:text-zinc-400">
+                      {stat.label}
+                    </p>
+                  </div>
+                ))}
+              </motion.div>
             </div>
+          </div>
 
-            {/* Desktop/Tablet: animated rings */}
-            <motion.div
-              className="flex-1 relative flex-col justify-end items-end h-full w-full max-w-md md:max-w-none hidden sm:flex"
-              initial={{ opacity: 0, x: 50 }}
-              animate={{ opacity: 1, x: 0 }}
-              transition={{ duration: 0.8 }}
-            >
-              {desktopRingProps.map((ring, i) => (
-                <div
-                  key={i}
-                  className={[
-                    "rounded-full z-0",
-                    i === 0
-                      ? "w-20 h-20 border-8 border-purple-300 dark:border-purple-700 opacity-50"
-                      : i === 1
-                      ? "w-20 h-20 border-8 border-purple-300 dark:border-purple-700 opacity-50"
-                      : i === 2
-                      ? "w-16 h-16 border-4 border-purple-400 dark:border-purple-600 opacity-40"
-                      : i === 3
-                      ? "w-24 h-24 border-4 border-pink-400 dark:border-pink-600 opacity-40"
-                      : "w-12 h-12 border-4 border-blue-400 dark:border-blue-600 opacity-40",
-                  ].join(" ")}
-                  style={ring.style}
-                />
+          <div className="absolute bottom-0 left-0 right-0 z-10 h-20 bg-gradient-to-t from-[#f7f3eb] to-transparent dark:from-[#080a0f]" />
+        </section>
+
+        <section className="relative z-20 mx-auto grid max-w-7xl gap-4 px-4 pb-20 sm:px-6 lg:grid-cols-3 lg:px-8">
+          {capabilities.map((item, index) => {
+            const Icon = item.icon;
+            return (
+              <motion.article
+                key={item.title}
+                initial={{ opacity: 0, y: 18 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true, margin: "-80px" }}
+                transition={{ delay: index * 0.08, duration: 0.45 }}
+                className="rounded-2xl border border-zinc-950/10 bg-white/80 p-5 shadow-xl shadow-zinc-900/5 backdrop-blur dark:border-white/10 dark:bg-white/8"
+              >
+                <div className="mb-4 flex h-11 w-11 items-center justify-center rounded-xl bg-zinc-950 text-white dark:bg-white dark:text-zinc-950">
+                  <Icon className="h-5 w-5" />
+                </div>
+                <h2 className="text-lg font-bold">{item.title}</h2>
+                <p className="mt-2 text-sm leading-6 text-zinc-600 dark:text-zinc-300">
+                  {item.text}
+                </p>
+              </motion.article>
+            );
+          })}
+        </section>
+
+        <section className="mx-auto grid max-w-7xl gap-8 px-4 pb-24 sm:px-6 lg:grid-cols-[0.9fr_1.1fr] lg:px-8">
+          <div>
+            <p className="mb-3 inline-flex items-center gap-2 rounded-full bg-teal-500/12 px-3 py-1.5 text-sm font-semibold text-teal-700 dark:text-teal-300">
+              <Zap className="h-4 w-4" />
+              Built for flow
+            </p>
+            <h2 className="text-3xl font-black leading-tight sm:text-4xl">
+              Less switching. More building.
+            </h2>
+            <p className="mt-4 max-w-xl text-sm leading-7 text-zinc-600 dark:text-zinc-300 sm:text-base">
+              The platform is designed around the way developers actually work:
+              search, solve, chat, compare, ship, and come back tomorrow without
+              losing the thread.
+            </p>
+          </div>
+
+          <div className="rounded-2xl border border-zinc-950/10 bg-zinc-950 p-4 text-white shadow-2xl shadow-zinc-950/20 dark:border-white/10">
+            <div className="mb-4 flex items-center gap-2 border-b border-white/10 pb-3">
+              <span className="h-3 w-3 rounded-full bg-red-400" />
+              <span className="h-3 w-3 rounded-full bg-yellow-400" />
+              <span className="h-3 w-3 rounded-full bg-teal-400" />
+              <span className="ml-2 text-xs text-zinc-400">vibexcode/workflow.ts</span>
+            </div>
+            <div className="space-y-3 font-mono text-sm">
+              {workflow.map((line, index) => (
+                <motion.div
+                  key={line}
+                  initial={{ opacity: 0, x: -10 }}
+                  whileInView={{ opacity: 1, x: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ delay: index * 0.1 }}
+                  className="flex items-start gap-3 rounded-xl bg-white/6 px-3 py-3"
+                >
+                  <CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0 text-teal-300" />
+                  <span>{line}</span>
+                </motion.div>
               ))}
-            </motion.div>
+            </div>
+          </div>
+        </section>
+
+        <section className="border-t border-zinc-950/10 bg-white/60 px-4 py-16 dark:border-white/10 dark:bg-white/5 sm:px-6 lg:px-8">
+          <div className="mx-auto flex max-w-7xl flex-col items-start justify-between gap-6 md:flex-row md:items-center">
+            <div>
+              <div className="mb-3 flex items-center gap-2 text-sm font-semibold text-zinc-600 dark:text-zinc-300">
+                <Braces className="h-4 w-4 text-rose-500" />
+                Ready when you are
+              </div>
+              <h2 className="text-3xl font-black">Make your next coding session feel effortless.</h2>
+            </div>
+            <Link
+              href={primaryHref}
+              className="inline-flex items-center justify-center gap-2 rounded-xl bg-zinc-950 px-5 py-3 text-sm font-bold text-white shadow-xl shadow-teal-500/20 transition hover:-translate-y-0.5 dark:bg-white dark:text-zinc-950"
+            >
+              {primaryLabel}
+              <Users className="h-4 w-4" />
+            </Link>
           </div>
-        </main>
-      </div>
-    </>
+        </section>
+      </main>
+    </div>
   );
 }
diff --git a/package-lock.json b/package-lock.json
index f4bbb35..583b107 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "@reduxjs/toolkit": "^2.8.2",
         "@tinymce/tinymce-react": "^6.2.1",
         "@types/react-syntax-highlighter": "^15.5.13",
+        "@types/three": "^0.184.1",
         "ace-builds": "^1.43.0",
         "aos": "^2.3.4",
         "appwrite": "^18.1.1",
@@ -52,6 +53,7 @@
         "socket.io": "^4.8.1",
         "socket.io-client": "^4.8.1",
         "tailwind-merge": "^3.3.1",
+        "three": "^0.184.0",
         "uuid": "^11.1.0"
       },
       "devDependencies": {
@@ -110,6 +112,12 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@dimforge/rapier3d-compat": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@dimforge/rapier3d-compat/-/rapier3d-compat-0.12.0.tgz",
+      "integrity": "sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow==",
+      "license": "Apache-2.0"
+    },
     "node_modules/@emnapi/core": {
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.4.3.tgz",
@@ -2587,6 +2595,12 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@tweenjs/tween.js": {
+      "version": "23.1.3",
+      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.3.tgz",
+      "integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==",
+      "license": "MIT"
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.9.0.tgz",
@@ -2878,6 +2892,26 @@
         "@types/send": "*"
       }
     },
+    "node_modules/@types/stats.js": {
+      "version": "0.17.4",
+      "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.4.tgz",
+      "integrity": "sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/three": {
+      "version": "0.184.1",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.184.1.tgz",
+      "integrity": "sha512-6q4VdiqVsrTRqmk62/BnlcAvIrnDM0zf2ZDVKI5kZiniWrSaOHaQzmbp+BNzoggc/8tgW412pL//wZIxu2PPTA==",
+      "license": "MIT",
+      "dependencies": {
+        "@dimforge/rapier3d-compat": "~0.12.0",
+        "@tweenjs/tween.js": "~23.1.3",
+        "@types/stats.js": "*",
+        "@types/webxr": ">=0.5.17",
+        "fflate": "~0.8.2",
+        "meshoptimizer": "~1.1.1"
+      }
+    },
     "node_modules/@types/tough-cookie": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz",
@@ -2903,6 +2937,12 @@
       "integrity": "sha512-CiJJvcRtIgzadHCYXw7dqEnMNRjhGZlYK05Mj9OyktqV8uVT8fD2BFOB7S1uwBE3Kj2Z+4UyPmFw/Ixgw/LAlA==",
       "license": "MIT"
     },
+    "node_modules/@types/webxr": {
+      "version": "0.5.24",
+      "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.24.tgz",
+      "integrity": "sha512-h8fgEd/DpoS9CBrjEQXR+dIDraopAEfu4wYVNY2tEPwk60stPWhvZMf4Foo5FakuQ7HFZoa8WceaWFervK2Ovg==",
+      "license": "MIT"
+    },
     "node_modules/@types/whatwg-url": {
       "version": "11.0.5",
       "resolved": "https://registry.npmjs.org/@types/whatwg-url/-/whatwg-url-11.0.5.tgz",
@@ -5793,6 +5833,12 @@
         "node": "^12.20 || >= 14.13"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.3.tgz",
+      "integrity": "sha512-tbZNuJrLwGUp3zshBtdy4W+ORxZuIh8a5ilyIEQDC5rY1f3U20JMry0Ll3WBzU58EZKsEuJFXhb5gwv8CsPvgA==",
+      "license": "MIT"
+    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -8553,6 +8599,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/meshoptimizer": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-1.1.1.tgz",
+      "integrity": "sha512-oRFNWJRDA/WTrVj7NWvqa5HqE1t9MYDj2VaWirQCzCCrAd2GHrqR/sQezCxiWATPNlKTcRaPRHPJwIRoPBAp5g==",
+      "license": "MIT"
+    },
     "node_modules/micromark": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.2.tgz",
@@ -11602,6 +11654,12 @@
         "webidl-conversions": "^3.0.0"
       }
     },
+    "node_modules/three": {
+      "version": "0.184.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.184.0.tgz",
+      "integrity": "sha512-wtTRjG92pM5eUg/KuUnHsqSAlPM296brTOcLgMRqEeylYTh/CdtvKUvCyyCQTzFuStieWxvZb8mVTMvdPyUpxg==",
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.14",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
diff --git a/package.json b/package.json
index 8f79b97..b56bc7b 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@reduxjs/toolkit": "^2.8.2",
     "@tinymce/tinymce-react": "^6.2.1",
     "@types/react-syntax-highlighter": "^15.5.13",
+    "@types/three": "^0.184.1",
     "ace-builds": "^1.43.0",
     "aos": "^2.3.4",
     "appwrite": "^18.1.1",
@@ -53,6 +54,7 @@
     "socket.io": "^4.8.1",
     "socket.io-client": "^4.8.1",
     "tailwind-merge": "^3.3.1",
+    "three": "^0.184.0",
     "uuid": "^11.1.0"
   },
   "devDependencies": {