weird fkn globe

components/3d/HeroModel.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import React, { useRef } from 'react';
+import { Canvas, useFrame } from '@react-three/fiber';
+import { OrbitControls, PerspectiveCamera, useTexture } from '@react-three/drei';
+import * as THREE from 'three';
+
+function RotatingCube() {
+  const meshRef = useRef<THREE.Mesh>(null);
+  
+  // Animation loop
+  useFrame((state, delta) => {
+    if (meshRef.current) {
+      meshRef.current.rotation.x += delta * 0.2;
+      meshRef.current.rotation.y += delta * 0.3;
+    }
+  });
+
+  return (
+    <mesh ref={meshRef} position={[0, 0, 0]} castShadow receiveShadow>
+      <boxGeometry args={[2, 2, 2]} />
+      <meshStandardMaterial 
+        color="#D53F8C" 
+        metalness={0.6}
+        roughness={0.2}
+        emissive="#300020"
+        emissiveIntensity={0.3}
+      />
+    </mesh>
+  );
+}
+
+function FloatingGlobe() {
+  const meshRef = useRef<THREE.Mesh>(null);
+  
+  useFrame((state, delta) => {
+    if (meshRef.current) {
+      meshRef.current.rotation.y += delta * 0.1;
+      meshRef.current.position.y = Math.sin(state.clock.elapsedTime * 0.5) * 0.2;
+    }
+  });
+
+  return (
+    <mesh ref={meshRef} position={[0, 0, 0]} castShadow>
+      <sphereGeometry args={[1.5, 64, 64]} />
+      <meshStandardMaterial 
+        color="#111111"
+        metalness={0.8}
+        roughness={0.1}
+        emissive="#D53F8C"
+        emissiveIntensity={0.2}
+        wireframe={true}
+      />
+    </mesh>
+  );
+}
+
+export default function HeroModel() {
+  return (
+    <div className="w-full h-[300px] md:h-[400px]">
+      <Canvas shadows dpr={[1, 2]}>
+        <ambientLight intensity={0.5} />
+        <directionalLight 
+          position={[10, 10, 5]} 
+          intensity={1} 
+          castShadow 
+          shadow-mapSize-width={1024} 
+          shadow-mapSize-height={1024}
+        />
+        <pointLight position={[-10, -10, -10]} color="#D53F8C" intensity={1} />
+        
+        <FloatingGlobe />
+        
+        <PerspectiveCamera makeDefault position={[0, 0, 6]} fov={40} />
+        <OrbitControls 
+          enableZoom={false}
+          enablePan={false}
+          rotateSpeed={0.5}
+          autoRotate
+          autoRotateSpeed={0.5}
+        />
+      </Canvas>
+    </div>
+  );
+} 

components/3d/HeroSection.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import dynamic from 'next/dynamic';
+import { Suspense } from 'react';
+import { ArrowRight } from 'lucide-react';
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+
+// Dynamically import the 3D component to avoid SSR issues
+const HeroModel = dynamic(() => import('@/components/3d/HeroModel'), { 
+  ssr: false,
+  loading: () => <div className="w-full h-[300px] md:h-[400px] flex items-center justify-center">
+    <div className="animate-pulse text-pink-500">Loading 3D model...</div>
+  </div>
+});
+
+export default function HeroSection() {
+  return (
+    <section className="flex-1 py-20 md:py-32 px-6 md:px-10 flex flex-col items-center text-center space-y-10 bg-black">
+      <div className="space-y-4 max-w-3xl">
+        <h1 className="text-4xl md:text-6xl font-bold tracking-tighter">
+          Streamlined E-commerce <span className="text-[#D53F8C]">Management</span>
+        </h1>
+        <p className="text-xl md:text-2xl text-gray-400 max-w-2xl mx-auto">
+          Ember provides everything you need to manage your e-commerce business efficiently in one place, with secure cryptocurrency payments.
+        </p>
+      </div>
+      
+      {/* 3D Model */}
+      <div className="w-full max-w-xl my-8">
+        <Suspense fallback={<div className="h-[300px] w-full bg-gray-900 animate-pulse rounded-lg"></div>}>
+          <HeroModel />
+        </Suspense>
+      </div>
+      
+      <div className="flex flex-col sm:flex-row gap-4">
+        <Link href="/dashboard">
+          <Button size="lg" className="gap-2 bg-[#D53F8C] hover:bg-[#B83280] text-white border-0">
+            Go to Dashboard
+            <ArrowRight className="h-4 w-4" />
+          </Button>
+        </Link>
+        <Link href="/auth/register">
+          <Button size="lg" variant="outline" className="border-gray-800 text-white hover:bg-gray-900">
+            Create Account
+          </Button>
+        </Link>
+      </div>
+    </section>
+  );
+} 

