Merge version_2 into main

Merge version_2 into main

src/app/page.tsx

@@ -2,10 +2,10 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCTA from '@/components/sections/contact/ContactCTA';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FaqBase from '@/components/sections/faq/FaqBase';
 import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
 import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
@@ -31,25 +31,15 @@ export default function LandingPage() {
       <NavbarStyleCentered
       navItems={[
         {
-          name: "Home",
-          id: "hero",
-        },
+          name: "Home",          id: "hero"},
         {
-          name: "About",
-          id: "about",
-        },
+          name: "About",          id: "about"},
         {
-          name: "Features",
-          id: "features",
-        },
+          name: "Features",          id: "features"},
         {
-          name: "Testimonials",
-          id: "testimonials",
-        },
+          name: "Testimonials",          id: "testimonials"},
         {
-          name: "FAQ",
-          id: "faq",
-        },
+          name: "FAQ",          id: "faq"},
       ]}
       brandName="Stylelabs.AI"
     />
@@ -58,41 +48,26 @@ export default function LandingPage() {
   <div id="hero" data-section="hero">
       <HeroBillboardGallery
       background={{
-        variant: "sparkles-gradient",
-      }}
+        variant: "sparkles-gradient"}}
       title="Your Closet, Reimagined by AI."
       description="Create, customize, and curate your style combinations manually or let our AI generate the perfect look for you."
       buttons={[
         {
-          text: "Get Started",
-          href: "#",
-        },
+          text: "Get Started",          href: "#"},
       ]}
       mediaItems={[
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/futuristic-store-with-abstract-concept-architecture_23-2150861936.jpg",
-          imageAlt: "AI Fashion App Interface",
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/futuristic-store-with-abstract-concept-architecture_23-2150861936.jpg?_wi=1",          imageAlt: "AI Fashion App Interface"},
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-stylish-woman-with-red-lips_158538-4181.jpg",
-          imageAlt: "Fashion Model",
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-stylish-woman-with-red-lips_158538-4181.jpg",          imageAlt: "Fashion Model"},
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-tattooed-person_23-2149563294.jpg",
-          imageAlt: "Mobile App UI",
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-tattooed-person_23-2149563294.jpg",          imageAlt: "Mobile App UI"},
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-posing-2000-s-fashion-style_23-2149870107.jpg",
-          imageAlt: "Clothing Collection",
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-posing-2000-s-fashion-style_23-2149870107.jpg",          imageAlt: "Clothing Collection"},
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-unknown-woman-posing-indoors_23-2149551297.jpg",
-          imageAlt: "Fashion Studio",
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-unknown-woman-posing-indoors_23-2149551297.jpg",          imageAlt: "Fashion Studio"},
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-fashionable-robot_23-2151845047.jpg",
-          imageAlt: "Digital Runway",
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/portrait-fashionable-robot_23-2151845047.jpg",          imageAlt: "Digital Runway"},
       ]}
       mediaAnimation="blur-reveal"
     />
@@ -103,8 +78,7 @@ export default function LandingPage() {
       useInvertedBackground={false}
       title="Defining the Future of Style"
       description={[
-        "Stylelabs.AI empowers you to become your own personal stylist. By merging cutting-edge AI technology with your personal wardrobe, we create infinite possibilities for dress combinations tailored specifically to your taste.",
-      ]}
+        "Stylelabs.AI empowers you to become your own personal stylist. By merging cutting-edge AI technology with your personal wardrobe, we create infinite possibilities for dress combinations tailored specifically to your taste."]}
     />
   </div>
 
@@ -116,19 +90,13 @@ export default function LandingPage() {
       features={[
         {
           icon: Zap,
-          title: "Instant AI Styling",
-          description: "Generate perfect outfit combinations in seconds.",
-        },
+          title: "Instant AI Styling",          description: "Generate perfect outfit combinations in seconds."},
         {
           icon: Layout,
-          title: "Smart Closet Management",
-          description: "Digitize your wardrobe and organize with ease.",
-        },
+          title: "Smart Closet Management",          description: "Digitize your wardrobe and organize with ease."},
         {
           icon: TrendingUp,
-          title: "Trend Analytics",
-          description: "Stay ahead of fashion trends with AI-driven insights.",
-        },
+          title: "Trend Analytics",          description: "Stay ahead of fashion trends with AI-driven insights."},
       ]}
       title="Smart Features for Every Style"
       description="Unlock a new level of fashion creativity with our advanced platform features."
