feat: implement 3D components and create a coming soon page with a memory match game

src/components/LayoutContent.tsx

@@ -9,7 +9,7 @@ interface LayoutContentProps {
 
 export default function LayoutContent({ children }: LayoutContentProps) {
   const pathname = usePathname();
-  const showSidebar = pathname !== "/" && pathname !== "/login";
+  const showSidebar = pathname !== "/" && pathname !== "/login" && pathname !== "/coming-soon";
   return (
     <>
       {showSidebar && <Sidebar />}

src/components/ui/3d/CardIcon3D.tsx

@@ -0,0 +1,97 @@
+'use client';
+import { useRef } from 'react';
+import { Canvas, useFrame } from '@react-three/fiber';
+import { Float, Torus, Cylinder, Box, Octahedron, MeshTransmissionMaterial } from '@react-three/drei';
+import * as THREE from 'three';
+
+function BikeIcon() {
+  const mesh = useRef<THREE.Mesh>(null);
+  useFrame((_, delta) => {
+    if (mesh.current) {
+      mesh.current.rotation.y += delta;
+      mesh.current.rotation.x += delta * 0.5;
+    }
+  });
+  return (
+    <Float floatIntensity={2} speed={2}>
+      <Torus ref={mesh} args={[1.2, 0.4, 16, 32]} rotation={[Math.PI / 2, 0, 0]}>
+        <meshStandardMaterial color="#f97316" roughness={0.1} metalness={0.8} />
+      </Torus>
+    </Float>
+  );
+}
+
+function InvestorIcon() {
+  const mesh = useRef<THREE.Mesh>(null);
+  useFrame((_, delta) => {
+    if (mesh.current) {
+      mesh.current.rotation.y += delta * 1.5;
+    }
+  });
+  return (
+    <Float floatIntensity={2} speed={2}>
+      <Cylinder ref={mesh} args={[1.2, 1.2, 0.4, 32]} rotation={[Math.PI / 2, 0, 0]}>
+        <meshStandardMaterial color="#eab308" roughness={0.2} metalness={0.9} />
+      </Cylinder>
+    </Float>
+  );
+}
+
+function SwapIcon() {
+  const mesh = useRef<THREE.Mesh>(null);
+  useFrame((_, delta) => {
+    if (mesh.current) {
+      mesh.current.rotation.x += delta;
+      mesh.current.rotation.y += delta * 1.2;
+    }
+  });
+  return (
+    <Float floatIntensity={2} speed={2}>
+      <Box ref={mesh} args={[1.5, 1.5, 1.5]}>
+        <MeshTransmissionMaterial 
+          color="#a855f7" 
+          thickness={0.5} 
+          roughness={0.1}
+          transmission={0.9} 
+          ior={1.5} 
+        />
+      </Box>
+      <Box args={[0.8, 0.8, 0.8]}>
+        <meshStandardMaterial color="#d8b4fe" emissive="#a855f7" emissiveIntensity={0.5} />
+      </Box>
+    </Float>
+  );
+}
+
+function MerchantIcon() {
+  const mesh = useRef<THREE.Mesh>(null);
+  useFrame((_, delta) => {
+    if (mesh.current) {
+      mesh.current.rotation.x += delta * 0.5;
+      mesh.current.rotation.y += delta;
+    }
+  });
+  return (
+    <Float floatIntensity={2} speed={2}>
+      <Octahedron ref={mesh} args={[1.5]}>
+        <meshStandardMaterial color="#00bc84" roughness={0.1} metalness={0.7} />
+      </Octahedron>
+    </Float>
+  );
+}
+
+export default function CardIcon3D({ type }: { type: 'bike' | 'investor' | 'swap' | 'merchant' }) {
+  return (
+    <div className="w-full h-full relative z-10 transition-transform duration-300 group-hover:scale-125">
+      <Canvas camera={{ position: [0, 0, 4], fov: 50 }}>
+        <ambientLight intensity={0.5} />
+        <directionalLight position={[5, 5, 5]} intensity={1} />
+        <pointLight position={[-5, -5, -5]} intensity={0.5} />
+        {type === 'bike' && <BikeIcon />}
+        {type === 'investor' && <InvestorIcon />}
+        {type === 'swap' && <SwapIcon />}
+        {type === 'merchant' && <MerchantIcon />}
+      </Canvas>
+    </div>
+  );
+}

src/components/ui/3d/HeroBackground3D.tsx

@@ -0,0 +1,65 @@
+'use client';
+import { useRef } from 'react';
+import { Canvas, useFrame } from '@react-three/fiber';
+import { Float, Box, Cylinder } from '@react-three/drei';
+import * as THREE from 'three';
+
+function StylizedScooter() {
+  const group = useRef<THREE.Group>(null);
+
+  useFrame((state, delta) => {
+    if (group.current) {
+      group.current.rotation.y += delta * 0.2;
+      group.current.rotation.z = Math.sin(state.clock.elapsedTime * 0.5) * 0.05;
+    }
+  });
+
+  return (
+    <Float speed={2} rotationIntensity={0.5} floatIntensity={1.5}>
+      <group ref={group} position={[2, 0, -2]} scale={1.2} rotation={[0.2, -0.5, 0]}>
+        {/* Main Deck */}
+        <Box args={[4, 0.3, 1]} position={[0, 0, 0]}>
+          <meshStandardMaterial color="#334155" roughness={0.4} metalness={0.6} />
+        </Box>
+        
+        {/* Front Wheel */}
+        <Cylinder args={[0.8, 0.8, 0.4, 32]} rotation={[Math.PI / 2, 0, 0]} position={[2, 0, 0]}>
+          <meshStandardMaterial color="#f97316" roughness={0.2} metalness={0.8} />
+        </Cylinder>
+        
+        {/* Rear Wheel */}
+        <Cylinder args={[0.8, 0.8, 0.4, 32]} rotation={[Math.PI / 2, 0, 0]} position={[-2, 0, 0]}>
+          <meshStandardMaterial color="#f97316" roughness={0.2} metalness={0.8} />
+        </Cylinder>
+
+        {/* Steering Column */}
+        <Cylinder args={[0.1, 0.1, 3, 16]} position={[1.5, 1.5, 0]} rotation={[0, 0, -0.2]}>
+          <meshStandardMaterial color="#cbd5e1" roughness={0.3} metalness={0.9} />
+        </Cylinder>
+
+        {/* Handlebars */}
+        <Box args={[0.2, 1.5, 0.2]} position={[1.2, 3, 0]} rotation={[Math.PI / 2, 0, 0]}>
+          <meshStandardMaterial color="#0f172a" roughness={0.8} />
+        </Box>
+
+        {/* Accent / Battery block */}
+        <Box args={[1.5, 0.6, 1.1]} position={[-0.5, 0.4, 0]}>
+          <meshStandardMaterial color="#00bc84" emissive="#00bc84" emissiveIntensity={0.5} roughness={0.2} />
+        </Box>
+      </group>
+    </Float>
+  );
+}
+
+export default function HeroBackground3D() {
+  return (
+    <div className="absolute inset-0 pointer-events-none z-0 overflow-hidden">
+      <Canvas camera={{ position: [0, 0, 8], fov: 45 }}>
+        <ambientLight intensity={0.5} />
+        <directionalLight position={[10, 10, 5]} intensity={1} />
+        <directionalLight position={[-10, -10, -5]} intensity={0.5} color="#00bc84" />
+        <StylizedScooter />
+      </Canvas>
+    </div>
+  );
+}