Shop
/
Shop-Storefront
4
0
Fork 0
Code Issues 25 Pull Requests Packages Projects 1 Releases Wiki Activity

feat: add medusa starter design hero banner #13

Merged
yen.nguyen merged 3 commits from namds/implement-hero-banner into main 2025-12-19 08:04:11 +00:00
Conversation 0 Commits 3 Files Changed 20 +50 -69
7 changed files with 50 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a2e5b56eb8 - Show all commits

5
config/nam.3bear.design.json
View File

@ -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"

2
config/nam.vibentec.design.json
View File

@ -182,7 +182,7 @@
"className": "h-[35rem]",
"ImageDisplayer": {
"config": {
"duration": 0,
"duration": 5,
"images": [
"./banner-hero.webp",
"./banner-hero-1.webp",

5
src/app/[countryCode]/(main)/page.tsx
View File

@ -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 /> */}

2
src/modules/layout/templates/vt-country-select/index.tsx
View File

@ -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])

35
src/modules/layout/templates/vt-cta-banner/bear-cta.tsx
View File

@ -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>
)
}

68
src/modules/layout/templates/vt-cta-banner/default-cta.tsx
View File

@ -15,35 +15,51 @@ export function DefaultCtaBanner({
}) {
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>
<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
)}
>
{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(
"mt-4 text-[#11314E] font-semibold leading-normal text-[56px]",
props.titleTextClassName
)}>
{props.titleText}
</h1>
{props.titleText && (
<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>
{props.descriptionText && (
<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
)}>
<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>

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

@ -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