refactor: combine 3bear cta section into dynamic cta section

config/nam.3bear.design.json

@@ -192,8 +192,9 @@
           {
             "VtCtaBanner": {
               "config": {
-                "variant": "3bear",
+                "className": "left-[120px] top-[80px] relative w-full p-12 flex flex-col items-start justify-center text-left bg-transperant border-none shadow-none",
-                "className": "left-[120px] top-[80px]",
+                "buttonTextClassName": "inline-flex items-center justify-center bg-[#FCEE56] hover:bg-[#FCEE56]/90 text-[#0D382E] px-8 py-3 rounded-full font-bold text-lg shadow-none border-none",
+                "tagTextClassName": "text-[#0D382E] text-lg font-medium mb-2 bg-transparent",
                 "tagText": "So einfach kann Frühstück sein – mit unseren leckeren Overnight Oats.",
                 "titleText": "breakfast made easy.",
                 "buttonText": "Jetzt entdecken"

config/nam.vibentec.design.json

@@ -182,7 +182,7 @@
         "className": "h-[35rem]",
         "ImageDisplayer": {
           "config": {
-            "duration": 0,
+            "duration": 5,
             "images": [
               "./banner-hero.webp",
               "./banner-hero-1.webp",

src/app/[countryCode]/(main)/page.tsx

@@ -23,11 +23,14 @@ export default async function Home(props: {
   const { collections } = await listCollections({
     fields: "id, handle, title",
   })
+  const res = await listCollections({
+    fields: "id, handle, title",
+  })
 
   if (!collections || !region) {
     return null
   }
-
+  console.log(res, '--------------')
   return (
     <>
       {/* <Hero /> */}

src/modules/layout/templates/vt-country-select/index.tsx

@@ -23,7 +23,6 @@ export default function VtCountrySelectClient({
   const triggerText = props?.trigger?.text
   const [items, setItems] = useState<{ text: string; label?: string }[]>([])
   const { countryCode } = useParams()
-  console.log(regions)
   useEffect(() => {
     if (!regions || regions.length === 0) {
       setItems([])
@@ -39,7 +38,6 @@ export default function VtCountrySelectClient({
       .flat()
       .filter((o) => o.text)
       .sort((a, b) => (a.label ?? "").localeCompare(b.label ?? ""))
-    console.log(opts)
     setItems(opts)
   }, [regions])
 

src/modules/layout/templates/vt-cta-banner/bear-cta.tsx

@@ -1,35 +0,0 @@
-"use client"
-import { Button, clx } from "@medusajs/ui"
-import {
-  LayoutComponentDefinition,
-  LayoutContext,
-} from "@vibentec/component-map"
-
-export function BearCtaBanner({
-  nodes,
-  context,
-}: {
-  nodes: LayoutComponentDefinition
-  context: LayoutContext
-}) {
-  const props = nodes.config ?? {}
-  
-  return (
-    <div className={clx(
-      "relative w-full p-12 flex flex-col items-start justify-center text-left",
-      props.className
-    )}>
-      <p className="text-[#0D382E] text-lg font-medium mb-2">
-        {props.tagText ?? "So einfach kann Frühstück sein – mit unseren leckeren Overnight Oats."}
-      </p>
-
-      <h1 className="text-[#0D382E] font-black leading-tight text-[64px] mb-8 tracking-tight">
-        {props.titleText ?? "breakfast made easy."}
-      </h1>
-
-      <Button className="inline-flex items-center justify-center bg-[#FCEE56] hover:bg-[#FCEE56]/90 text-[#0D382E] px-8 py-3 rounded-full font-bold text-lg shadow-none border-none">
-        {props.buttonText ?? "Jetzt entdecken"}
-      </Button>
-    </div>
-  )
-}

src/modules/layout/templates/vt-cta-banner/default-cta.tsx

@@ -15,35 +15,51 @@ export function DefaultCtaBanner({
 }) {
   const props = nodes.config ?? {}
   return (
-    <div className={clx(
+    <div
+      className={clx(
         "relative w-[544px] bg-white rounded-[24px] border border-[#E6EFFC] shadow-[0_12px_40px_rgba(17,49,78,0.10)] p-6",
         props.className
-    )}>
+      )}
-      <div className={clx(
+    >
+      {props.tagText && (
+        <div
+          className={clx(
             "inline-flex items-center rounded-full bg-[#FCE9DA] text-[#E68445] px-3 py-1 text-sm font-medium",
             props.tagTextClassName
-      )}>
+          )}
+        >
           {props.tagText}
         </div>
+      )}
 
-      <h1 className={clx(
+      {props.titleText && (
+        <h1
+          className={clx(
             "mt-4 text-[#11314E] font-semibold leading-normal text-[56px]",
             props.titleTextClassName
-      )}>
+          )}
+        >
           {props.titleText}
         </h1>
+      )}
 
-      <p className={clx(
+      {props.descriptionText && (
+        <p
+          className={clx(
             "mt-5 text-[#285A86] text-[16px] sm:text-xl opacity-80",
             props.descriptionTextClassName
-      )}>
+          )}
+        >
           {props.descriptionText}
         </p>
+      )}
 
-      <Button className={clx(
+      <Button
+        className={clx(
           "mt-8 inline-flex items-center gap-2 bg-[#0F2740] hover:bg-[#173551] text-white px-6 py-3 rounded-[12px] shadow-md",
           props.buttonTextClassName
-      )}>
+        )}
+      >
         {props.buttonText}
         <ChevronRightMini />
       </Button>

src/modules/layout/templates/vt-cta-banner/index.tsx

@@ -4,7 +4,6 @@ import {
   LayoutContext,
 } from "@vibentec/component-map"
 import { DefaultCtaBanner } from "./default-cta"
-import { BearCtaBanner } from "./bear-cta"
 
 export function VtCtaBanner({
   nodes,
@@ -18,7 +17,6 @@ export function VtCtaBanner({
 
   const variants: Record<string, any> = {
     default: DefaultCtaBanner,
-    "3bear": BearCtaBanner,
   }
 
   const Component = variants[variant] || DefaultCtaBanner