Update src/app/styles/variables.css

Merge version_3 into main

src/app/page.tsx

@@ -12,42 +12,30 @@ import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarS
 import ProductCardFour from '@/components/sections/product/ProductCardFour';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
-import { Award, Shield, Zap } from "lucide-react";
+import { Award, Shield, Zap, Mail } from "lucide-react";
 
 export default function LandingPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="directional-hover"
         defaultTextAnimation="reveal-blur"
-        borderRadius="pill"
-        contentWidth="mediumSmall"
-        sizing="largeSmallSizeMediumTitles"
-        background="aurora"
-        cardStyle="gradient-bordered"
-        primaryButtonStyle="radial-glow"
-        secondaryButtonStyle="layered"
+        borderRadius="rounded"
+        contentWidth="medium"
+        sizing="medium"
+        background="none"
+        cardStyle="outline"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="solid"
         headingFontWeight="medium"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
       <NavbarStyleCentered
       navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "Products",
-          id: "products",
-        },
-        {
-          name: "FAQ",
-          id: "faq",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
+        { name: "Home", id: "hero" },
+        { name: "Products", id: "products" },
+        { name: "FAQ", id: "faq" },
+        { name: "Contact", id: "contact" },
       ]}
       brandName="NovaShop"
     />
@@ -58,78 +46,25 @@ export default function LandingPage() {
       title="Premium Goods, Delivered Daily"
       description="Experience quality like never before. Shop our curated selection of top-tier products designed for your modern lifestyle."
       testimonials={[
-        {
-          name: "Alex Smith",
-          handle: "@alexs",
-          testimonial: "Amazing products and lightning-fast shipping. Definitely buying again!",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/metal-circle-front-black-wall_181624-6880.jpg?_wi=1",
-          imageAlt: "luxury product studio photography",
-        },
-        {
-          name: "Jamie Doe",
-          handle: "@jamied",
-          testimonial: "The quality exceeded my expectations. NovaShop is my new go-to store.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/logistics-manager-doing-goods-parcels-quality-control-while-searching-cardboard-boxes-shelf-ecommerce-retail-storehouse-employee-holding-package-pack-customer-order-shipment_482257-60864.jpg?_wi=1",
-          imageAlt: "luxury product studio photography",
-        },
-        {
-          name: "Sam R.",
-          handle: "@samr",
-          testimonial: "Excellent customer service and very easy to navigate website.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-delicious-high-protein-vegan-meal_23-2149091302.jpg?_wi=1",
-          imageAlt: "luxury product studio photography",
-        },
-        {
-          name: "Jordan P.",
-          handle: "@jordanp",
-          testimonial: "Highly recommended! Everything arrived perfectly packaged.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/receiving-new-equipment_1098-17799.jpg?_wi=1",
-          imageAlt: "luxury product studio photography",
-        },
-        {
-          name: "Casey L.",
-          handle: "@caseyl",
-          testimonial: "Stunning design and great product variety.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/cooking-camera_1098-19823.jpg?_wi=1",
-          imageAlt: "luxury product studio photography",
-        },
+        { name: "Alex Smith", handle: "@alexs", testimonial: "Amazing products and lightning-fast shipping.", rating: 5 },
+        { name: "Jamie Doe", handle: "@jamied", testimonial: "The quality exceeded my expectations.", rating: 5 },
       ]}
       buttons={[
-        {
-          text: "Shop Now",
-          href: "#products",
-        },
+        { text: "Shop Now", href: "#products" },
+        { text: "Learn More", href: "#about" },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/metal-circle-front-black-wall_181624-6880.jpg?_wi=2"
       imageAlt="NovaShop hero showcase"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/smiling-middle-aged-blonde-slavic-woman-standing-profile-view-holding-shopping-bags-shoulder-looking-side-isolated-crimson-background-with-copy-space_141793-82318.jpg",
-          alt: "professional customer headshot studio",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/close-up-beautiful-blonde-woman-with-full-shopping-bags_329181-1407.jpg",
-          alt: "professional customer headshot studio",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-happy-woman-black-jacket-happy-short-haired-girl-dark-suit-widely-sincerely-smiles-isolated-background_197531-18508.jpg",
-          alt: "professional customer headshot studio",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/pretty-attractive-young-mixed-race-model-with-large-afro-wearing-navy-jacket-her-naked-body-shorts_633478-1216.jpg",
-          alt: "professional customer headshot studio",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/handsome-bearded-african-american-businessman-brown-classic-jacket-isolated-dark-background_613910-6551.jpg",
-          alt: "professional customer headshot studio",
-        },
-      ]}
-      avatarText="Trusted by 10k+ shoppers"
+    />
+  </div>
+
+  <div id="socialProof" data-section="socialProof">
+      <SocialProofOne
+      textboxLayout="split"
+      useInvertedBackground={false}
+      names={["TechCorp", "Innovate", "GlobalGear", "EcoLife", "UrbanStyle", "PrimeLogistics", "FutureBound"]}
+      title="Trusted by Industry Leaders"
+      description="Proudly supporting teams across the globe to achieve their goals."
     />
   </div>
 
