feat: create design for 3bear and drsquatch hero banner, create variants cta section

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

@@ -1,10 +1,10 @@
 "use client"
-import { Button, clx } from "@medusajs/ui"
-import { ChevronRightMini } from "@medusajs/icons"
 import {
   LayoutComponentDefinition,
   LayoutContext,
 } from "@vibentec/component-map"
+import { DefaultCtaBanner } from "./default-cta"
+import { BearCtaBanner } from "./bear-cta"
 
 export function VtCtaBanner({
   nodes,
@@ -14,27 +14,14 @@ export function VtCtaBanner({
   context: LayoutContext
 }) {
   const props = nodes.config ?? {}
-  return (
-    <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="inline-flex items-center rounded-full bg-[#FCE9DA] text-[#E68445] px-3 py-1 text-sm font-medium">
-        {props.tagText}
-      </div>
+  const variant = props.variant ?? "default"
 
-      <h1 className="mt-4 text-[#11314E] font-semibold leading-tight text-[56px]">
-        {props.titleText}
-      </h1>
+  const variants: Record<string, any> = {
+    default: DefaultCtaBanner,
+    "3bear": BearCtaBanner,
+  }
 
-      <p className="mt-5 text-[#285A86] text-[16px] sm:text-xl opacity-80">
-        {props.descriptionText}
-      </p>
+  const Component = variants[variant] || DefaultCtaBanner
 
-      <Button className="mt-8 inline-flex items-center gap-2 bg-[#0F2740] hover:bg-[#173551] text-white px-6 py-3 rounded-[12px] shadow-md">
-        {props.buttonText}
-        <ChevronRightMini />
-      </Button>
-    </div>
-  )
+  return <Component nodes={nodes} context={context} />
 }