src/app/globals.css

@@ -4,13 +4,13 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  --background: #0a0a0a;
-  --card: #1a1a1a;
-  --foreground: #fffef5e6;
-  --primary-cta: #facc15;
-  --secondary-cta: #1a1a1a;
-  --accent: #737373;
-  --background-accent: #737373;
+  --background: #ffffff;
+  --card: #fafafa;
+  --foreground: #000000;
+  --primary-cta: #ff0000;
+  --secondary-cta: #ffffff;
+  --accent: #e5e5e5;
+  --background-accent: #f5f5f5;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

src/app/layout.tsx

@@ -1276,4 +1276,4 @@ export default function RootLayout({
       </ServiceWrapper>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import HeroBillboardMetrics from "@/components/sections/hero/HeroBillboardMetrics";
+import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
 import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
 import ParallaxAbout from "@/components/sections/about/ParallaxAbout";
 import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
@@ -23,17 +23,18 @@ export default function StarWarsPage() {
       headingFontWeight="extrabold"
     >
       <div id="hero" data-section="hero">
-        <HeroBillboardMetrics
+        <HeroBillboardGallery
           title="STAR WARS"
           description="Join millions of fans exploring the galaxy's greatest saga. Discover exclusive content, connect with the community, and celebrate the Force."
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502905270-5whkj6nu.jpg"
-          imageAlt="Star Wars galaxy"
-          frameStyle="card"
-          metricsLabel="Witness the scale of the Star Wars universe and its influence across generations"
-          metrics={[
-            { id: "1", value: "40+", label: "Years of Star Wars storytelling" },
-            { id: "2", value: "11", label: "Films in Complete Skywalker saga" },
-            { id: "3", value: "100M+", label: "Fans Worldwide united by Force" }
+          mediaItems={[
+            {
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502905270-5whkj6nu.jpg",
+              imageAlt: "Star Wars galaxy 1"
+            },
+            {
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502905270-5whkj6nu.jpg",
+              imageAlt: "Star Wars galaxy 2"
+            }
           ]}
           buttons={[
             { text: "Enter the Galaxy", href: "#metrics" },
@@ -56,7 +57,8 @@ export default function StarWarsPage() {
               title: "Years",
               description: "Of Star Wars storytelling",
               imageSrc: "/placeholders/placeholder1.webp",
-              imageAlt: "Star Wars years"
+              imageAlt: "Star Wars years",
+              rating: 4.8
             },
             {
               id: "2",
@@ -64,7 +66,8 @@ export default function StarWarsPage() {
               title: "Films",
               description: "Complete Skywalker saga",
               imageSrc: "/placeholders/placeholder1.webp",
-              imageAlt: "Star Wars films"
+              imageAlt: "Star Wars films",
+              rating: 4.9
             },
             {
               id: "3",
@@ -72,7 +75,8 @@ export default function StarWarsPage() {
               title: "Fans",
               description: "Worldwide united by Force",
               imageSrc: "/placeholders/placeholder1.webp",
-              imageAlt: "Star Wars fans"
+              imageAlt: "Star Wars fans",
+              rating: 4.7
             }
           ]}
         />
@@ -145,4 +149,4 @@ export default function StarWarsPage() {
       </div>
     </ThemeProvider>
   );
-}
+}