Merge version_4 into main

Merge version_4 into main

src/app/page.tsx

@@ -10,8 +10,24 @@ import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import { AlertCircle, Anchor, Award, Cloud, Compass, Cpu, Globe, Infinity, Moon, Power, Rocket, Shield, Star, Sun, Target, Zap } from "lucide-react";
+import { useState, useEffect } from 'react';
 
 export default function LandingPage() {
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setLoading(false), 2000);
+    return () => clearTimeout(timer);
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="fixed inset-0 flex items-center justify-center bg-black text-white text-4xl animate-pulse">
+        Loading Cinematic Experience...
+      </div>
+    );
+  }
+
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
@@ -26,6 +42,9 @@ export default function LandingPage() {
       headingFontWeight="bold"
     >
       <ReactLenis root>
+        <audio autoPlay loop className="hidden">
+          <source src="/audio/cinematic-background.mp3" type="audio/mpeg" />
+        </audio>
         <div id="nav" data-section="nav">
           <NavbarLayoutFloatingOverlay
             navItems={[
@@ -41,9 +60,9 @@ export default function LandingPage() {
         <div id="hero" data-section="hero">
           <HeroLogoBillboard
             background={{ variant: "glowing-orb" }}
-            logoText="Step Into the Future"
-            description="Experience the next dimension of digital interaction. Bold, immersive, and built for tomorrow."
-            buttons={[{ text: "Explore Now", href: "#features" }]}
+            logoText="Master Your Digital Workflow"
+            description="Step into the future with our premier 3D immersive hero model. Experience precision, power, and design."
+            buttons={[{ text: "Explore Core", href: "#features" }, { text: "View Tech", href: "/tech" }]}
             imageSrc="http://img.b2bpic.net/free-photo/shoot-fantastic-alien_23-2151648314.jpg"
             mediaAnimation="slide-up"
           />
@@ -75,12 +94,8 @@ export default function LandingPage() {
                   { icon: Infinity, title: "Scaling", subtitle: "Infinite", detail: "Adaptive load" }
                 ]
               },
-              {
-                bentoComponent: "reveal-icon", icon: Rocket, title: "Quantum Drive", description: "Propel your business into the new era with adaptive propulsion systems."
-              },
-              {
-                bentoComponent: "reveal-icon", icon: Globe, title: "Universal Sync", description: "Synchronize your global operations with automated cross-platform integration."
-              }
+              { bentoComponent: "reveal-icon", icon: Rocket, title: "Quantum Drive", description: "Propel your business into the new era with adaptive propulsion systems." },
+              { bentoComponent: "reveal-icon", icon: Globe, title: "Universal Sync", description: "Synchronize your global operations with automated cross-platform integration." }
             ]}
             title="Core Modules"
             description="Unlock futuristic power modes and seamless performance across all your digital assets."
@@ -133,14 +148,8 @@ export default function LandingPage() {
             features={[
               {
                 title: "Interactive Mode", description: "Click to toggle your power mode for a personalized interface transformation.", bentoComponent: "phone", statusIcon: Power, alertIcon: AlertCircle, alertTitle: "Energy Build Up", alertMessage: "Ready for transformation", apps: [
-                  { name: "Mode 1", icon: Sun },
-                  { name: "Mode 2", icon: Moon },
-                  { name: "Mode 3", icon: Star },
-                  { name: "Mode 4", icon: Zap },
-                  { name: "Mode 5", icon: Cloud },
-                  { name: "Mode 6", icon: Compass },
-                  { name: "Mode 7", icon: Anchor },
-                  { name: "Mode 8", icon: Target }
+                  { name: "Mode 1", icon: Sun }, { name: "Mode 2", icon: Moon }, { name: "Mode 3", icon: Star }, { name: "Mode 4", icon: Zap },
+                  { name: "Mode 5", icon: Cloud }, { name: "Mode 6", icon: Compass }, { name: "Mode 7", icon: Anchor }, { name: "Mode 8", icon: Target }
                 ]
               }
             ]}
@@ -153,7 +162,7 @@ export default function LandingPage() {
           <ContactSplitForm
             useInvertedBackground={false}
             title="Get Connected"
-            description="Join the future. Leave your details and receive exclusive access."
+            description="Join the waitlist to receive your exclusive early-access invite."
             inputs={[
               { name: "email", type: "email", placeholder: "Email Address", required: true },
               { name: "name", type: "text", placeholder: "Name", required: true }
@@ -165,19 +174,8 @@ export default function LandingPage() {
         <div id="footer" data-section="footer">
           <FooterBase
             columns={[
-              {
-                title: "Navigation", items: [
-                  { label: "Hero", href: "#hero" },
-                  { label: "About", href: "#about" },
-                  { label: "Features", href: "#features" }
-                ]
-              },
-              {
-                title: "Legal", items: [
-                  { label: "Privacy", href: "#" },
-                  { label: "Terms", href: "#" }
-                ]
-              }
+              { title: "Navigation", items: [{ label: "Hero", href: "#hero" }, { label: "About", href: "#about" }, { label: "Features", href: "#features" }] },
+              { title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] }
             ]}
             logoText="FUTURE"
           />

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0a0a0a;
-  --card: #1a1a1a;
-  --foreground: #ffffffe6;
-  --primary-cta: #e6e6e6;
+  --background: #050505;
+  --card: #101010;
+  --foreground: #f0f0f0;
+  --primary-cta: #00d4ff;
   --primary-cta-text: #0a0a0a;
-  --secondary-cta: #1a1a1a;
+  --secondary-cta: #ff0055;
   --secondary-cta-text: #ffffffe6;
-  --accent: #737373;
-  --background-accent: #737373;
+  --accent: #ffcc00;
+  --background-accent: #1a1a1a;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);