+
+ {Icon ?
+
+ )
+}
+
+export default AccountButton
diff --git a/src/modules/layout/components/vt-cartbutton/index.tsx b/src/modules/layout/components/vt-cartbutton/index.tsx
new file mode 100644
index 0000000..cb6a8f2
--- /dev/null
+++ b/src/modules/layout/components/vt-cartbutton/index.tsx
@@ -0,0 +1,36 @@
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import {
+ LayoutComponentDefinition,
+ LayoutContext,
+} from "vibentec/component-map"
+import { clx } from "@medusajs/ui"
+import { Suspense } from "react"
+import CartButton from "@modules/layout/components/cart-button"
+
+export const VtCartButton = ({
+ nodes,
+ context,
+}: {
+ nodes: LayoutComponentDefinition
+ context: LayoutContext
+}) => {
+ const props = nodes.config ?? {}
+ const className = clx("hover:text-ui-fg-base flex gap-2", props.className)
+ return (
+
+
+ {label}
+
+
+ )
+}
+
+export default HomeButton
\ No newline at end of file
diff --git a/src/modules/layout/components/vt-linkbutton/index.tsx b/src/modules/layout/components/vt-linkbutton/index.tsx
new file mode 100644
index 0000000..92ff296
--- /dev/null
+++ b/src/modules/layout/components/vt-linkbutton/index.tsx
@@ -0,0 +1,28 @@
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import { LayoutComponentDefinition, LayoutContext } from "vibentec/component-map";
+import { clx } from "@medusajs/ui"
+
+interface VtLinkProps {
+ className?: string
+ href?: string
+ label?: string
+}
+export const VtLink = ({ nodes, context }: { nodes: LayoutComponentDefinition; context: LayoutContext }) => {
+ const props = nodes.config as VtLinkProps ?? {}
+ const className = clx("txt-compact-xlarge-plus hover:text-ui-fg-base", props.className)
+ const href = props.href ?? "/"
+ const label = props.label ?? "Medusa Store"
+
+ return (
+
+
+ {label}
+
+
+ )
+}
+
+export default VtLink
\ No newline at end of file
diff --git a/src/modules/layout/components/vt-mega-menu/index.tsx b/src/modules/layout/components/vt-mega-menu/index.tsx
new file mode 100644
index 0000000..8d55318
--- /dev/null
+++ b/src/modules/layout/components/vt-mega-menu/index.tsx
@@ -0,0 +1,34 @@
+import {
+ LayoutComponentDefinition,
+ LayoutContext,
+} from "vibentec/component-map"
+import React, { Suspense } from "react"
+import SkeletonMegaMenu from "@modules/skeletons/components/vt-skeleton-mega-menu"
+import MegaMenuWrapper from "@modules/layout/components/vt-mega-menu/mega-menu-wrapper"
+
+interface MegaMenuProps {
+ navLabel: {
+ text: string
+ className?: string
+ }
+}
+export default function VtMegaMenu({
+ nodes,
+ context,
+}: {
+ nodes: LayoutComponentDefinition
+ context: LayoutContext
+}) {
+ const { navLabel } = nodes.config as MegaMenuProps ?? {}
+ return (
+
+ )
+}
diff --git a/src/modules/layout/components/vt-mega-menu/mega-menu-wrapper.tsx b/src/modules/layout/components/vt-mega-menu/mega-menu-wrapper.tsx
new file mode 100644
index 0000000..a0d66dc
--- /dev/null
+++ b/src/modules/layout/components/vt-mega-menu/mega-menu-wrapper.tsx
@@ -0,0 +1,12 @@
+import { listCategories } from "@lib/data/categories"
+import MegaMenu from "./mega-menu"
+
+
+
+export async function MegaMenuWrapper({ navLabel }: { navLabel: { text: string; className?: string } }) {
+ const categories = await listCategories().catch(() => [])
+
+ return
+
+ {navLabel?.text ?? "Product"} {navLabel?.isShowArrow &&
+ {isHovered && (
+
+ {isHovered && (
+
+ )}
+
+ )
+}
+
+export default MegaMenu
diff --git a/src/modules/layout/components/vt-sidemenu/index.tsx b/src/modules/layout/components/vt-sidemenu/index.tsx
new file mode 100644
index 0000000..ee039f2
--- /dev/null
+++ b/src/modules/layout/components/vt-sidemenu/index.tsx
@@ -0,0 +1,20 @@
+import { LayoutComponentDefinition, LayoutContext } from "vibentec/component-map";
+import React from "react";
+import SideMenu from "../side-menu";
+import { listRegions } from "@lib/data/regions"
+import { StoreRegion } from "@medusajs/types"
+
+export default async function VtSideMenu({ nodes, context }: { nodes: LayoutComponentDefinition; context: LayoutContext }) {
+ const regions = await listRegions().then((regions: StoreRegion[]) => regions)
+ return (
+
+
+ )}
+
+ {mainCategories.map((category) => (
+ handleCategoryHover(category.id)}
+ onMouseLeave={handleCategoryLeave}
+ >
+ {category.name}
+
+ ))}
+
+ {selectedCategory && (
+
+ {getSubCategories(selectedCategory).map((category) => (
+
+ )}
+
+
+ {category.name}
+
+
+ ))}
+
+ {getSubCategories(category.id).map((subCategory) => (
+
+ {subCategory.name}
+
+ ))}
+
+
+
+ )
+ }
+
+
+
+
diff --git a/src/modules/layout/templates/vt-banner/banner-cta.tsx b/src/modules/layout/templates/vt-banner/banner-cta.tsx
new file mode 100644
index 0000000..f0fb507
--- /dev/null
+++ b/src/modules/layout/templates/vt-banner/banner-cta.tsx
@@ -0,0 +1,59 @@
+"use client"
+
+import { LayoutComponentDefinition, LayoutContext } from "vibentec/component-map"
+import { clx } from "@medusajs/ui"
+import ReactMarkdown from "react-markdown"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import rehypeRaw from "rehype-raw"
+import remarkBreaks from "remark-breaks"
+
+interface BannerCTAProps {
+ node: LayoutComponentDefinition
+ context: LayoutContext
+}
+
+interface BannerConfigProps {
+ text?: string
+ href?: string
+ iconLeft?: string
+ iconRight?: string
+ className?: string
+}
+export default function BannerCTA({ node, context }: BannerCTAProps) {
+ const props = node.config as BannerConfigProps ?? {}
+ const text = props.text ?? ""
+ const href = props.href ?? undefined
+ const iconLeft = props.iconLeft
+ const iconRight = props.iconRight
+
+ const className = clx(
+ "content-container flex justify-center items-center text-center w-full h-full text-xs font-medium",
+ props.className
+ )
+
+ const content = (
+
+
+
+ {iconLeft &&
+ )
+
+ return href ? (
+
+
+ {iconRight && {content}
+ )
+}
+
+function DynamicIcon({ name }: { name: string }) {
+ return {name}
+}
\ No newline at end of file
diff --git a/src/modules/layout/templates/vt-banner/banner-nav.tsx b/src/modules/layout/templates/vt-banner/banner-nav.tsx
new file mode 100644
index 0000000..54f17c0
--- /dev/null
+++ b/src/modules/layout/templates/vt-banner/banner-nav.tsx
@@ -0,0 +1,25 @@
+import { DynamicLayoutRenderer } from "vibentec/renderer"
+import { LayoutComponentDefinition, LayoutContext } from "vibentec/component-map";
+
+interface BannerNavProps {
+ left?: LayoutComponentDefinition[]
+ center?: LayoutComponentDefinition[]
+ right?: LayoutComponentDefinition[]
+}
+export default function BannerNav({ node, context }: { node: LayoutComponentDefinition; context: LayoutContext }) {
+ const props = node.config as BannerNavProps ?? {};
+
+ return (
+
+ )
+}
diff --git a/src/modules/layout/templates/vt-banner/banner-ticker.module.css b/src/modules/layout/templates/vt-banner/banner-ticker.module.css
new file mode 100644
index 0000000..fea2cee
--- /dev/null
+++ b/src/modules/layout/templates/vt-banner/banner-ticker.module.css
@@ -0,0 +1,17 @@
+@keyframes bannerTicker {
+ 0% {
+ transform: translateX(100%);
+ }
+ 100% {
+ transform: translateX(-100%);
+ }
+}
+
+.ticker {
+ display: flex;
+ white-space: nowrap;
+ align-items: center;
+ animation: bannerTicker linear infinite;
+ height: 100%;
+ gap: 3rem
+}
diff --git a/src/modules/layout/templates/vt-banner/banner-ticker.tsx b/src/modules/layout/templates/vt-banner/banner-ticker.tsx
new file mode 100644
index 0000000..62dc5ad
--- /dev/null
+++ b/src/modules/layout/templates/vt-banner/banner-ticker.tsx
@@ -0,0 +1,23 @@
+import styles from "./banner-ticker.module.css"
+import { DynamicLayoutRenderer } from "vibentec/renderer"
+import { LayoutComponentDefinition, LayoutContext } from "vibentec/component-map"
+
+interface BannerTickerProps {
+ node: LayoutComponentDefinition
+ context: LayoutContext
+}
+interface BannerConfigProps {
+ items?: LayoutComponentDefinition[]
+ speed?: number
+}
+export default function BannerTicker({ node, context }: BannerTickerProps) {
+ const props = node.config as BannerConfigProps ?? {}
+ const speed = props.speed ?? 10;
+ return (
+
+
+ )
+}
diff --git a/src/modules/layout/templates/vt-banner/index.tsx b/src/modules/layout/templates/vt-banner/index.tsx
new file mode 100644
index 0000000..0eb1df7
--- /dev/null
+++ b/src/modules/layout/templates/vt-banner/index.tsx
@@ -0,0 +1,42 @@
+import {
+ LayoutComponentDefinition,
+ LayoutContext,
+} from "vibentec/component-map"
+import { clx } from "@medusajs/ui"
+import BannerNav from "./banner-nav"
+import BannerCTA from "./banner-cta"
+import BannerTicker from "./banner-ticker"
+
+interface BannerProps {
+ variant: "nav" | "cta" | "ticker"
+ className?: string
+ speed?: number
+}
+export default async function Banner({
+ nodes,
+ context,
+}: {
+ nodes: LayoutComponentDefinition
+ context: LayoutContext
+}) {
+ const props = (nodes.config as BannerProps) ?? {}
+ const bannerClassName = clx(
+ "relative h-8 mx-auto border-b duration-200 bg-white border-ui-border-base",
+ props.className
+ )
+ if (!props.variant) return null
+
+ const variants = {
+ nav: BannerNav,
+ cta: BannerCTA,
+ ticker: BannerTicker,
+ }
+
+ const Component = variants[props.variant]
+
+ return (
+
+
+
+
+ )
+}
diff --git a/src/modules/layout/templates/vt-button/index.tsx b/src/modules/layout/templates/vt-button/index.tsx
new file mode 100644
index 0000000..b32dc53
--- /dev/null
+++ b/src/modules/layout/templates/vt-button/index.tsx
@@ -0,0 +1,32 @@
+import { Button, IconButton } from "@medusajs/ui"
+import * as MedusaIcons from "@medusajs/icons"
+import * as CustomIcons from "@modules/common/icons"
+import {
+ LayoutComponentDefinition,
+ LayoutContext,
+} from "@vibentec/component-map"
+
+export default function VtButton({
+ nodes,
+ context,
+}: {
+ nodes: LayoutComponentDefinition
+ context: LayoutContext
+}) {
+ const props = nodes.config || {}
+ const iconName = props.icon as string | undefined
+ const IconComponent = iconName
+ ? (MedusaIcons as Record
+
+ {props.text}
+
+
+ )
+}
diff --git a/src/modules/layout/templates/vt-footer/vt-footer-hero/index.tsx b/src/modules/layout/templates/vt-footer/vt-footer-hero/index.tsx
new file mode 100644
index 0000000..6ad0342
--- /dev/null
+++ b/src/modules/layout/templates/vt-footer/vt-footer-hero/index.tsx
@@ -0,0 +1,158 @@
+import { clx } from "@medusajs/ui"
+import { ChevronRightMini } from "@medusajs/icons"
+import {
+ LayoutComponentDefinition,
+ LayoutContext,
+} from "@vibentec/component-map"
+import * as MedusaIcons from "@medusajs/icons"
+import * as CustomIcons from "@modules/common/icons"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+
+interface SocialIcon {
+ href?: string
+ icon?: string
+ imgSrc?: string
+ className?: string
+}
+
+export default function VtFooterHero({
+ nodes,
+ context,
+}: {
+ nodes: LayoutComponentDefinition
+ context: LayoutContext
+}) {
+ const props = nodes.config ?? {}
+ const IconComp = (name?: string) => {
+ if (!name) return null
+ return (
+ (MedusaIcons as Record
+ {props.links && props.links.length > 0 && (
+
+
+ {props.links.map((l: any, idx: number) =>
+ renderLink(l, idx, props.links.length)
+ )}
+
+ )}
+
+ {(props.icons ?? []).map(renderIcon)}
+
+
+ {props.logoSrc && (
+ 
+ )}
+ {props.title && (
+
+ {props.cta.label}
+
+ )}
+
+ {props.email && (
+
+ )}
+ {props.socials && props.socials.length > 0 ? (
+
+ )
+}
diff --git a/src/modules/layout/templates/vt-footer/vt-footer-signup/index.tsx b/src/modules/layout/templates/vt-footer/vt-footer-signup/index.tsx
new file mode 100644
index 0000000..1afdcf7
--- /dev/null
+++ b/src/modules/layout/templates/vt-footer/vt-footer-signup/index.tsx
@@ -0,0 +1,114 @@
+"use client"
+import { Button, Input } from "@medusajs/ui"
+import { clx } from "@medusajs/ui"
+import * as MedusaIcons from "@medusajs/icons"
+import * as CustomIcons from "@modules/common/icons"
+import { LayoutComponentDefinition, LayoutContext } from "@vibentec/component-map"
+import React, { useState } from "react"
+
+interface SocialIcon {
+ href?: string
+ icon?: string
+ imgSrc?: string
+ className?: string
+}
+
+interface VtFooterSignupConfig {
+ title?: string
+ placeholder?: string
+ buttonLabel?: string
+ className?: string
+ titleClassName?: string
+ formClassName?: string
+ inputClassName?: string
+ buttonClassName?: string
+ socialsClassName?: string
+ socials?: SocialIcon[]
+}
+
+export default function VtFooterSignUp({
+ nodes,
+ context,
+}: {
+ nodes: LayoutComponentDefinition
+ context: LayoutContext
+}) {
+ const props = (nodes.config as VtFooterSignupConfig) ?? {}
+ const [email, setEmail] = useState("")
+
+ const IconComp = (name?: string) => {
+ if (!name) return null
+ return (
+ (MedusaIcons as Record+ {props.title} +
+ )} + {props.description && ( ++ {props.description} +
+ )} + {props.cta && ( +
+ {props.socials.map(renderSocialIcon)}
+
+ ) : null}
+
+ {props.title && (
+
+ )
+}
diff --git a/src/modules/layout/templates/vt-header/index.tsx b/src/modules/layout/templates/vt-header/index.tsx
new file mode 100644
index 0000000..b0755d9
--- /dev/null
+++ b/src/modules/layout/templates/vt-header/index.tsx
@@ -0,0 +1,14 @@
+import { DynamicLayoutRenderer } from "vibentec/renderer"
+import { LayoutComponentDefinition, LayoutContext } from "vibentec/component-map";
+import { clx } from "@medusajs/ui";
+
+export default function VtHeader({ nodes, context }: { nodes: LayoutComponentDefinition; context: LayoutContext }) {
+ const { sticky = true } = nodes.config ?? {};
+ const cName = clx(sticky && "sticky top-0","inset-x-0 z-50 group");
+
+ return (
+ + {props.title} +
+ )} + + + + {props.socials && props.socials.length > 0 ? ( +
+ {props.socials.map(renderSocialIcon)}
+
+ ) : null}
+
+ 
+
+ )
+}
diff --git a/src/modules/layout/templates/vt-menu-item/index.tsx b/src/modules/layout/templates/vt-menu-item/index.tsx
new file mode 100644
index 0000000..09fb922
--- /dev/null
+++ b/src/modules/layout/templates/vt-menu-item/index.tsx
@@ -0,0 +1,56 @@
+"use client"
+import {
+ LayoutComponentDefinition,
+ LayoutContext,
+} from "@vibentec/component-map"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import * as MedusaIcons from "@medusajs/icons"
+import * as CustomIcons from "@modules/common/icons"
+export default function VtMenuItem({
+ nodes,
+ context,
+}: {
+ nodes: LayoutComponentDefinition
+ context: LayoutContext
+}) {
+ const props = nodes.config ?? {}
+ const title = props.title ?? ""
+ const items = props.items ?? []
+ const icon = props.icon ?? ""
+
+ const getIconComponent = (icon: string | undefined) => {
+ return icon
+ ? (MedusaIcons as Record
+ {title}
+
+ )
+}
diff --git a/src/modules/layout/templates/vt-nav/index.tsx b/src/modules/layout/templates/vt-nav/index.tsx
new file mode 100644
index 0000000..02fcb8f
--- /dev/null
+++ b/src/modules/layout/templates/vt-nav/index.tsx
@@ -0,0 +1,29 @@
+import { DynamicLayoutRenderer } from "vibentec/renderer"
+import { LayoutComponentDefinition, LayoutContext } from "vibentec/component-map";
+import { clx } from "@medusajs/ui";
+
+interface BannerNavProps {
+ className?: string;
+ left?: LayoutComponentDefinition[];
+ center?: LayoutComponentDefinition[];
+ right?: LayoutComponentDefinition[];
+}
+export default function VtNav({ nodes, context }: { nodes: LayoutComponentDefinition; context: LayoutContext }) {
+ const props = nodes.config as BannerNavProps ?? {}
+
+ return (
+ -
+ {items.map((item: { text: string; href?: string; icon?: string }, index: number) => {
+ const Icon = getIconComponent(item.icon)
+ return (
+
-
+ {Icon &&
} + {item.href ? ( + + {item.text} + + ) : ( + {item.text} + )} +
+ )
+ })}
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/modules/layout/templates/vt-search-input/index.tsx b/src/modules/layout/templates/vt-search-input/index.tsx
new file mode 100644
index 0000000..699f2e0
--- /dev/null
+++ b/src/modules/layout/templates/vt-search-input/index.tsx
@@ -0,0 +1,40 @@
+import React from "react"
+import { MagnifyingGlass } from "@medusajs/icons"
+import {
+ LayoutComponentDefinition,
+ LayoutContext,
+} from "@vibentec/component-map"
+
+export default function VtSearchInput({
+ nodes,
+ context,
+}: {
+ nodes: LayoutComponentDefinition
+ context: LayoutContext
+}) {
+ const props = nodes.config || {}
+ const placeholder = props.placeholder ?? "Search"
+ const shortcut = props.shortcut ?? "⌘K"
+
+ return (
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/modules/layout/templates/vt-social-link/index.tsx b/src/modules/layout/templates/vt-social-link/index.tsx
new file mode 100644
index 0000000..cc2a9fa
--- /dev/null
+++ b/src/modules/layout/templates/vt-social-link/index.tsx
@@ -0,0 +1,17 @@
+import { LayoutComponentDefinition, LayoutContext } from "@vibentec/component-map"
+import { DynamicLayoutRenderer } from "@vibentec/renderer"
+
+export default function VtSocialLinks({
+ nodes,
+ context,
+}: {
+ nodes: LayoutComponentDefinition
+ context: LayoutContext
+}) {
+ const props = nodes.config ?? {}
+ return (
+
+ {nodes.children &&
+ )
+}
\ No newline at end of file
diff --git a/src/modules/layout/templates/vt-text/index.tsx b/src/modules/layout/templates/vt-text/index.tsx
new file mode 100644
index 0000000..c732c0c
--- /dev/null
+++ b/src/modules/layout/templates/vt-text/index.tsx
@@ -0,0 +1,18 @@
+import { LayoutComponentDefinition } from "@vibentec/component-map"
+
+import { LayoutContext } from "@vibentec/component-map"
+
+export default function VtText({
+ nodes,
+ context,
+}: {
+ nodes: LayoutComponentDefinition
+ context: LayoutContext
+}) {
+ const props = nodes.config || {}
+ return (
+
+ {props?.label ?? ""}
+
+ )
+}
diff --git a/src/modules/skeletons/components/vt-skeleton-mega-menu/index.tsx b/src/modules/skeletons/components/vt-skeleton-mega-menu/index.tsx
new file mode 100644
index 0000000..81c289f
--- /dev/null
+++ b/src/modules/skeletons/components/vt-skeleton-mega-menu/index.tsx
@@ -0,0 +1,12 @@
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+
+export default function SkeletonMegaMenu() {
+ return (
+