feat: add medusa starter design hero banner

feat: add hero banner for vibentec design feat: add CTA banner vibentec design and create carousel image display
2025-12-16 14:46:36 +07:00
parent 07a52dca2b
commit 9e0f6b0071
16 changed files with 604 additions and 24 deletions
@@ -0,0 +1,40 @@
+"use client"
+import { Button, clx } from "@medusajs/ui"
+import { ChevronRightMini } from "@medusajs/icons"
+import {
+  LayoutComponentDefinition,
+  LayoutContext,
+} from "@vibentec/component-map"
+
+export function VtCtaBanner({
+  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="inline-flex items-center rounded-full bg-[#FCE9DA] text-[#E68445] px-3 py-1 text-sm font-medium">
+        {props.tagText}
+      </div>
+
+      <h1 className="mt-4 text-[#11314E] font-semibold leading-tight text-[56px]">
+        {props.titleText}
+      </h1>
+
+      <p className="mt-5 text-[#285A86] text-[16px] sm:text-xl opacity-80">
+        {props.descriptionText}
+      </p>
+
+      <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>
+  )
+}