@@ -139,23 +74,11 @@ export default function LandingPage() {
       title="Crafted with Purpose"
       description="We started with a simple vision: to bring quality goods closer to people. Today, we serve thousands across the globe with passion and integrity."
       metrics={[
-        {
-          value: "10K+",
-          title: "Happy Customers",
-        },
-        {
-          value: "99%",
-          title: "Satisfaction",
-        },
-        {
-          value: "24h",
-          title: "Support",
-        },
+        { value: "10K+", title: "Happy Customers" },
+        { value: "99%", title: "Satisfaction" },
+        { value: "24h", title: "Support" },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/logistics-manager-doing-goods-parcels-quality-control-while-searching-cardboard-boxes-shelf-ecommerce-retail-storehouse-employee-holding-package-pack-customer-order-shipment_482257-60864.jpg?_wi=2"
-      imageAlt="Our team at work"
-      mediaAnimation="slide-up"
-      metricsAnimation="slide-up"
     />
   </div>
 
@@ -166,48 +89,10 @@ export default function LandingPage() {
       gridVariant="four-items-2x2-equal-grid"
       useInvertedBackground={false}
       products={[
-        {
-          id: "p1",
-          name: "Essential Item A",
-          price: "$29",
-          variant: "Premium",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-delicious-high-protein-vegan-meal_23-2149091302.jpg?_wi=2",
-        },
-        {
-          id: "p2",
-          name: "Daily Utility B",
-          price: "$49",
-          variant: "Standard",
-          imageSrc: "http://img.b2bpic.net/free-photo/receiving-new-equipment_1098-17799.jpg?_wi=2",
-        },
-        {
-          id: "p3",
-          name: "Elite Gear C",
-          price: "$89",
-          variant: "Gold",
-          imageSrc: "http://img.b2bpic.net/free-photo/cooking-camera_1098-19823.jpg?_wi=2",
-        },
-        {
-          id: "p4",
-          name: "Classic Gadget D",
-          price: "$129",
-          variant: "Pro",
-          imageSrc: "http://img.b2bpic.net/free-photo/blue-bottle-with-green-cap-perfect-body-care-products_187299-46304.jpg",
-        },
-        {
-          id: "p5",
-          name: "Limited Edition E",
-          price: "$199",
-          variant: "Special",
-          imageSrc: "http://img.b2bpic.net/free-photo/camera-lens-binocular-canvas-shoes-sports-bottle-retro-wooden-table_1387-38.jpg",
-        },
-        {
-          id: "p6",
-          name: "Everyday Pack F",
-          price: "$59",
-          variant: "Basic",
-          imageSrc: "http://img.b2bpic.net/free-photo/red-cosmetic-bottle-with-purple-pump-isolated-white-background_187299-47390.jpg",
-        },
+        { id: "p1", name: "Essential Item A", price: "$29", variant: "Premium", imageSrc: "http://img.b2bpic.net/free-photo/close-up-delicious-high-protein-vegan-meal_23-2149091302.jpg?_wi=2" },
+        { id: "p2", name: "Daily Utility B", price: "$49", variant: "Standard", imageSrc: "http://img.b2bpic.net/free-photo/receiving-new-equipment_1098-17799.jpg?_wi=2" },
+        { id: "p3", name: "Elite Gear C", price: "$89", variant: "Gold", imageSrc: "http://img.b2bpic.net/free-photo/cooking-camera_1098-19823.jpg?_wi=2" },
+        { id: "p4", name: "Classic Gadget D", price: "$129", variant: "Pro", imageSrc: "http://img.b2bpic.net/free-photo/blue-bottle-with-green-cap-perfect-body-care-products_187299-46304.jpg" },
       ]}
       title="Explore Our Collection"
       description="Browse our hand-picked selection of premium items curated for your daily needs."
@@ -220,105 +105,22 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       features={[
-        {
-          icon: Shield,
-          title: "Verified Quality",
-          description: "Every item undergoes rigorous checking.",
-        },
-        {
-          icon: Zap,
-          title: "Fast Shipping",
-          description: "Get your orders delivered to your doorstep quickly.",
-        },
-        {
-          icon: Award,
-          title: "Satisfaction Guaranteed",
-          description: "Not happy? We offer a hassle-free return policy.",
-        },
+        { icon: Shield, title: "Verified Quality", description: "Every item undergoes rigorous checking." },
+        { icon: Zap, title: "Fast Shipping", description: "Get your orders delivered to your doorstep quickly." },
+        { icon: Award, title: "Satisfaction Guaranteed", description: "Not happy? We offer a hassle-free return policy." },
       ]}
       title="Why Choose Us?"
       description="We stand behind everything we sell with ironclad guarantees."
     />
   </div>
 
-  <div id="socialProof" data-section="socialProof">
-      <SocialProofOne
-      textboxLayout="split"
-      useInvertedBackground={false}
-      names={[
-        "TechCorp",
-        "Innovate",
-        "GlobalGear",
-        "EcoLife",
-        "UrbanStyle",
-        "PrimeLogistics",
-        "FutureBound",
-      ]}
-      title="Trusted by Leaders"
-      description="We are proud partners with industry-leading brands."
-    />
-  </div>
-
   <div id="testimonials" data-section="testimonials">
       <TestimonialCardFive
       textboxLayout="split"
       useInvertedBackground={false}
       testimonials={[
-        {
-          id: "t1",
-          name: "Sarah",
-          date: "Jan 2024",
-          title: "Loved it!",
-          quote: "The quality is simply unmatched.",
-          tag: "Verified",
-          avatarSrc: "http://img.b2bpic.net/free-photo/smiling-middle-aged-blonde-slavic-woman-standing-profile-view-holding-shopping-bags-shoulder-looking-side-isolated-crimson-background-with-copy-space_141793-82318.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/metal-circle-front-black-wall_181624-6880.jpg?_wi=3",
-          imageAlt: "professional customer headshot studio",
-        },
-        {
-          id: "t2",
-          name: "John",
-          date: "Feb 2024",
-          title: "Great find",
-          quote: "Will definitely shop again.",
-          tag: "Customer",
-          avatarSrc: "http://img.b2bpic.net/free-photo/close-up-beautiful-blonde-woman-with-full-shopping-bags_329181-1407.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/logistics-manager-doing-goods-parcels-quality-control-while-searching-cardboard-boxes-shelf-ecommerce-retail-storehouse-employee-holding-package-pack-customer-order-shipment_482257-60864.jpg?_wi=3",
-          imageAlt: "professional customer headshot studio",
-        },
-        {
-          id: "t3",
-          name: "Emily",
-          date: "Mar 2024",
-          title: "Perfect",
-          quote: "Shipping was impressively fast.",
-          tag: "Verified",
-          avatarSrc: "http://img.b2bpic.net/free-photo/portrait-happy-woman-black-jacket-happy-short-haired-girl-dark-suit-widely-sincerely-smiles-isolated-background_197531-18508.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-delicious-high-protein-vegan-meal_23-2149091302.jpg?_wi=3",
-          imageAlt: "professional customer headshot studio",
-        },
-        {
-          id: "t4",
-          name: "Mike",
-          date: "Apr 2024",
-          title: "Superb",
-          quote: "Exceptional customer support team.",
-          tag: "Verified",
-          avatarSrc: "http://img.b2bpic.net/free-photo/pretty-attractive-young-mixed-race-model-with-large-afro-wearing-navy-jacket-her-naked-body-shorts_633478-1216.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/receiving-new-equipment_1098-17799.jpg?_wi=3",
-          imageAlt: "professional customer headshot studio",
-        },
-        {
-          id: "t5",
-          name: "Jessica",
-          date: "May 2024",
-          title: "Highly Recommend",
-          quote: "Worth every penny.",
-          tag: "Customer",
-          avatarSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-african-american-businessman-brown-classic-jacket-isolated-dark-background_613910-6551.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/cooking-camera_1098-19823.jpg?_wi=3",
-          imageAlt: "professional customer headshot studio",
-        },
+        { id: "t1", name: "Sarah", date: "Jan 2024", title: "Loved it!", quote: "The quality is simply unmatched.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/smiling-middle-aged-blonde-slavic-woman-standing-profile-view-holding-shopping-bags-shoulder-looking-side-isolated-crimson-background-with-copy-space_141793-82318.jpg" },
+        { id: "t2", name: "John", date: "Feb 2024", title: "Great find", quote: "Will definitely shop again.", tag: "Customer", avatarSrc: "http://img.b2bpic.net/free-photo/close-up-beautiful-blonde-woman-with-full-shopping-bags_329181-1407.jpg" },
       ]}
       title="Real Stories"
       description="Hear what our community says."
@@ -330,40 +132,25 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       faqs={[
-        {
-          id: "f1",
-          title: "How long is shipping?",
-          content: "Most orders arrive within 3-5 business days.",
-        },
-        {
-          id: "f2",
-          title: "Do you accept returns?",
-          content: "Yes, within 30 days of purchase for a full refund.",
-        },
-        {
-          id: "f3",
-          title: "How do I track orders?",
-          content: "We send a tracking link immediately after dispatch.",
-        },
+        { id: "f1", title: "How long is shipping?", content: "Most orders arrive within 3-5 business days." },
+        { id: "f2", title: "Do you accept returns?", content: "Yes, within 30 days of purchase for a full refund." },
       ]}
       title="Common Questions"
       description="Everything you need to know about shopping with us."
       faqsAnimation="slide-up"
+      buttons={[
+        { text: "Contact Support", href: "#contact" }
+      ]}
     />
   </div>
 
   <div id="contact" data-section="contact">
       <ContactText
       useInvertedBackground={false}
-      background={{
-        variant: "canvas-reveal",
-      }}
+      background={{ variant: "plain" }}
       text="Need help? Reach out to our support team any time. We're here for you 24/7."
       buttons={[
-        {
-          text: "Contact Support",
-          href: "mailto:support@novashop.com",
-        },
+        { text: "Contact Support", href: "mailto:support@novashop.com" },
       ]}
     />
   </div>
@@ -371,32 +158,8 @@ export default function LandingPage() {
   <div id="footer" data-section="footer">
       <FooterSimple
       columns={[
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About Us",
-              href: "#about",
-            },
-            {
-              label: "Careers",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Support",
-          items: [
-            {
-              label: "Contact",
-              href: "#contact",
-            },
-            {
-              label: "Shipping Info",
-              href: "#faq",
-            },
-          ],
-        },
+        { title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Careers", href: "#" }] },
+        { title: "Support", items: [{ label: "Contact", href: "#contact" }, { label: "Shipping Info", href: "#faq" }] },
       ]}
       bottomLeftText="© 2024 NovaShop. All rights reserved."
       bottomRightText="Privacy Policy"
@@ -405,4 +168,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -11,14 +11,14 @@
   --background-accent: #ffffff; */
 
   --background: #ffffff;
-  --card: #f9f9f9;
-  --foreground: #000612e6;
-  --primary-cta: #106EFB;
+  --card: #ffffff;
+  --foreground: #1a1a1a;
+  --primary-cta: #000000;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #f0f0f0;
   --secondary-cta-text: #000612e6;
-  --accent: #e2e2e2;
-  --background-accent: #106EFB;
+  --accent: #e5e5e5;
+  --background-accent: #f5f5f5;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);