feat: add medusa starter design hero banner

feat: add hero banner for vibentec design
feat: add CTA banner vibentec design and create carousel image display

config/nam.mds-starter-design.json

@@ -134,6 +134,21 @@
       ]
     }
   },
+  {
+    "Hero": {
+      "config": {
+        "variant": "default",
+        "className": "bg-custom-gradient",
+        "ImageDisplayer": {
+          "config": {
+                 "duration": 20,
+                 "images": ["./banner-hero.webp", "./banner-hero.webp"],
+                 "links": []
+               }
+        }
+      }
+    }
+  },
   {
     "CartMismatchBanner": {
       "config": {

config/nam.vibentec.design.json

@@ -176,6 +176,37 @@
       ]
     }
   },
+  {
+    "Hero": {
+      "config": {
+        "variant": "default",
+        "className": "h-[35rem]",
+        "ImageDisplayer": {
+          "config": {
+            "duration": 1,
+            "images": [
+              "./banner-hero.webp",
+              "./banner-hero.webp"
+            ],
+            "links": []
+          }
+        },
+        "left":[{
+            "VtCtaBanner": {
+              "config": {
+                "className": "ml-[120px]",
+                "tagText": "Besonders Aktion",
+                "titleText": "Willkommen in Vibentec IT Shop",
+                "descriptionText": "Insert the accordion description here. It would look better as two lines of text or more.",
+                "buttonText": "Zum Einkaufen"
+              }
+            }
+          }],
+        "center":[],
+        "right":[]
+      }
+    }
+  },
   {
     "CartMismatchBanner": {
       "config": {
@@ -209,7 +240,10 @@
                 "logoAlt": "Vibentec IT",
                 "title": "Der Wegbereiter für innovative IT-Lösungen",
                 "description": "Tauchen Sie ein in eine Welt modernster Technologien, zuverlässiger Support und proaktiver Innovation – gemeinsam gestalten wir die digitale Zukunft Ihres Unternehmens.",
-                "cta": { "label": "Kontaktieren Sie uns", "href": "/" },
+                "cta": {
+                  "label": "Kontaktieren Sie uns",
+                  "href": "/"
+                },
                 "className": "",
                 "ctaClassName": "ml-8",
                 "titleClassName": "ml-8",
@@ -329,7 +363,11 @@
             "VtFooterBottom": {
               "config": {
                 "text": "©2025 Vibentec IT. All rights reserved",
-                "icons": ["Mastercard", "PayPal", "Visa"]
+                "icons": [
+                  "Mastercard",
+                  "PayPal",
+                  "Visa"
+                ]
               }
             }
           }

package.json

@@ -21,6 +21,8 @@
     "@radix-ui/react-accordion": "^1.2.1",
     "@stripe/react-stripe-js": "^1.7.2",
     "@stripe/stripe-js": "^1.29.0",
+    "embla-carousel-autoplay": "^8.6.0",
+    "embla-carousel-react": "^8.6.0",
     "lodash": "^4.17.21",
     "next": "^15.3.1",
     "pg": "^8.11.3",

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

@@ -30,7 +30,7 @@ export default async function Home(props: {
 
   return (
     <>
-      <Hero />
+      {/* <Hero /> */}
       <div className="py-12">
         <ul className="flex flex-col gap-x-6">
           <FeaturedProducts collections={collections} region={region} />

src/modules/layout/templates/hero/hero-default.tsx

@@ -0,0 +1,45 @@
+import { Github } from "@medusajs/icons"
+import { Button, Heading } from "@medusajs/ui"
+import { VtCarousel } from "../vt-carousel"
+import { LayoutComponentDefinition, LayoutContext } from "vibentec/component-map"
+
+export default function HeroDefault({ node, context }: { node: LayoutComponentDefinition; context: LayoutContext }) {
+  const props = node.config ?? {}
+  const imageDisplayer = props.ImageDisplayer
+
+  if (imageDisplayer) {
+    return (
+      <div className="absolute inset-0 z-10 w-full h-full">
+        <VtCarousel nodes={{ config: imageDisplayer.config }} context={context} />
+      </div>
+    )
+  }
+
+  return (
+    <div className="absolute inset-0 z-10 flex flex-col justify-center items-center text-center small:p-32 gap-6">
+      <span>
+        <Heading
+          level="h1"
+          className="text-3xl leading-10 text-ui-fg-base font-normal"
+        >
+          Ecommerce Starter Template
+        </Heading>
+        <Heading
+          level="h2"
+          className="text-3xl leading-10 text-ui-fg-subtle font-normal"
+        >
+          Powered by Medusa and Next.js
+        </Heading>
+      </span>
+      <a
+        href="https://github.com/medusajs/nextjs-starter-medusa"
+        target="_blank"
+      >
+        <Button variant="secondary">
+          View on GitHub
+          <Github />
+        </Button>
+      </a>
+    </div>
+  )
+}

src/modules/layout/templates/hero/hero-vibentec.tsx

@@ -0,0 +1,28 @@
+import { Github } from "@medusajs/icons"
+import { Button, clx, Heading } from "@medusajs/ui"
+import {
+  LayoutComponentDefinition,
+  LayoutContext,
+} from "@vibentec/component-map"
+import { VtCarousel } from "../vt-carousel"
+
+interface Props {
+  node: LayoutComponentDefinition
+  context: LayoutContext
+}
+const HeroVibentec = ({ node, context }: Props) => {
+  const props = node.config ?? {}
+  const imageDisplayer = props.ImageDisplayer
+
+  return (
+    <div className={clx(props.className)}>
+      {imageDisplayer ? (
+        <VtCarousel nodes={{ config: imageDisplayer.config }} context={context} />
+      ) : (
+        <VtCarousel nodes={node} context={context} />
+      )}
+    </div>
+  )
+}
+
+export default HeroVibentec

src/modules/layout/templates/hero/index.tsx

@@ -0,0 +1,58 @@
+import {
+  LayoutComponentDefinition,
+  LayoutContext,
+} from "vibentec/component-map"
+import { clx } from "@medusajs/ui"
+import BannerHeroVibentec from "../hero/hero-vibentec"
+import BannerHeroDefault from "../hero/hero-default"
+import { DynamicLayoutRenderer } from "vibentec/renderer"
+
+interface BannerProps {
+  variant: "vibentec" | "default"
+  className?: string
+}
+export default async function Hero({
+  nodes,
+  context,
+}: {
+  nodes: LayoutComponentDefinition
+  context: LayoutContext
+}) {
+  const props = (nodes.config as BannerProps) ?? {}
+  const left = nodes.config?.left ?? []
+  const center = nodes.config?.center ?? []
+  const right = nodes.config?.right ?? []
+  const heroClassName = clx(
+    "min-h-[30rem] w-full border-b border-ui-border-base relative",
+    props.className
+  )
+  if (!props.variant) return null
+
+  const variants = {
+    vibentec: BannerHeroVibentec,
+    default: BannerHeroDefault,
+  }
+
+  const Component = variants[props.variant]
+
+  return (
+    <div className={heroClassName}>
+      <Component node={nodes} context={context} />
+      <div className="absolute inset-0 z-20 w-full h-full">
+        <nav className="content-container txt-xsmall-plus flex items-center justify-between w-full h-full text-small-regular">
+          <div className="flex items-center gap-x-4 w-full h-full">
+            {left && <DynamicLayoutRenderer nodes={left} context={context} />}
+          </div>
+          <div className="flex items-center gap-x-4 w-full h-full">
+            {center && (
+              <DynamicLayoutRenderer nodes={center} context={context} />
+            )}
+          </div>
+          <div className="flex items-center gap-x-4 w-full h-full justify-end">
+            {right && <DynamicLayoutRenderer nodes={right} context={context} />}
+          </div>
+        </nav>
+      </div>
+    </div>
+  )
+}

src/modules/layout/templates/vt-carousel/carousel-arrow-button.tsx

@@ -0,0 +1,75 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import style from './index.module.css'
+export const usePrevNextButtons = (emblaApi: any) => {
+  const [prevBtnDisabled, setPrevBtnDisabled] = useState(true)
+  const [nextBtnDisabled, setNextBtnDisabled] = useState(true)
+
+  const onPrevButtonClick = useCallback(() => {
+    if (!emblaApi) return
+    emblaApi.scrollPrev()
+  }, [emblaApi])
+
+  const onNextButtonClick = useCallback(() => {
+    if (!emblaApi) return
+    emblaApi.scrollNext()
+  }, [emblaApi])
+
+  const onSelect = useCallback((emblaApi: any) => {
+    setPrevBtnDisabled(!emblaApi.canScrollPrev())
+    setNextBtnDisabled(!emblaApi.canScrollNext())
+  }, [])
+
+  useEffect(() => {
+    if (!emblaApi) return
+
+    onSelect(emblaApi)
+    emblaApi.on('reInit', onSelect).on('select', onSelect)
+  }, [emblaApi, onSelect])
+
+  return {
+    prevBtnDisabled,
+    nextBtnDisabled,
+    onPrevButtonClick,
+    onNextButtonClick
+  }
+}
+
+export const PrevButton = (props: any) => {
+  const { children, ...restProps } = props
+
+  return (
+    <button
+      className={style['embla__button']}
+      type="button"
+      {...restProps}
+    >
+      <svg className={style['embla__button__svg']} viewBox="0 0 532 532">
+        <path
+          fill="currentColor"
+          d="M355.66 11.354c13.793-13.805 36.208-13.805 50.001 0 13.785 13.804 13.785 36.238 0 50.034L201.22 266l204.442 204.61c13.785 13.805 13.785 36.239 0 50.044-13.793 13.796-36.208 13.796-50.002 0a5994246.277 5994246.277 0 0 0-229.332-229.454 35.065 35.065 0 0 1-10.326-25.126c0-9.2 3.393-18.26 10.326-25.2C172.192 194.973 332.731 34.31 355.66 11.354Z"
+        />
+      </svg>
+      {children}
+    </button>
+  )
+}
+
+export const NextButton = (props: any) => {
+  const { children, ...restProps } = props
+
+  return (
+    <button
+      className={style['embla__button']}
+      type="button"
+      {...restProps}
+    >
+      <svg className={style['embla__button__svg']} viewBox="0 0 532 532">
+        <path
+          fill="currentColor"
+          d="M176.34 520.646c-13.793 13.805-36.208 13.805-50.001 0-13.785-13.804-13.785-36.238 0-50.034L330.78 266 126.34 61.391c-13.785-13.805-13.785-36.239 0-50.044 13.793-13.796 36.208-13.796 50.002 0 22.928 22.947 206.395 206.507 229.332 229.454a35.065 35.065 0 0 1 10.326 25.126c0 9.2-3.393 18.26-10.326 25.2-45.865 45.901-206.404 206.564-229.332 229.52Z"
+        />
+      </svg>
+      {children}
+    </button>
+  )
+}

src/modules/layout/templates/vt-carousel/carousel-dot-button.tsx

@@ -0,0 +1,46 @@
+import React, { useCallback, useEffect, useState } from 'react'
+
+export const useDotButton = (emblaApi: any) => {
+  const [selectedIndex, setSelectedIndex] = useState(0)
+  const [scrollSnaps, setScrollSnaps] = useState([])
+
+  const onDotButtonClick = useCallback(
+    (index: number) => {
+      if (!emblaApi) return
+      emblaApi.scrollTo(index)
+    },
+    [emblaApi]
+  )
+
+  const onInit = useCallback((emblaApi: any) => {
+    setScrollSnaps(emblaApi.scrollSnapList())
+  }, [])
+
+  const onSelect = useCallback((emblaApi: any) => {
+    setSelectedIndex(emblaApi.selectedScrollSnap())
+  }, [])
+
+  useEffect(() => {
+    if (!emblaApi) return
+
+    onInit(emblaApi)
+    onSelect(emblaApi)
+    emblaApi.on('reInit', onInit).on('reInit', onSelect).on('select', onSelect)
+  }, [emblaApi, onInit, onSelect])
+
+  return {
+    selectedIndex,
+    scrollSnaps,
+    onDotButtonClick
+  }
+}
+
+export const DotButton = (props: any) => {
+  const { children, ...restProps } = props
+
+  return (
+    <button type="button" {...restProps}>
+      {children}
+    </button>
+  )
+}

src/modules/layout/templates/vt-carousel/index.module.css

@@ -0,0 +1,136 @@
+.embla {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  margin: auto;
+  --slide-height: 19rem;
+  --slide-spacing: 1rem;
+  --slide-size: 100%;
+}
+.embla__viewport {
+  height: 100%;
+  overflow: hidden;
+}
+.embla__container {
+  display: flex;
+  height: 100%;
+  touch-action: pan-y pinch-zoom;
+  margin-left: calc(var(--slide-spacing) * -1);
+  --slide-spacing: 1rem;
+}
+.embla__slide {
+  --slide-size: 100%;
+  --slide-spacing: 1rem;
+  transform: translate3d(0, 0, 0);
+  flex: 0 0 var(--slide-size);
+  min-width: 0;
+  padding-left: var(--slide-spacing);
+}
+.embla__slide__number {
+  height: 100%;
+  font-size: 4rem;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+}
+.embla__slide__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.embla__controls {
+  display: grid;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  grid-template-columns: auto 1fr;
+  justify-content: space-between;
+  gap: 1.2rem;
+}
+.embla__buttons {
+  position: absolute;
+  top: 45%;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.embla__button {
+  --text-high-contrast-rgb-value: 49, 49, 49;
+  --detail-high-contrast: rgb(192, 192, 192);
+  --text-body: rgb(54, 49, 61);
+  -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: transparent;
+  touch-action: manipulation;
+  text-decoration: none;
+  cursor: pointer;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  width: 3.6rem;
+  height: 3.6rem;
+  z-index: 1;
+  border-radius: 50%;
+  color: var(--text-body);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.embla__button:disabled {
+  --detail-high-contrast: rgb(192, 192, 192);
+  color: var(--detail-high-contrast);
+}
+.embla__button__svg {
+  width: 35%;
+  height: 35%;
+}
+.embla__dots {
+  display: flex;
+  position: absolute;
+  bottom: 0;
+  left: 48%;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: center;
+}
+.embla__dot {
+  --text-high-contrast-rgb-value: 49, 49, 49;
+  --text-body: rgb(54, 49, 61);
+  -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: transparent;
+  touch-action: manipulation;
+  text-decoration: none;
+  cursor: pointer;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  width: 1.6rem;
+  height: 1.6rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+}
+.embla__dot:after {
+  --detail-medium-contrast: rgb(234, 234, 234);
+  --detail-medium-contrast-rgb-value: 234, 234, 234;
+  box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
+  width: 0.42rem;
+  height: 0.42rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  content: "";
+}
+.embla__dot--selected:after {
+  --text-body: black;
+  box-shadow: inset 0 0 0 0.2rem var(--text-body);
+}

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

@@ -0,0 +1,80 @@
+"use client"
+import {
+  LayoutComponentDefinition,
+  LayoutContext,
+} from "@vibentec/component-map"
+import styles from "./index.module.css"
+import useEmblaCarousel from "embla-carousel-react"
+import Autoplay from "embla-carousel-autoplay"
+import { useMemo } from "react"
+import { DotButton, useDotButton } from "./carousel-dot-button"
+import { NextButton, PrevButton, usePrevNextButtons } from "./carousel-arrow-button"
+export function VtCarousel({
+  nodes,
+  context,
+}: {
+  nodes: LayoutComponentDefinition
+  context: LayoutContext
+}) {
+  const props = nodes.config ?? {}
+  const { options } = props as any
+  const images: string[] = (props as any).images ?? (props as any).slides ?? []
+  const links: (string | undefined)[] = (props as any).links ?? []
+  const durationSeconds: number = props.duration ?? 4
+
+  const plugins = useMemo(() => [
+    Autoplay({ delay: Math.max(1, durationSeconds) * 1000, stopOnInteraction: false, stopOnMouseEnter: true, })
+  ], [durationSeconds])
+
+  const [emblaRef, emblaApi] = useEmblaCarousel(options, plugins)
+  const { selectedIndex, scrollSnaps, onDotButtonClick } =
+    useDotButton(emblaApi)
+
+  const {
+    prevBtnDisabled,
+    nextBtnDisabled,
+    onPrevButtonClick,
+    onNextButtonClick,
+  } = usePrevNextButtons(emblaApi)
+  return (
+    <section className={styles["embla"]}>
+      <div className={styles["embla__viewport"]} ref={emblaRef}>
+        <div className={styles["embla__container"]}>
+          {images && images.map((src: string, index: number) => (
+            <div className={styles["embla__slide"]} key={index}>
+              <div className={styles["embla__slide__number"]}>
+                {links[index] ? (
+                  <a href={links[index]}>
+                    <img src={src} alt={`slide-${index + 1}`} className={styles["embla__slide__image"]} />
+                  </a>
+                ) : (
+                  <img src={src} alt={`slide-${index + 1}`} className={styles["embla__slide__image"]} />
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className={styles["embla__controls"]}>
+        <div className={styles["embla__buttons"]}>
+          <PrevButton onClick={onPrevButtonClick} disabled={prevBtnDisabled} />
+          <NextButton onClick={onNextButtonClick} disabled={nextBtnDisabled} />
+        </div>
+
+        <div className={styles["embla__dots"]}>
+          {scrollSnaps.map((_, index) => (
+            <DotButton
+              key={index}
+              onClick={() => onDotButtonClick(index)}
+              className={[
+                styles["embla__dot"],
+                index === selectedIndex ? styles["embla__dot--selected"] : "",
+              ].filter(Boolean).join(" ")}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

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

@@ -0,0 +1,40 @@
+"use client"
+import { Button, clx } from "@medusajs/ui"
+import { ChevronRightMini } from "@medusajs/icons"
+import {
+  LayoutComponentDefinition,
+  LayoutContext,
+} from "@vibentec/component-map"
+
+export function VtCtaBanner({
+  nodes,
+  context,
+}: {
+  nodes: LayoutComponentDefinition
+  context: LayoutContext
+}) {
+  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="inline-flex items-center rounded-full bg-[#FCE9DA] text-[#E68445] px-3 py-1 text-sm font-medium">
+        {props.tagText}
+      </div>
+
+      <h1 className="mt-4 text-[#11314E] font-semibold leading-tight text-[56px]">
+        {props.titleText}
+      </h1>
+
+      <p className="mt-5 text-[#285A86] text-[16px] sm:text-xl opacity-80">
+        {props.descriptionText}
+      </p>
+
+      <Button className="mt-8 inline-flex items-center gap-2 bg-[#0F2740] hover:bg-[#173551] text-white px-6 py-3 rounded-[12px] shadow-md">
+        {props.buttonText}
+        <ChevronRightMini />
+      </Button>
+    </div>
+  )
+}

src/styles/globals.css

@@ -113,4 +113,4 @@
 }
 [data-radix-popper-content-wrapper]{
   z-index: 51 !important;
-}
+}

src/vibentec/component-map.tsx

@@ -22,42 +22,56 @@ import VtFooterHero from "@modules/layout/templates/vt-footer/vt-footer-hero"
 import VtFooterBottom from "@modules/layout/templates/vt-footer/vt-footer-bottom"
 import VtLogo from "@modules/layout/templates/vt-logo"
 import VtFooterSignUp from "@modules/layout/templates/vt-footer/vt-footer-signup"
+import Hero from "@modules/layout/templates/hero"
+import { VtCarousel } from "@modules/layout/templates/vt-carousel"
+import { VtCtaBanner } from "@modules/layout/templates/vt-cta-banner"
 
-type ComponentConfig = Record<string, any>;
+type ComponentConfig = Record<string, any>
 
 export interface LayoutComponentDefinition {
   config?: ComponentConfig
   children?: LayoutComponentNode[]
 }
 
-export interface LayoutContext { 
-  customer: any; 
-  cart: any;
-  shippingOptions: any[]; 
-  contentChildren: React.ReactNode; 
+export interface LayoutContext {
+  customer: any
+  cart: any
+  shippingOptions: any[]
+  contentChildren: React.ReactNode
 }
 
 export type ComponentRenderer = {
-  render: (entry: LayoutComponentDefinition, ctx: LayoutContext) => React.ReactNode
+  render: (
+    entry: LayoutComponentDefinition,
+    ctx: LayoutContext
+  ) => React.ReactNode
 }
 
 // Utility methods
-const   configOnly = (Component: React.ComponentType<any>): ComponentRenderer => ({
-  render: (entry) => <Component {...entry.config} />
+const configOnly = (
+  Component: React.ComponentType<any>
+): ComponentRenderer => ({
+  render: (entry) => <Component {...entry.config} />,
 })
 
-const nodesContextRenderer = (Component: React.ComponentType<any>): ComponentRenderer => ({
-  render: (entry: any, ctx: LayoutContext) => <Component nodes={entry} context={ctx} />
-});
+const nodesContextRenderer = (
+  Component: React.ComponentType<any>
+): ComponentRenderer => ({
+  render: (entry: any, ctx: LayoutContext) => (
+    <Component nodes={entry} context={ctx} />
+  ),
+})
 
 const renderChildren = (entry: LayoutComponentDefinition, ctx: LayoutContext) =>
-  entry.children ? <DynamicLayoutRenderer nodes={entry.children} context={ctx} /> : null
-
+  entry.children ? (
+    <DynamicLayoutRenderer nodes={entry.children} context={ctx} />
+  ) : null
 
 // Component Map
 export const componentMap: Record<string, ComponentRenderer> = {
-  Header:    nodesContextRenderer(VtHeader),
+  Header: nodesContextRenderer(VtHeader),
   Nav: nodesContextRenderer(VtNav),
+  Hero: nodesContextRenderer(Hero),
   VtMegaMenu: nodesContextRenderer(VtMegaMenu),
   VtSideMenu: nodesContextRenderer(VtSideMenu),
   Banner: nodesContextRenderer(Banner),
@@ -75,17 +89,20 @@ export const componentMap: Record<string, ComponentRenderer> = {
   CartMismatchBanner: configOnly(CartMismatchBanner),
   FreeShippingPriceNudge: configOnly(FreeShippingPriceNudge),
   PropsChildren: {
-    render: (_props, ctx) => ctx.contentChildren,  // PageLayout's props.children 
+    render: (_props, ctx) => ctx.contentChildren, // PageLayout's props.children
   },
+  VtCtaBanner: nodesContextRenderer(VtCtaBanner),
   VtFooterHero: nodesContextRenderer(VtFooterHero),
   VtFooterBottom: nodesContextRenderer(VtFooterBottom),
   VtFooterSignUp: nodesContextRenderer(VtFooterSignUp),
-  Footer: nodesContextRenderer(VtFooter)
+  Footer: nodesContextRenderer(VtFooter),
+  ImageDisplayer: nodesContextRenderer(VtCarousel),
 }
 
-
 export type ComponentName = keyof typeof componentMap
 
 // //maps key = componentName to value = props + children
 // export type LayoutComponentNode = Record<string, LayoutComponentDefinition>
-export type LayoutComponentNode = { [K in ComponentName]: LayoutComponentDefinition }[ComponentName]
+export type LayoutComponentNode = {
+  [K in ComponentName]: LayoutComponentDefinition
+}[ComponentName]

src/vibentec/configloader.ts

@@ -2,7 +2,7 @@ import fs from "fs"
 import path from "path"
 import { jsonFileNames } from "./devJsonFileNames";
 
-const fileName = jsonFileNames.nam3Bear;
+const fileName = jsonFileNames.namVibentec;
 
 export async function loadDesignConfig() {
   const filePath = path.join(process.cwd(), "config", fileName)