components/3d/StatCard.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { useState, useRef, useEffect } from 'react';
+import { motion, useMotionValue, useSpring, useTransform } from 'framer-motion';
+
+interface StatCardProps {
+  title: string;
+  value: string;
+  className?: string;
+}
+
+export default function StatCard({ title, value, className = "" }: StatCardProps) {
+  const cardRef = useRef<HTMLDivElement>(null);
+  const [rotateX, setRotateX] = useState(0);
+  const [rotateY, setRotateY] = useState(0);
+
+  const x = useMotionValue(0);
+  const y = useMotionValue(0);
+
+  // Spring animations for smoother movement
+  const springX = useSpring(x, { stiffness: 150, damping: 20 });
+  const springY = useSpring(y, { stiffness: 150, damping: 20 });
+
+  // Transform mouse movement to rotation values
+  const rotateXOutput = useTransform(springY, [-0.5, 0.5], ["10deg", "-10deg"]);
+  const rotateYOutput = useTransform(springX, [-0.5, 0.5], ["-10deg", "10deg"]);
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!cardRef.current) return;
+    
+    const rect = cardRef.current.getBoundingClientRect();
+    
+    // Calculate mouse position relative to card (0-1)
+    const mouseX = (e.clientX - rect.left) / rect.width;
+    const mouseY = (e.clientY - rect.top) / rect.height;
+    
+    // Convert to -0.5 to 0.5 range
+    x.set(mouseX - 0.5);
+    y.set(mouseY - 0.5);
+  };
+
+  const handleMouseLeave = () => {
+    // Reset to neutral position when mouse leaves
+    x.set(0);
+    y.set(0);
+  };
+
+  return (
+    <motion.div
+      ref={cardRef}
+      className={`relative overflow-hidden rounded-xl p-8 bg-gradient-to-br from-gray-800 to-gray-900 backdrop-blur-sm border border-gray-700/50 shadow-xl flex flex-col justify-center ${className}`}
+      onMouseMove={handleMouseMove}
+      onMouseLeave={handleMouseLeave}
+      style={{
+        rotateX: rotateXOutput,
+        rotateY: rotateYOutput,
+        transformStyle: "preserve-3d",
+      }}
+      whileHover={{ scale: 1.03 }}
+      transition={{ duration: 0.2 }}
+    >
+      {/* Ambient light reflection */}
+      <div className="absolute inset-0 w-full h-full bg-gradient-to-tr from-pink-500/10 to-purple-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+      
+      <div style={{ transform: "translateZ(20px)" }} className="relative z-10">
+        <p className="text-gray-400 text-sm mb-1 font-medium">{title}</p>
+        <p className="text-3xl md:text-4xl font-bold text-white">{value}</p>
+      </div>
+      
+      {/* Shiny edge */}
+      <div className="absolute inset-0 rounded-xl overflow-hidden">
+        <div className="absolute inset-0 bg-gradient-to-r from-transparent via-pink-500/10 to-transparent opacity-0 group-hover:opacity-100 animate-shimmer" />
+      </div>
+    </motion.div>
+  );
+}