Merge version_5 into main

Merge version_5 into main

src/app/layout.tsx

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

src/app/page.tsx

@@ -2,7 +2,7 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
 import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
@@ -41,19 +41,26 @@ export default function InfernoPage() {
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroLogoBillboard
-          logoText="Inferno"
-          description="Craft hot sauce born from passion. Premium flavor, natural ingredients, unforgettable heat. Experience the perfect blend of spice and sophistication."
+        <HeroBillboard
+          title="Inferno: Crafted for Your Taste"
+          description="Experience the perfect blend of spice and sophistication with our premium hot sauce. Inferno is crafted from natural ingredients to deliver an unforgettable heat."
+          background={{ variant: "gradient-bars" }}
           buttons={[
-            { text: "Explore Collection", href: "products" },
-            { text: "Learn More", href: "about" }
+            { text: "Order Your First Bottle", href: "products", dataWebildId: "order_first_bottle" },
+            { text: "Learn More", href: "about", dataWebildId: "learn_more" }
           ]}
-          background={{ variant: "plain" }}
-          imageSrc="https://img.b2bpic.net/free-photo/closeup-shot-various-sauces-glass-jars_181624-58324.jpg?_wi=1"
+          imageSrc="https://img.b2bpic.net/free-photo/closeup-shot-various-sauces-glass-jars_181624-58324.jpg"
           imageAlt="Inferno Hot Sauce Premium Bottle"
-          frameStyle="card"
           mediaAnimation="opacity"
           buttonAnimation="slide-up"
+          marqueeItems={[
+            { imageSrc: "https://img.b2bpic.net/free-photo/abstract-luxury-gradient-blue-background_53876-120942.jpg", text: "Inferno Hot Sauce" },
+            { imageSrc: "https://img.b2bpic.net/free-photo/futuristic-moon-background_23-2150930890.jpg", text: "Crafted with Passion" },
+            { imageSrc: "https://img.b2bpic.net/free-photo/futuristic-city-architecture_23-2151918947.jpg", text: "Natural Ingredients" }
+          ]}
+          marqueeSpeed={50}
+          showMarqueeCard={true}
+          ariaLabel="Inferno Hot Sauce Hero Billboard"
         />
       </div>
 
@@ -112,7 +119,7 @@ export default function InfernoPage() {
             "Inferno was born from a simple obsession: creating the perfect hot sauce. Founded by spice enthusiasts, we've spent years perfecting recipes and sourcing the finest ingredients from trusted farmers around the world.",            "Today, we're proud to share our passion with heat lovers everywhere. Every bottle represents our commitment to quality, authenticity, and the belief that great hot sauce should be both delicious and responsibly made.",            "Join our community and discover why thousands of food enthusiasts trust Inferno to elevate their meals."
           ]}
           buttons={[
-            { text: "Shop Now", href: "products" }
+            { text: "Order Your First Bottle", href: "products" }
           ]}
           showBorder={false}
           useInvertedBackground={false}
@@ -207,4 +214,4 @@ export default function InfernoPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -2,21 +2,21 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  /* --background: #ffffff;;
-  --card: #f9f9f9;;
-  --foreground: #120a00e6;;
-  --primary-cta: #ff8c42;;
-  --secondary-cta: #f9f9f9;;
-  --accent: #e2e2e2;;
-  --background-accent: #c4c4c4;; */
+  /* --background: #060000;;;
+  --card: #1d0d0d;;;
+  --foreground: #ffe6e6;;;
+  --primary-cta: #ff3d4a;;;
+  --secondary-cta: #1f0a0a;;;
+  --accent: #7b2d2d;;;
+  --background-accent: #b8111f;;; */
 
-  --background: #ffffff;;
-  --card: #f9f9f9;;
-  --foreground: #120a00e6;;
-  --primary-cta: #ff8c42;;
-  --secondary-cta: #f9f9f9;;
-  --accent: #e2e2e2;;
-  --background-accent: #c4c4c4;;
+  --background: #060000;;;
+  --card: #1d0d0d;;;
+  --foreground: #ffe6e6;;;
+  --primary-cta: #ff3d4a;;;
+  --secondary-cta: #1f0a0a;;;
+  --accent: #7b2d2d;;;
+  --background-accent: #b8111f;;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);