added packages to support markdown

added dummy pages for about and contact.
updated tailwind.config.js to include config/*.json to scan for classes.
refactored system basics. Removed component-props, using generic LayoutComponentDefinition and LayoutContext. cleanup component-map. Updated renderer to be more failsafe.

new abstracted components:
 vt-mega-menu,
vt-sidemenu,
vt-banner with 3 variants,
vt-header,
vt-homebutton,
vt-cartbutton,
vt-accountbutton,
vt-linkbutton,

src/modules/layout/templates/vt-banner/banner-cta.tsx

@@ -0,0 +1,52 @@
+"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
+}
+
+export default function BannerCTA({ node, context }: BannerCTAProps) {
+  const props = node.config ?? {}
+  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 = (
+    <div className="flex items-center gap-2">
+      {iconLeft && <DynamicIcon name={iconLeft} />}
+      <div className="leading-none">
+        <ReactMarkdown
+          children={text}
+          remarkPlugins={[remarkBreaks]}
+          rehypePlugins={[rehypeRaw]}
+        />
+      </div>
+      {iconRight && <DynamicIcon name={iconRight} />}
+    </div>
+  )
+
+  return href ? (
+    <LocalizedClientLink href={href} className={className}>
+      {content}
+    </LocalizedClientLink>
+  ) : (
+    <div className={className}>{content}</div>
+  )
+}
+
+function DynamicIcon({ name }: { name: string }) {
+  return <span className="material-symbols-outlined text-sm">{name}</span>
+}

src/modules/layout/templates/vt-banner/banner-nav.tsx

@@ -0,0 +1,20 @@
+import { DynamicLayoutRenderer } from "vibentec/renderer"
+import { LayoutComponentDefinition, LayoutContext } from "vibentec/component-map";
+
+export default function BannerNav({ node: node, context }: { node: LayoutComponentDefinition; context: LayoutContext }) {
+  const props = node.config ?? {};
+
+  return (
+    <nav className="content-container txt-xsmall-plus text-ui-fg-subtle flex items-center justify-between w-full h-full text-small-regular">
+      <div className="flex items-center gap-x-4">
+        {props.left && <DynamicLayoutRenderer nodes={props.left} context={context} />}
+      </div>
+      <div className="flex items-center gap-x-4">
+        {props.center && <DynamicLayoutRenderer nodes={props.center} context={context} />}
+      </div>
+      <div className="flex items-center gap-x-4">
+        {props.right && <DynamicLayoutRenderer nodes={props.right} context={context} />}
+      </div>
+    </nav>
+  )
+}

src/modules/layout/templates/vt-banner/banner-ticker.module.css

@@ -0,0 +1,12 @@
+@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%;  
+}

src/modules/layout/templates/vt-banner/banner-ticker.tsx

@@ -0,0 +1,15 @@
+import styles from "./banner-ticker.module.css"
+import { DynamicLayoutRenderer } from "vibentec/renderer"
+import { LayoutComponentDefinition, LayoutContext } from "vibentec/component-map"
+
+export default function BannerTicker({ node, context }: { node: LayoutComponentDefinition; context: LayoutContext }) {
+  const props = node.config ?? {}
+  const speed = props.speed ?? 10;
+  return (
+    <div className="relative overflow-hidden w-full h-full">
+      <div className={styles.ticker}   style={{ animationDuration: `${speed}s` }} >
+        <DynamicLayoutRenderer nodes={props.items} context={context} />
+      </div>
+    </div>
+  )
+}

src/modules/layout/templates/vt-banner/index.tsx

@@ -0,0 +1,26 @@
+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";
+
+export default async function Banner({ nodes, context }: { nodes: LayoutComponentDefinition; context: LayoutContext }) {
+  const props = nodes.config ?? {};
+  const bannerClassName = clx("relative h-8 mx-auto border-b duration-200 bg-white border-ui-border-base", props.className);
+  const bannerVariant = props.variant as "nav" | "cta" | "ticker";
+  if (!bannerVariant) return null;
+
+  const variants = {
+    "nav": BannerNav,
+    "cta": BannerCTA,
+    "ticker": BannerTicker,
+  };
+
+  const Component = variants[bannerVariant];
+
+  return (
+    <div className={bannerClassName}>
+      <Component node={nodes} context={context}/>
+    </div>
+  );
+}