Update src/app/styles/variables.css

Merge version_3 into main

src/app/page.tsx

@@ -6,7 +6,7 @@ import { Zap, Shield, Award, Star, Mail, MapPin, Instagram, Twitter, Linkedin }
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FaqSplitText from '@/components/sections/faq/FaqSplitText';
 import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import FooterCard from '@/components/sections/footer/FooterCard';
 import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
 import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
@@ -19,13 +19,13 @@ export default function LandingPage() {
     <ThemeProvider
         defaultButtonVariant="text-shift"
         defaultTextAnimation="entrance-slide"
-        borderRadius="soft"
+        borderRadius="pill"
         contentWidth="medium"
-        sizing="medium"
-        background="floatingGradient"
-        cardStyle="gradient-bordered"
+        sizing="large"
+        background="noiseDiagonalGradient"
+        cardStyle="glass-elevated"
         primaryButtonStyle="primary-glow"
-        secondaryButtonStyle="solid"
+        secondaryButtonStyle="glass"
         headingFontWeight="extrabold"
     >
       <ReactLenis root>
@@ -61,14 +61,15 @@ export default function LandingPage() {
         { imageSrc: "http://img.b2bpic.net/free-photo/young-fit-man-beach-listening-music_273609-15935.jpg", imageAlt: "Model 3" },
         { imageSrc: "http://img.b2bpic.net/free-photo/top-view-kippah-with-candles_23-2148629964.jpg", imageAlt: "Model 2" },
       ]}
-      buttons={[{ text: "Shop Now", href: "#products" }]}
+      buttons={[{ text: "Shop Now", href: "#products" }]
+      }
     />
   </div>
 
   <div id="features" data-section="features">
       <FeatureCardTwentySix
       textboxLayout="default"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       features={[
         { title: "Breathability", description: "Micro-porous structure for maximum airflow.", imageSrc: "http://img.b2bpic.net/free-photo/brown-fabric_1122-375.jpg", buttonIcon: Zap },
         { title: "Precision Fit", description: "Ergonomic cuts for reduced drag.", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-fit-man-training_23-2150169384.jpg", buttonIcon: Shield },
@@ -100,7 +101,7 @@ export default function LandingPage() {
       <MetricCardEleven
       animationType="slide-up"
       textboxLayout="split"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       metrics={[
         { id: "m1", value: "15%", title: "Performance Increase", description: "Output boost.", imageSrc: "http://img.b2bpic.net/free-photo/3d-graph-computer-illustration_23-2151884856.jpg" },
         { id: "m2", value: "24h", title: "Recovery Time", description: "Faster metabolic recovery.", imageSrc: "http://img.b2bpic.net/free-photo/athletic-young-sportsman-listening-music-with-earphones_171337-8365.jpg" },
@@ -125,7 +126,7 @@ export default function LandingPage() {
       animationType="slide-up"
       textboxLayout="default"
       gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       members={[
         { id: "t1", name: "Alex Rivers", role: "Head of Design", description: "Future of sportswear.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-happy-man-with-basketball_23-2148239503.jpg" },
         { id: "t2", name: "Sarah Chen", role: "Lead Technologist", description: "Biomechanics specialist.", imageSrc: "http://img.b2bpic.net/free-photo/thinking-about-new-project-dress_329181-14370.jpg" },
@@ -145,7 +146,7 @@ export default function LandingPage() {
         { id: "f3", title: "How do I return items?", content: "We offer a 30-day hassle-free return policy for unworn items with original tags." },
       ]}
       faqsAnimation="slide-up"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
     />
   </div>
 
@@ -164,12 +165,12 @@ export default function LandingPage() {
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterBaseCard
+      <FooterCard
       logoText="BLACK GRAVITY"
-      columns={[
-        { title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Shipping", href: "#" }, { label: "Returns", href: "#" }] },
-        { title: "Brand", items: [{ label: "About Us", href: "#" }, { label: "Careers", href: "#" }, { label: "Press", href: "#" }] },
-        { title: "Socials", items: [{ label: "Instagram", href: "#" }, { label: "Twitter", href: "#" }, { label: "LinkedIn", href: "#" }] }
+      socialLinks={[
+        { icon: Instagram, href: "#", ariaLabel: "Instagram" },
+        { icon: Twitter, href: "#", ariaLabel: "Twitter" },
+        { icon: Linkedin, href: "#", ariaLabel: "LinkedIn" }
       ]}
       copyrightText="© 2025 | Black Gravity Performance Wear"
     />
@@ -177,4 +178,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0a0a0a;
-  --card: #121212;
+  --background: #000000;
+  --card: #101010;
   --foreground: #ffffff;
-  --primary-cta: #ffffff;
+  --primary-cta: #FF3366;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #1a1a1a;
+  --secondary-cta: #1A1A1A;
   --secondary-cta-text: #ffffff;
-  --accent: #333333;
-  --background-accent: #1a1a1a;
+  --accent: #33FFCC;
+  --background-accent: #1A1A1A;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);