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-nav/index.tsx

@@ -1,26 +1,22 @@
-import { listRegions } from "@lib/data/regions"
-import { StoreRegion } from "@medusajs/types"
-import SideMenu from "@modules/layout/components/side-menu"
-import { DynamicLayoutRenderer, DynamicLayoutRendererProps } from "vibentec/renderer"
+import { DynamicLayoutRenderer } from "vibentec/renderer"
+import { LayoutComponentDefinition, LayoutContext } from "vibentec/component-map";
 
-export default async function VtNav({ nodes, context }: DynamicLayoutRendererProps) {
-  const regions = await listRegions().then((regions: StoreRegion[]) => regions)
+export default function VtNav({ nodes, context }: { nodes: LayoutComponentDefinition; context: LayoutContext }) {
+  const props = nodes.config ?? {}
 
   return (
-    <div className="sticky top-0 inset-x-0 z-50 group">
-      <header className="relative h-16 mx-auto border-b duration-200 bg-white border-ui-border-base">
-        <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-1 basis-0 h-full flex items-center">
-            <div className="h-full">
-              <SideMenu regions={regions} />
-            </div>
-          </div>
-
-          {nodes && (
-            <DynamicLayoutRenderer nodes={nodes} context={context} />
-          )}
-        </nav>
-      </header>
+    <div className="relative h-16 mx-auto border-b duration-200 bg-white border-ui-border-base">
+      <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>
     </div>
   )
-}
+}