Merge version_4 into main

Merge version_4 into main

src/app/globals.css

@@ -4,21 +4,21 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  /* --background: #f5f5f5;;
-  --card: #ffffff;;
-  --foreground: #1c1c1c;;
-  --primary-cta: #6139e6;;
-  --secondary-cta: #ffffff;;
-  --accent: #6139e6;;
-  --background-accent: #b3a8e8;; */
+  /* --background: #060000;;
+  --card: #1d0d0d;;
+  --foreground: #fffae6;;
+  --primary-cta: #fde047;;
+  --secondary-cta: #1f0a0a;;
+  --accent: #fde047;;
+  --background-accent: #664d0f;; */
 
-  --background: #f5f5f5;;
-  --card: #ffffff;;
-  --foreground: #1c1c1c;;
-  --primary-cta: #6139e6;;
-  --secondary-cta: #ffffff;;
-  --accent: #6139e6;;
-  --background-accent: #b3a8e8;;
+  --background: #060000;;
+  --card: #1d0d0d;;
+  --foreground: #fffae6;;
+  --primary-cta: #fde047;;
+  --secondary-cta: #1f0a0a;;
+  --accent: #fde047;;
+  --background-accent: #664d0f;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

src/app/page.tsx

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
@@ -9,6 +9,7 @@ import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
 import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
 import ContactText from '@/components/sections/contact/ContactText';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
 
 export default function LandingPage() {
   return (
@@ -29,6 +30,7 @@ export default function LandingPage() {
           navItems={[
             { name: "Home", id: "home" },
             { name: "Collections", id: "collections" },
+            { name: "Star Wars", id: "star-wars" },
             { name: "Highlights", id: "highlights" },
             { name: "Testimonials", id: "testimonials" },
             { name: "Contact", id: "contact" }
@@ -75,6 +77,32 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="star-wars" data-section="star-wars">
+        <ProductCardFour
+          title="Star Wars LEGO Collection"
+          description="A galaxy far, far away... displayed right here in premium LEGO form"
+          products={[
+            {
+              id: "sw-1",              name: "Millennium Falcon Ultimate Collector Series",              price: "$800",              variant: "Silver  Complete Build",              imageSrc: "https://img.b2bpic.net/free-photo/top-view-colorful-sticks-desk_23-2148514734.jpg",              imageAlt: "Millennium Falcon LEGO set"
+            },
+            {
+              id: "sw-2",              name: "AT-AT Walker Detailed Model",              price: "$400",              variant: "Gray  Display Ready",              imageSrc: "https://img.b2bpic.net/free-photo/flat-lay-composition-toys-with-copyspace_23-2148144842.jpg",              imageAlt: "AT-AT Walker LEGO model"
+            },
+            {
+              id: "sw-3",              name: "Star Destroyer Architecture Set",              price: "$700",              variant: "Black & White  Architectural",              imageSrc: "https://img.b2bpic.net/free-photo/high-angle-drinking-straws-tip-table_23-2148339414.jpg",              imageAlt: "Star Destroyer LEGO architecture"
+            },
+            {
+              id: "sw-4",              name: "Yoda's Lightsaber Duel Display",              price: "$150",              variant: "Green  Premium Minifigures",              imageSrc: "https://img.b2bpic.net/free-photo/flat-lay-composition-toys_23-2148144841.jpg",              imageAlt: "Yoda Lightsaber Duel LEGO set"
+            }
+          ]}
+          gridVariant="uniform-all-items-equal"
+          carouselMode="buttons"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground="noInvert"
+        />
+      </div>
+
       <div id="highlights" data-section="highlights">
         <FeatureCardTwelve
           title="Collection Highlights"
@@ -170,6 +198,7 @@ export default function LandingPage() {
               title: "Navigate",              items: [
                 { label: "Home", href: "#home" },
                 { label: "Collections", href: "#collections" },
+                { label: "Star Wars", href: "#star-wars" },
                 { label: "Highlights", href: "#highlights" }
               ]
             },