@@ -141,45 +109,15 @@ export default function LandingPage() {
       useInvertedBackground={false}
       testimonials={[
         {
-          id: "1",
-          title: "Game Changer!",
-          quote: "Stylelabs.AI saved me so much time in the morning.",
-          name: "Sarah J.",
-          role: "Fashion Blogger",
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-transgender-wearing-necklace_23-2149105424.jpg",
-        },
+          id: "1",          title: "Game Changer!",          quote: "Stylelabs.AI saved me so much time in the morning.",          name: "Sarah J.",          role: "Fashion Blogger",          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-transgender-wearing-necklace_23-2149105424.jpg"},
         {
-          id: "2",
-          title: "Incredible Tech",
-          quote: "The AI styling is shockingly accurate to my personal taste.",
-          name: "Michael C.",
-          role: "Tech Entrepreneur",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-serious-male-boss-has-grumpy-expression-being-annoyed-with-workers_273609-8728.jpg",
-        },
+          id: "2",          title: "Incredible Tech",          quote: "The AI styling is shockingly accurate to my personal taste.",          name: "Michael C.",          role: "Tech Entrepreneur",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-serious-male-boss-has-grumpy-expression-being-annoyed-with-workers_273609-8728.jpg"},
         {
-          id: "3",
-          title: "Pure Magic",
-          quote: "I found combinations I never would have thought of on my own.",
-          name: "Emily R.",
-          role: "Creative Director",
-          imageSrc: "http://img.b2bpic.net/free-photo/male-product-photographer-doing-his-job-studio_23-2148970192.jpg",
-        },
+          id: "3",          title: "Pure Magic",          quote: "I found combinations I never would have thought of on my own.",          name: "Emily R.",          role: "Creative Director",          imageSrc: "http://img.b2bpic.net/free-photo/male-product-photographer-doing-his-job-studio_23-2148970192.jpg"},
         {
-          id: "4",
-          title: "Must Have App",
-          quote: "My wardrobe feels brand new again, thanks to this.",
-          name: "David K.",
-          role: "Customer",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-smiling-model-dressed-summer-clothes-trendy-girl-posing-street-funny-positive-woman-having-fun_158538-6285.jpg",
-        },
+          id: "4",          title: "Must Have App",          quote: "My wardrobe feels brand new again, thanks to this.",          name: "David K.",          role: "Customer",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-smiling-model-dressed-summer-clothes-trendy-girl-posing-street-funny-positive-woman-having-fun_158538-6285.jpg"},
         {
-          id: "5",
-          title: "Perfect Style",
-          quote: "I love how easy it is to manage my digital closet.",
-          name: "Anna S.",
-          role: "Fashion Consultant",
-          imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-redhead-bearded-male-dressed-suit-posing-grey-background_613910-11505.jpg",
-        },
+          id: "5",          title: "Perfect Style",          quote: "I love how easy it is to manage my digital closet.",          name: "Anna S.",          role: "Fashion Consultant",          imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-redhead-bearded-male-dressed-suit-posing-grey-background_613910-11505.jpg"},
       ]}
       title="Loved by Fashion Enthusiasts"
       description="See why thousands trust Stylelabs.AI for their daily outfit curation."
@@ -192,20 +130,11 @@ export default function LandingPage() {
       useInvertedBackground={false}
       faqs={[
         {
-          id: "q1",
-          title: "How does the AI style work?",
-          content: "Our AI analyzes your wardrobe items and preferences to suggest compatible combinations.",
-        },
+          id: "q1",          title: "How does the AI style work?",          content: "Our AI analyzes your wardrobe items and preferences to suggest compatible combinations."},
         {
-          id: "q2",
-          title: "Can I manually style outfits?",
-          content: "Absolutely! You can manually mix and match your items at any time.",
-        },
+          id: "q2",          title: "Can I manually style outfits?",          content: "Absolutely! You can manually mix and match your items at any time."},
         {
-          id: "q3",
-          title: "Is my wardrobe data secure?",
-          content: "Yes, we prioritize your data privacy and security.",
-        },
+          id: "q3",          title: "Is my wardrobe data secure?",          content: "Yes, we prioritize your data privacy and security."},
       ]}
       title="Frequently Asked Questions"
       description="Answers to common questions about Stylelabs.AI."
@@ -214,57 +143,43 @@ export default function LandingPage() {
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactCTA
-      useInvertedBackground={false}
-      background={{
-        variant: "plain",
-      }}
+      <ContactSplit
       tag="Get in touch"
       title="Ready to redefine your style?"
       description="Join Stylelabs.AI and transform your wardrobe today."
-      buttons={[
-        {
-          text: "Sign Up Now",
-          href: "#",
-        },
-      ]}
+      background={{ variant: "sparkles-gradient" }}
+      useInvertedBackground={true}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterBaseCard
+      <FooterMedia
       logoText="Stylelabs.AI"
+      imageSrc="http://img.b2bpic.net/free-photo/futuristic-store-with-abstract-concept-architecture_23-2150861936.jpg?_wi=2"
       columns={[
         {
-          title: "Product",
-          items: [
-            {
-              label: "Features",
-              href: "#features",
-            },
-            {
-              label: "Pricing",
-              href: "#",
-            },
+          title: "Product",          items: [
+            { label: "Features", href: "#features" },
+            { label: "Pricing", href: "#" },
           ],
         },
         {
-          title: "Company",
-          items: [
-            {
-              label: "About",
-              href: "#about",
-            },
-            {
-              label: "Contact",
-              href: "#contact",
-            },
+          title: "Company",          items: [
+            { label: "About", href: "#about" },
+            { label: "Careers", href: "#" },
+            { label: "Contact", href: "#contact" },
           ],
         },
+        {
+          title: "Legal",          items: [
+            { label: "Privacy Policy", href: "#" },
+            { label: "Terms of Service", href: "#" },
+          ],
+        }
       ]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #000000;
-  --card: #0c0c0c;
-  --foreground: #ffffff;
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #ffffffe6;
   --primary-cta: #106EFB;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #000000;
+  --secondary-cta: #1a1a1a;
   --secondary-cta-text: #ffffff;
-  --accent: #535353;
-  --background-accent: #106EFB;
+  --accent: #106EFB;
+  --background-accent: #1a1a1a;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);