Update src/app/styles/variables.css

Merge version_1 into main

src/app/page.tsx

@@ -2,15 +2,15 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactSplit from '@/components/sections/contact/ContactSplit';
-import FaqSplitText from '@/components/sections/faq/FaqSplitText';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FaqDouble from '@/components/sections/faq/FaqDouble';
 import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
-import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
 import HeroLogo from '@/components/sections/hero/HeroLogo';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import SplitAbout from '@/components/sections/about/SplitAbout';
-import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
+import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
 
 export default function LandingPage() {
   return (
@@ -105,63 +105,58 @@ export default function LandingPage() {
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardSixteen
-      animationType="slide-up"
+      <TestimonialCardFive
       textboxLayout="split"
       useInvertedBackground={false}
-      testimonials={[
-        { id: "t1", name: "Alex R.", role: "Creative", company: "Urban Edge", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/dark-blonde-bearded-man-crosses-his-hands-chest-posing-black-shirt_8353-1116.jpg" },
-        { id: "t2", name: "Mark V.", role: "Designer", company: "Ink & Steel", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/stylish-blond-bearded-male-dressed-elegant-classic-jacket_613910-11188.jpg" },
-        { id: "t3", name: "Josh P.", role: "Developer", company: "Code Tech", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-with-red-beard-poses-black-background_8353-1317.jpg" },
-        { id: "t4", name: "Chris D.", role: "Artist", company: "Neon Sky", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-sitting_23-2149213193.jpg" },
-        { id: "t5", name: "Sam K.", role: "Photographer", company: "Dark Lens", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-young-woman-black-jacket-with-stylish-hairstyle-looking-camera-isolated-purple-background_291049-2380.jpg" },
-      ]}
-      kpiItems={[
-        { value: "10k+", label: "Community Members" },
-        { value: "5k+", label: "Orders Fulfilled" },
-        { value: "4.9/5", label: "Average Rating" },
-      ]}
       title="Voice of the Dark"
-      description="What our customers are saying about our premium streetwear."
+      description="Real feedback from our legion of rebels."
+      testimonials={[
+        { id: "t1", name: "Alex R.", date: "Oct 2023", title: "Exceptional Style", quote: "The craftsmanship is unparalleled. My sigil hoodie is the centerpiece of my wardrobe.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/dark-blonde-bearded-man-crosses-his-hands-chest-posing-black-shirt_8353-1116.jpg" },
+        { id: "t2", name: "Mark V.", date: "Nov 2023", title: "Dark Aesthetic Perfection", quote: "Finally found a brand that captures the gritty dark aesthetic I love without compromising comfort.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/stylish-blond-bearded-male-dressed-elegant-classic-jacket_613910-11188.jpg" },
+      ]}
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqSplitText
+      <FaqDouble
       useInvertedBackground={false}
       faqs={[
         { id: "q1", title: "What sizing guide do you use?", content: "Our clothes are true to size; consult our detailed size chart for precise fits." },
         { id: "q2", title: "Are designs limited?", content: "Yes, our drops are strictly limited to ensure exclusivity." },
         { id: "q3", title: "How long is shipping?", content: "Shipping within the continental region typically takes 3-5 business days." },
       ]}
-      sideTitle="Common Questions"
-      sideDescription="Need clarity? We have answers."
+      title="FAQ"
+      description="Your burning questions, answered."
       faqsAnimation="slide-up"
+      textboxLayout="default"
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactSplit
+      <ContactSplitForm
       useInvertedBackground={false}
-      background={{ variant: "animated-grid" }}
-      tag="Newsletter"
-      title="Join the Legion"
-      description="Sign up for updates on our newest drops and exclusive community content."
-      imageSrc="http://img.b2bpic.net/free-photo/spiky-blue-ferromagnetic-liquid-metal-with-copy-space_23-2148253546.jpg"
-      imageAlt="abstract dark aesthetic background"
+      title="Contact Us"
+      description="Need support or want to collaborate? Reach out to our team."
+      inputs={[
+        { name: "name", type: "text", placeholder: "Your Name" },
+        { name: "email", type: "email", placeholder: "Your Email" },
+      ]}
+      textarea={{ name: "message", placeholder: "How can we help you?", rows: 4 }}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
+      <FooterSimple
       columns={[
-        { items: [{ label: "Home", href: "#hero" }, { label: "Collection", href: "#products" }, { label: "About", href: "#about" }] },
-        { items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Use", href: "#" }, { label: "Contact", href: "#contact" }] },
+        { title: "Shop", items: [{ label: "Collection", href: "#products" }, { label: "New Drops", href: "#" }] },
+        { title: "Company", items: [{ label: "About", href: "#about" }, { label: "Careers", href: "#" }] },
+        { title: "Support", items: [{ label: "Contact", href: "#contact" }, { label: "FAQ", href: "#faq" }] },
       ]}
-      logoText="DEMON APPAREL"
+      bottomLeftText="© 2024 Demon Apparel"
+      bottomRightText="All Rights Reserved"
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -13,12 +13,12 @@
   --background: #000000;
   --card: #0c0c0c;
   --foreground: #ffffff;
-  --primary-cta: #cee7ff;
+  --primary-cta: #106efb;
   --primary-cta-text: #000000;
   --secondary-cta: #000000;
   --secondary-cta-text: #ffffff;
   --accent: #535353;
-  --background-accent: #CEE7FF;
+  --background-accent: #106efb;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);