Merge version_5 into main

Merge version_5 into main

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>
 

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);