feat: add header banner 3bear design template

config/nam.3bear.design.json

@@ -0,0 +1,90 @@
+[
+  {
+    "Header": {
+      "config": {
+        "sticky": true,
+        "variant": "ticker"
+      },
+      "children": [
+        {
+          "Banner": {
+            "config": {
+              "variant": "ticker",
+              "className": "h-12 bg-[#009b93] text-[#fff] gap-12",
+              "speed": 24,
+              "items": [
+                {
+                  "Link": {
+                    "config": {
+                      "label": "NEU: Overnight Oats – Sallys Nussecke 😍",
+                      "href": "/"
+                    }
+                  }
+                },
+                {
+                  "Link": {
+                    "config": {
+                      "label": "Versandkostenfrei ab 45 € 💛",
+                      "href": "/"
+                    }
+                  }
+                },
+                {
+                  "Link": {
+                    "config": {
+                      "label": "Gratis Geschenk ab 60 € Warenkorbwert 🎁",
+                      "href": "/"
+                    }
+                  }
+                }
+              ]
+            }
+          }
+        },
+        {
+          "Nav": {
+            "config": {
+              "className": "h-12 bg-white text-[#003F31] gap-12",
+              "left": [
+                {
+                  "Image": {
+                    "config": {
+                      "src": "/3bear-logo.png",
+                      "alt": "MyShop",
+                      "className": "h-[150px] w-[180px]",
+                      "objectFit": "contain"
+                    }
+                  }
+                }
+              ]
+            }
+          }
+        }
+      ]
+    }
+  },
+  {
+    "CartMismatchBanner": {
+      "config": {
+        "show": true
+      }
+    }
+  },
+  {
+    "FreeShippingPriceNudge": {
+      "config": {
+        "variant": "popup"
+      }
+    }
+  },
+  {
+    "PropsChildren": {}
+  },
+  {
+    "Footer": {
+      "config": {
+        "copyrightText": "© 2025 MyShop"
+      }
+    }
+  }
+]

src/modules/layout/templates/vt-banner/banner-ticker.module.css

@@ -1,6 +1,10 @@
 @keyframes bannerTicker {
-  0% { transform: translateX(100%); }
+  0% {
-  100% { transform: translateX(-100%); }
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
 }
 
 .ticker {
@@ -8,5 +12,6 @@
   white-space: nowrap;
   align-items: center;
   animation: bannerTicker linear infinite;
-    height: 100%;  
+  height: 100%;
+  gap: 3rem
 }

src/vibentec/component-map.tsx

@@ -12,6 +12,7 @@ import Banner from "@modules/layout/templates/vt-banner"
 import VtMegaMenu from "@modules/layout/components/vt-mega-menu"
 import VtLink from "@modules/layout/components/vt-linkbutton"
 import VtSideMenu from "@modules/layout/components/vt-sidemenu"
+import VtImage from "@modules/layout/templates/vt-image"
 
 type ComponentConfig = Record<string, any>;
 
@@ -32,7 +33,7 @@ export type ComponentRenderer = {
 }
 
 // Utility methods
-const configOnly = (Component: React.ComponentType<any>): ComponentRenderer => ({
+const   configOnly = (Component: React.ComponentType<any>): ComponentRenderer => ({
   render: (entry) => <Component {...entry.config} />
 })
 
@@ -55,6 +56,7 @@ export const componentMap: Record<string, ComponentRenderer> = {
   AccountButton: nodesContextRenderer(AccountButton),
   VtCartButton: nodesContextRenderer(VtCartButton),
   Link: nodesContextRenderer(VtLink),
+  Image: nodesContextRenderer(VtImage),
   CartMismatchBanner: configOnly(CartMismatchBanner),
   FreeShippingPriceNudge: configOnly(FreeShippingPriceNudge),
   PropsChildren: {

src/vibentec/configloader.ts

@@ -2,7 +2,7 @@ import fs from "fs"
 import path from "path"
 import { jsonFileNames } from "./devJsonFileNames";
 
-const fileName = jsonFileNames.stePlayGround;
+const fileName = jsonFileNames.nam3Bear;
 
 export async function loadDesignConfig() {
   const filePath = path.join(process.cwd(), "config", fileName)

src/vibentec/devJsonFileNames.ts

@@ -1,4 +1,5 @@
 export const jsonFileNames = {
   steMedusaStarter: "ste.medusa-starter.design.json",
-  stePlayGround: "ste.playground.design.json"
+  stePlayGround: "ste.playground.design.json",
+  nam3Bear: "nam.3bear.design.json",
 };