Switch to version 4: modified src/app/styles/variables.css

Merge version_4 into main

src/app/page.tsx

@@ -4,11 +4,12 @@ import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
 import HeroBillboard from "@/components/sections/hero/HeroBillboard";
-import FeatureCardTwelve from "@/components/sections/feature/FeatureCardTwelve";
+import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
-import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
+import MetricCardFourteen from "@/components/sections/metrics/MetricCardFourteen";
-import FaqSplitText from "@/components/sections/faq/FaqSplitText";
+import FaqBase from "@/components/sections/faq/FaqBase";
 import ContactText from "@/components/sections/contact/ContactText";
-import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
+import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
+import { Brain, ShieldAlert, Target, ShieldCheck, HelpCircle } from "lucide-react";
 
 export default function CryptoWarfarePage() {
   return (
@@ -16,7 +17,7 @@ export default function CryptoWarfarePage() {
       <ReactLenis root>
         <NavbarStyleFullscreen
           navItems={[
-            { name: "The Truth", id: "truth" },
+            { name: "The Truth", id: "hero" },
             { name: "Arsenal", id: "arsenal" },
             { name: "Results", id: "results" },
             { name: "FAQ", id: "faq" }
@@ -37,41 +38,41 @@ export default function CryptoWarfarePage() {
         </div>
 
         <div id="arsenal">
-          <FeatureCardTwelve
+          <FeatureCardTwentyFive
             title="THE CORE ARSENAL"
             description="Professional-grade tactics for market survival."
-            animationType="scale-rotate"
+            animationType="depth-3d"
             textboxLayout="split"
             useInvertedBackground={false}
             features={[
-              { id: "1", label: "01", title: "Psychology", items: ["Master your brain", "Market discipline", "Emotional control"] },
+              { title: "Psychology", description: "Master your brain, market discipline, and emotional control.", icon: Brain, mediaItems: [{ imageSrc: "" }, { imageSrc: "" }] },
-              { id: "2", label: "02", title: "Risk Management", items: ["Capital preservation", "Position sizing", "Stop loss logic"] },
+              { title: "Risk Management", description: "Capital preservation, position sizing, and stop loss logic.", icon: ShieldAlert, mediaItems: [{ imageSrc: "" }, { imageSrc: "" }] },
-              { id: "3", label: "03", title: "Tactical TA", items: ["Supply & Demand", "No noise trading", "Precision entry"] },
+              { title: "Tactical TA", description: "Supply & Demand, no noise trading, and precision entry.", icon: Target, mediaItems: [{ imageSrc: "" }, { imageSrc: "" }] },
-              { id: "4", label: "04", title: "Combat Rules", items: ["Battlefield standards", "Systematic execution", "Rule adherence"] }
+              { title: "Combat Rules", description: "Battlefield standards, systematic execution, and rule adherence.", icon: ShieldCheck, mediaItems: [{ imageSrc: "" }, { imageSrc: "" }] }
             ]}
           />
         </div>
 
         <div id="results">
-          <MetricCardSeven
+          <MetricCardFourteen
             title="THE RESULTS ARE REAL"
-            description="Operating with precision, not luck."
+            tag="PERFORMANCE METRICS"
-            animationType="depth-3d"
+            metricsAnimation="blur-reveal"
-            textboxLayout="split"
             useInvertedBackground={false}
             metrics={[
-              { id: "1", value: "95%", title: "Casualties", items: ["Losses due to emotion", "Lack of strategy"] },
+              { id: "1", value: "95%", description: "Casualties due to emotion and lack of strategy" },
-              { id: "2", value: "5%", title: "Operators", items: ["Mathematical precision", "Cold execution"] },
+              { id: "2", value: "5%", description: "Operators using mathematical precision and cold execution" },
-              { id: "3", value: "0", title: "Shortcuts", items: ["No magic buttons", "Hard work required"] }
+              { id: "3", value: "0", description: "Shortcuts found; only hard work required" }
             ]}
           />
         </div>
 
         <div id="faq">
-          <FaqSplitText
+          <FaqBase
-            sideTitle="CORE QUESTIONS"
+            title="CORE QUESTIONS"
-            sideDescription="Get the clarity you need."
+            description="Get the clarity you need."
             faqsAnimation="blur-reveal"
+            textboxLayout="split"
             useInvertedBackground={false}
             faqs={[
               { id: "1", title: "Is this a get rich quick scheme?", content: "Absolutely not. This is a rigorous curriculum for serious professional traders." },
@@ -89,10 +90,10 @@ export default function CryptoWarfarePage() {
           />
         </div>
 
-        <FooterBaseReveal
+        <FooterLogoEmphasis
           logoText="CRYPTO WARFARE"
           columns={[
-            { title: "Company", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] }
+            { items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] }
           ]}
         />
       </ReactLenis>

src/app/styles/variables.css

@@ -13,11 +13,11 @@
   --background: #0a0a0a;
   --card: #161616;
   --foreground: #f0f0f0;
-  --primary-cta: #ffffff;
+  --primary-cta: #FFD700;
   --primary-cta-text: #0a0a0a;
   --secondary-cta: #1e1e1e;
   --secondary-cta-text: #e0e0e0;
-  --accent: #3b82f6;
+  --accent: #00FF41;
   --background-accent: #1f2937;
 
   /* text sizing - set by ThemeProvider */