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 FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
+import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
-import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
+import MetricCardFourteen from "@/components/sections/metrics/MetricCardFourteen";
-import FaqDouble from "@/components/sections/faq/FaqDouble";
+import FaqBase from "@/components/sections/faq/FaqBase";
-import ContactSplit from "@/components/sections/contact/ContactSplit";
+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,69 +38,65 @@ export default function CryptoWarfarePage() {
         </div>
 
         <div id="arsenal">
-          <FeatureCardOne
+          <FeatureCardTwentyFive
             title="THE CORE ARSENAL"
-            description="What is inside the V1.0 Starter Pack."
+            description="Professional-grade tactics for market survival."
-            gridVariant="bento-grid"
             animationType="depth-3d"
             textboxLayout="split"
             useInvertedBackground={false}
             features={[
-              { title: "Psychology", description: "Master your brain or the market destroys it.", imageSrc: "https://img.b2bpic.net/free-photo/brain-concept-with-circuits_23-2149023785.jpg" },
+              { title: "Psychology", description: "Master your brain, market discipline, and emotional control.", icon: Brain, mediaItems: [{ imageSrc: "" }, { imageSrc: "" }] },
-              { title: "Risk Management", description: "Protecting your bankroll is survival.", imageSrc: "https://img.b2bpic.net/free-photo/shield-protection-concept_23-2149154638.jpg" },
+              { title: "Risk Management", description: "Capital preservation, position sizing, and stop loss logic.", icon: ShieldAlert, mediaItems: [{ imageSrc: "" }, { imageSrc: "" }] },
-              { title: "Tactical TA", description: "Forget indicator overload.", imageSrc: "https://img.b2bpic.net/free-photo/analysis-concept_23-2150372444.jpg" },
+              { title: "Tactical TA", description: "Supply & Demand, no noise trading, and precision entry.", icon: Target, mediaItems: [{ imageSrc: "" }, { imageSrc: "" }] },
-              { title: "Combat Rules", description: "Specific rules for the battlefield.", imageSrc: "https://img.b2bpic.net/free-photo/data-network-background_53876-160218.jpg" }
+              { 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">
-          <FaqDouble
+          <FaqBase
-            title="COMMON QUESTIONS"
+            title="CORE QUESTIONS"
-            description="Everything you need to know before joining the elite ranks."
+            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 curriculum for professional traders." },
+              { id: "1", title: "Is this a get rich quick scheme?", content: "Absolutely not. This is a rigorous curriculum for serious professional traders." },
-              { id: "2", title: "Do I need a huge budget?", content: "No, discipline matters more than capital." }
+              { id: "2", title: "Do I need a huge budget?", content: "Capital size is secondary; discipline is the primary engine for your growth." }
             ]}
           />
         </div>
 
         <div id="contact">
-          <ContactSplit
+          <ContactText
-            tag="// READY TO UPGRADE? //"
+            text="STOP FEEDING THE MACHINE. GET THE MANUAL. JOIN THE 5%."
-            title="STOP FEEDING THE MACHINE"
+            background={{ variant: "sparkles-gradient" }}
-            description="Get the manual. Build the edge. Join the 5%."
+            buttons={[{ text: "SECURE ACCESS", href: "#" }]}
-            background={{ variant: "animated-grid" }}
             useInvertedBackground={false}
-            onSubmit={(email) => console.log(email)}
           />
         </div>
 
-        <FooterBaseReveal
+        <FooterLogoEmphasis
           logoText="CRYPTO WARFARE"
           columns={[
-            { title: "Company", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] }
+            { items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] }
           ]}
         />
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-inter-tight), sans-serif;
+  font-family: var(--font-montserrat), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-inter-tight), sans-serif;
+  font-family: var(--font-montserrat), sans-serif;
 }

src/app/styles/variables.css

@@ -13,12 +13,12 @@
   --background: #0a0a0a;
   --card: #161616;
   --foreground: #f0f0f0;
-  --primary-cta: #ffffff;
+  --primary-cta: #FFD700;
   --primary-cta-text: #0a0a0a;
   --secondary-cta: #1e1e1e;
   --secondary-cta-text: #e0e0e0;
-  --accent: #d0d0d0;
+  --accent: #00FF41;
-  --background-accent: #9a9a9a;
+  --background-accent: #1f2937;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);