Update src/app/page.tsx

Merge version_7 into main

src/app/page.tsx

@@ -2,7 +2,7 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
 import TextAbout from '@/components/sections/about/TextAbout';
 import FeatureBento from '@/components/sections/feature/FeatureBento';
 import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
@@ -12,6 +12,53 @@ import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
 import FaqSplitText from '@/components/sections/faq/FaqSplitText';
 import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 import { Brain, Clock, Target, Zap, Flame, Leaf, Moon, Heart, Mountain, Compass, AlertCircle, CheckCircle, Sparkles, TrendingDown } from 'lucide-react';
+import { Canvas } from '@react-three/fiber';
+import { OrbitControls, PerspectiveCamera } from '@react-three/drei';
+import * as THREE from 'three';
+
+// 3D Tree Component
+function TreeModel() {
+  const trunkRef = React.useRef<THREE.Mesh>(null);
+  const leavesRef = React.useRef<THREE.Mesh>(null);
+
+  React.useEffect(() => {
+    if (trunkRef.current) {
+      trunkRef.current.rotation.y += 0.005;
+    }
+    if (leavesRef.current) {
+      leavesRef.current.rotation.y += 0.003;
+    }
+  });
+
+  return (
+    <group>
+      {/* Trunk */}
+      <mesh ref={trunkRef} position={[0, -0.5, 0]}>
+        <cylinderGeometry args={[0.3, 0.4, 2, 8]} />
+        <meshStandardMaterial color="#8B4513" roughness={0.8} />
+      </mesh>
+
+      {/* Foliage - Main Crown */}
+      <mesh ref={leavesRef} position={[0, 1.2, 0]}>
+        <coneGeometry args={[1.5, 2.5, 32]} />
+        <meshStandardMaterial color="#228B22" roughness={0.6} metalness={0.1} />
+      </mesh>
+
+      {/* Additional foliage layers for depth */}
+      <mesh position={[0, 0.8, 0]}>
+        <sphereGeometry args={[1.2, 32, 32]} />
+        <meshStandardMaterial color="#2d5016" roughness={0.7} metalness={0.05} />
+      </mesh>
+
+      <mesh position={[0, 1.8, 0]}>
+        <sphereGeometry args={[0.9, 32, 32]} />
+        <meshStandardMaterial color="#3cb371" roughness={0.6} metalness={0.1} />
+      </mesh>
+    </group>
+  );
+}
+
+import React from 'react';
 
 export default function LandingPage() {
   return (
@@ -41,35 +88,48 @@ export default function LandingPage() {
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroSplitKpi
+        <div style={{
+          position: 'relative',
+          width: '100%',
+          height: '600px',
+          marginBottom: '2rem',
+          borderRadius: '12px',
+          overflow: 'hidden',
+          background: 'linear-gradient(135deg, rgba(40, 139, 34, 0.1) 0%, rgba(50, 205, 50, 0.05) 100%)'
+        }}>
+          <Canvas
+            style={{
+              width: '100%',
+              height: '100%'
+            }}
+            camera={{ position: [0, 0, 5], fov: 50 }}
+          >
+            <PerspectiveCamera makeDefault position={[0, 0, 5]} />
+            <ambientLight intensity={1.2} />
+            <pointLight position={[10, 10, 10]} intensity={1} />
+            <pointLight position={[-10, -10, 5]} intensity={0.5} color="#87CEEB" />
+            <TreeModel />
+            <OrbitControls
+              enableZoom={true}
+              enablePan={true}
+              enableRotate={true}
+              autoRotate={true}
+              autoRotateSpeed={3}
+            />
+          </Canvas>
+        </div>
+        <HeroBillboard
           title="Return to What You Were Built For"
           description="A complete system for men who want to live at full capacity — physically, mentally, spiritually, and in alignment with nature. Master the fundamentals that ancestral wisdom and modern science both confirm work."
+          background={{ variant: "gradient-bars" }}
           tag="The Roots Method"
           tagAnimation="slide-up"
-          background={{ variant: "radial-gradient" }}
-          kpis={[
-            { value: "5", label: "Core Modules" },
-            { value: "25+", label: "In-Depth Lessons" },
-            { value: "∞", label: "Lifetime Access" }
-          ]}
-          enableKpiAnimation={true}
           buttons={[
-            { text: "Begin Your Journey", href: "#pricing" },
+            { text: "Enroll Now", href: "#pricing" },
             { text: "Explore Modules", href: "#modules" }
           ]}
           buttonAnimation="slide-up"
-          videoSrc="https://media.vidyard.com/watch/LvPJ5GHqRXRDdKC3XDRfWA/default.mp4"
+          mediaAnimation="opacity"
-          videoAriaLabel="Roots forest nature video"
-          mediaAnimation="blur-reveal"
-          marqueeItems={[
-            { type: "text", text: "Move Like Your Body Was Designed" },
-            { type: "text", text: "Eat for Energy & Longevity" },
-            { type: "text", text: "Sleep Deep & Wake Powerful" },
-            { type: "text", text: "Master Your Mind" },
-            { type: "text", text: "Connect to Something Deeper" }
-          ]}
-          marqueeSpeed={35}
-          showMarqueeCard={true}
         />
       </div>