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

2025-12-17 11:12:32 +07:00
parent 9e0f6b0071
commit 7afffb3f99
14 changed files with 280 additions and 129 deletions
@@ -0,0 +1,52 @@
+"use client"
+import { Button, clx } from "@medusajs/ui"
+import { ChevronRightMini } from "@medusajs/icons"
+import {
+  LayoutComponentDefinition,
+  LayoutContext,
+} from "@vibentec/component-map"
+
+export function DefaultCtaBanner({
+  nodes,
+  context,
+}: {
+  nodes: LayoutComponentDefinition
+  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={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(
+        "mt-4 text-[#11314E] font-semibold leading-normal text-[56px]",
+        props.titleTextClassName
+      )}>
+        {props.titleText}
+      </h1>
+
+      <p className={clx(
+        "mt-5 text-[#285A86] text-[16px] sm:text-xl opacity-80",
+        props.descriptionTextClassName
+      )}>
+        {props.descriptionText}
+      </p>
+
+      <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>
+    </div>
+  )
+}