41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
"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>
|
|
)
|
|
}
|