refactor: combine 3bear cta section into dynamic cta section
This commit is contained in:
parent
7afffb3f99
commit
a2e5b56eb8
|
|
@ -192,8 +192,9 @@
|
|||
{
|
||||
"VtCtaBanner": {
|
||||
"config": {
|
||||
"variant": "3bear",
|
||||
"className": "left-[120px] top-[80px]",
|
||||
"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",
|
||||
"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"
|
||||
|
|
|
|||
|
|
@ -182,7 +182,7 @@
|
|||
"className": "h-[35rem]",
|
||||
"ImageDisplayer": {
|
||||
"config": {
|
||||
"duration": 0,
|
||||
"duration": 5,
|
||||
"images": [
|
||||
"./banner-hero.webp",
|
||||
"./banner-hero-1.webp",
|
||||
|
|
|
|||
|
|
@ -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 /> */}
|
||||
|
|
|
|||
|
|
@ -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])
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue