update: refactor construct json file to map with each router with component

config/nam.3bear.design.json

@@ -1,4 +1,5 @@
-[
+{
+  "layout": [
     {
       "Header": {
         "config": {
@@ -13,30 +14,9 @@
                 "className": "h-12 bg-[#009b93] text-[#fff] gap-12",
                 "speed": 24,
                 "items": [
-                {
+                  { "Link": { "config": { "label": "NEU: Overnight Oats – Sallys Nussecke 😍", "href": "/" } } },
-                  "Link": {
+                  { "Link": { "config": { "label": "Versandkostenfrei ab 45 € 💛", "href": "/" } } },
-                    "config": {
+                  { "Link": { "config": { "label": "Gratis Geschenk ab 60 € Warenkorbwert 🎁", "href": "/" } } }
-                      "label": "NEU: Overnight Oats – Sallys Nussecke 😍",
-                      "href": "/"
-                    }
-                  }
-                },
-                {
-                  "Link": {
-                    "config": {
-                      "label": "Versandkostenfrei ab 45 € 💛",
-                      "href": "/"
-                    }
-                  }
-                },
-                {
-                  "Link": {
-                    "config": {
-                      "label": "Gratis Geschenk ab 60 € Warenkorbwert 🎁",
-                      "href": "/"
-                    }
-                  }
-                }
                 ]
               }
             }
@@ -46,130 +26,18 @@
               "config": {
                 "className": "h-24 bg-white text-[#003F31] gap-12",
                 "left": [
-                {
+                  { "Logo": { "config": { "src": "/3bear-logo.png", "alt": "MyShop", "className": "h-[150px] w-[180px]", "objectFit": "contain" } } },
-                  "Logo": {
+                  { "VtMegaMenu": { "config": { "navLabel": { "text": "Shop", "className": "font-bold text-[1rem] text-[#003F31] flex items-center mr-8 gap-1 hover:text-[#009b93]", "isShowArrow": true } } } },
-                    "config": {
+                  { "Dropdown": { "config": { "trigger": { "text": "Über Uns", "className": "font-bold text-[1rem] text-[#003F31] flex items-center mr-8 gap-1 hover:text-[#009b93]", "isShowArrow": true }, "items": [ { "text": "Unser Unternehmen", "href": "/" }, { "text": "Loren ipsum", "href": "/" }, { "text": "Not a Link" } ] } } },
-                      "src": "/3bear-logo.png",
+                  { "Dropdown": { "config": { "trigger": { "text": "Über unsere Produkte", "className": "font-bold text-[1rem] text-[#003F31] flex items-center mr-8 gap-1 hover:text-[#009b93]", "isShowArrow": true }, "items": [ { "text": "Unser Unternehmen", "href": "/" }, { "text": "Loren ipsum", "href": "/" }, { "text": "Not a Link" } ] } } },
-                      "alt": "MyShop",
+                  { "Link": { "config": { "label": "Rezepte", "href": "/", "className": "font-bold text-[1rem] text-[#003F31] flex items-center mr-8 gap-1 hover:text-[#009b93]" } } },
-                      "className": "h-[150px] w-[180px]",
+                  { "Link": { "config": { "label": "Triff Harry Kane", "href": "/", "className": "font-bold text-[1rem] text-[#003F31] flex items-center gap-1 hover:text-[#009b93]" } } }
-                      "objectFit": "contain"
-                    }
-                  }
-                },
-                {
-                  "VtMegaMenu": {
-                    "config": {
-                      "navLabel": {
-                        "text": "Shop",
-                        "className": "font-bold text-[1rem] text-[#003F31] flex items-center mr-8 gap-1 hover:text-[#009b93]",
-                        "isShowArrow": true
-                      }
-                    }
-                  }
-                },
-                {
-                  "Dropdown": {
-                    "config": {
-                      "trigger": {
-                        "text": "Über Uns",
-                        "className": "font-bold text-[1rem] text-[#003F31] flex items-center mr-8 gap-1 hover:text-[#009b93]",
-                        "isShowArrow": true
-                      },
-                      "items": [
-                        {
-                          "text": "Unser Unternehmen",
-                          "href": "/"
-                        },
-                        {
-                          "text": "Loren ipsum",
-                          "href": "/"
-                        },
-                        {
-                          "text": "Not a Link"
-                        }
-                      ]
-                    }
-                  }
-                },
-                {
-                  "Dropdown": {
-                    "config": {
-                      "trigger": {
-                        "text": "Über unsere Produkte",
-                        "className": "font-bold text-[1rem] text-[#003F31] flex items-center mr-8 gap-1 hover:text-[#009b93]",
-                        "isShowArrow": true
-                      },
-                      "items": [
-                        {
-                          "text": "Unser Unternehmen",
-                          "href": "/"
-                        },
-                        {
-                          "text": "Loren ipsum",
-                          "href": "/"
-                        },
-                        {
-                          "text": "Not a Link"
-                        }
-                      ]
-                    }
-                  }
-                },
-                {
-                  "Link": {
-                    "config": {
-                      "label": "Rezepte",
-                      "href": "/",
-                      "className": "font-bold text-[1rem] text-[#003F31] flex items-center mr-8 gap-1 hover:text-[#009b93]"
-                    }
-                  }
-                },
-                {
-                  "Link": {
-                    "config": {
-                      "label": "Triff Harry Kane",
-                      "href": "/",
-                      "className": "font-bold text-[1rem] text-[#003F31] flex items-center gap-1 hover:text-[#009b93]"
-                    }
-                  }
-                }
                 ],
                 "right": [
-                {
+                  { "VtCountryCodeSelect": { "config": { "trigger": { "className": "w-auto font-bold text-[13px] text-[#11314E] flex justify-start items-center gap-1 hover:text-[#009b93] bg-transparent shadow-none hover:bg-transparent", "isFlag": true, "isDisplayFullname": true } } } },
-                  "VtCountryCodeSelect": {
+                  { "Button": { "config": { "icon": "MagnifyingGlass", "className": "shadow-none" } } },
-                    "config": {
+                  { "AccountButton": { "config": { "icon": "User", "className": " flex items-center gap-1 shadow-none" } } },
-                      "trigger": {
+                  { "VtCartButton": { "config": { "icon": "ShoppingBag", "className": "shadow-none bg-transparent text-black w-[50px]" } } }
-                        "className": "w-auto font-bold text-[13px] text-[#11314E] flex justify-start items-center gap-1 hover:text-[#009b93] bg-transparent shadow-none hover:bg-transparent",
-                        "isFlag": true,
-                        "isDisplayFullname": true
-                      }
-                    }
-                  }
-                },
-                {
-                  "Button": {
-                    "config": {
-                      "icon": "MagnifyingGlass",
-                      "className": "shadow-none"
-                    }
-                  }
-                },
-                {
-                  "AccountButton": {
-                    "config": {
-                      "icon": "User",
-                      "className": " flex items-center gap-1 shadow-none"
-                    }
-                  }
-                },
-                {
-                  "VtCartButton": {
-                    "config": {
-                      "icon": "ShoppingBag",
-                      "className": "shadow-none bg-transparent text-black w-[50px]"
-                    }
-                  }
-                }
                 ]
               }
             }
@@ -177,53 +45,7 @@
         ]
       }
     },
-  {
+    { "PropsChildren": {} },
-    "Hero": {
-      "config": {
-        "className": "h-[35rem]",
-        "ImageDisplayer": {
-          "config": {
-            "duration": 0,
-            "images": ["./banner-hero.webp"],
-            "links": ["/account"]
-          }
-        },
-        "left": [
-          {
-            "VtCtaBanner": {
-              "config": {
-                "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"
-              }
-            }
-          }
-        ],
-        "center": [],
-        "right": []
-      }
-    }
-  },
-  {
-    "CartMismatchBanner": {
-      "config": {
-        "show": true
-      }
-    }
-  },
-  {
-    "FreeShippingPriceNudge": {
-      "config": {
-        "variant": "popup"
-      }
-    }
-  },
-  {
-    "PropsChildren": {}
-  },
     {
       "Footer": {
         "config": {
@@ -232,122 +54,13 @@
           "centerClassName": "",
           "rightClassName": "flex gap-[10rem] mr-[80px]",
           "left": [
-          {
+            { "VtFooterHero": { "config": { "logoClassName": "h-[100px] w-[200px]", "logoSrc": "/3bear-white-logo.avif", "logoAlt": "3Bear", "title": "Melde dich für unsere Oatnews an 💛", "email": { "emailInputClassName": "w-[300px] ml-8" }, "socials": [ { "icon": "Twitter", "href": "/", "className": "w-5 h-5 text-white" }, { "icon": "Twitter", "href": "/", "className": "w-5 h-5 text-white" }, { "icon": "Twitter", "href": "/", "className": "w-5 h-5 text-white" }, { "icon": "Twitter", "href": "/", "className": "w-5 h-5 text-white" } ], "socialsClassName": "ml-8 mt-10", "className": "", "ctaClassName": "ml-8", "titleClassName": "ml-8 text-white w-full", "descriptionClassName": "ml-8" } } }
-            "VtFooterHero": {
-              "config": {
-                "logoClassName": "h-[100px] w-[200px]",
-                "logoSrc": "/3bear-white-logo.avif",
-                "logoAlt": "3Bear",
-                "title": "Melde dich für unsere Oatnews an 💛",
-                "email": {
-                  "emailInputClassName": "w-[300px] ml-8"
-                },
-                "socials": [
-                  {
-                    "icon": "Twitter",
-                    "href": "/",
-                    "className": "w-5 h-5 text-white"
-                  },
-                  {
-                    "icon": "Twitter",
-                    "href": "/",
-                    "className": "w-5 h-5 text-white"
-                  },
-                  {
-                    "icon": "Twitter",
-                    "href": "/",
-                    "className": "w-5 h-5 text-white"
-                  },
-                  {
-                    "icon": "Twitter",
-                    "href": "/",
-                    "className": "w-5 h-5 text-white"
-                  }
-                ],
-                "socialsClassName": "ml-8 mt-10",
-                "className": "",
-                "ctaClassName": "ml-8",
-                "titleClassName": "ml-8 text-white w-full",
-                "descriptionClassName": "ml-8"
-              }
-            }
-          }
           ],
           "center": [],
           "right": [
-          {
+            { "VtMenuItem": { "config": { "title": "Information", "className": "flex flex-col gap-y-2 text-[24px] font-semibold text-white hover:text-white", "itemClassName": "text-[1rem] font-[400] opacity-70 hover:text-white", "items": [ { "text": "Über Uns", "href": "/" }, { "text": "Placeholder", "href": "/categories/shoes" }, { "text": "Placeholder", "href": "/categories/accessories" } ] } } },
-            "VtMenuItem": {
+            { "VtMenuItem": { "config": { "title": "Kundendienst", "className": "flex flex-col gap-y-2 text-[24px] font-semibold text-white hover:text-white", "itemClassName": "text-[1rem] font-[400] flex items-center opacity-70 hover:text-white", "items": [ { "text": "Twitter", "href": "/" }, { "text": "Facebook", "href": "/categories/shoes" }, { "text": "Pinterest", "href": "/categories/accessories" } ] } } },
-              "config": {
+            { "VtMenuItem": { "config": { "title": "Weiteres", "className": "flex flex-col gap-y-2 text-[24px] font-semibold text-white", "itemClassName": "text-[1rem] font-[400] w-[150px] opacity-70 hover:text-white", "items": [ { "text": "Karriere", "href": "/" }, { "text": "Unser Team", "href": "/categories/shoes" }, { "text": "B2B", "href": "/categories/accessories" }, { "text": "Presse", "href": "/categories/accessories" } ] } } }
-                "title": "Information",
-                "className": "flex flex-col gap-y-2 text-[24px] font-semibold text-white hover:text-white",
-                "itemClassName": "text-[1rem] font-[400] opacity-70 hover:text-white",
-                "items": [
-                  {
-                    "text": "Über Uns",
-                    "href": "/"
-                  },
-                  {
-                    "text": "Placeholder",
-                    "href": "/categories/shoes"
-                  },
-                  {
-                    "text": "Placeholder",
-                    "href": "/categories/accessories"
-                  }
-                ]
-              }
-            }
-          },
-          {
-            "VtMenuItem": {
-              "config": {
-                "title": "Kundendienst",
-                "className": "flex flex-col gap-y-2 text-[24px] font-semibold text-white hover:text-white",
-                "itemClassName": "text-[1rem] font-[400] flex items-center opacity-70 hover:text-white",
-                "items": [
-                  {
-                    "text": "Twitter",
-                    "href": "/"
-                  },
-                  {
-                    "text": "Facebook",
-                    "href": "/categories/shoes"
-                  },
-                  {
-                    "text": "Pinterest",
-                    "href": "/categories/accessories"
-                  }
-                ]
-              }
-            }
-          },
-          {
-            "VtMenuItem": {
-              "config": {
-                "title": "Weiteres",
-                "className": "flex flex-col gap-y-2 text-[24px] font-semibold text-white",
-                "itemClassName": "text-[1rem] font-[400] w-[150px] opacity-70 hover:text-white",
-                "items": [
-                  {
-                    "text": "Karriere",
-                    "href": "/"
-                  },
-                  {
-                    "text": "Unser Team",
-                    "href": "/categories/shoes"
-                  },
-                  {
-                    "text": "B2B",
-                    "href": "/categories/accessories"
-                  },
-                  {
-                    "text": "Presse",
-                    "href": "/categories/accessories"
-                  }
-                ]
-              }
-            }
-          }
           ]
         }
       }
@@ -360,24 +73,51 @@
           "left": [],
           "center": [],
           "right": [
+            { "VtFooterBottom": { "config": { "className": " mr-[80px]", "icons": [ "Mastercard", "PayPal", "Visa", "Mastercard", "Mastercard", "Mastercard", "Mastercard" ] } } }
+          ]
+        }
+      }
+    }
+  ],
+  "pages": {
+    "Home": [
       {
-            "VtFooterBottom": {
+        "Hero": {
           "config": {
-                "className": " mr-[80px]",
+            "className": "h-[35rem]",
-                "icons": [
+            "ImageDisplayer": { "config": { "duration": 0, "images": ["./banner-hero.webp"], "links": ["/account"] } },
-                  "Mastercard",
+            "left": [ { "VtCtaBanner": { "config": { "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" } } } ],
-                  "PayPal",
+            "center": [],
-                  "Visa",
+            "right": []
-                  "Mastercard",
+          }
-                  "Mastercard",
+        }
-                  "Mastercard",
+      },
-                  "Mastercard"
+      {
+        "VtFeaturedProducts": {
+          "config": {
+            "title": "best-seller",
+            "styles": {
+              "container": "content-container py-12 small:py-20",
+              "header": { "container": "hidden", "title": "hidden", "isShowViewAll": false },
+              "list": "grid grid-cols-2 small:grid-cols-3 gap-x-6 gap-y-24 small:gap-y-36",
+              "productCard": {
+                "badgeText": "Bestseller",
+                "card": "relative flex flex-col items-center bg-transparent shadow-none border-none p-0",
+                "badge": { "container": "absolute top-4 left-4", "text": "px-3 py-1 rounded-full bg-[#009b93] text-white text-[12px] font-semibold" },
+                "thumbnail": { "className": "rounded-2xl bg-white h-[320px] object-contain", "size": "full" },
+                "content": "flex flex-col items-center justify-start text-center p-0 mt-6",
+                "title": "text-[#003F31] text-[28px] font-semibold",
+                "description": "order-3 text-[#003f31b3]",
+                "price": "mt-2 text-[#0D382E] text-[24px] font-bold order-2 flex gap-2",
+                "reviews": { "container": "mt-3 flex items-center gap-2 order-1", "stars": "flex gap-1", "star": "text-[#F59E0B] text-xl leading-none", "emptyStar": "text-[#F59E0B] text-xl opacity-30 leading-none", "text": "text-[#003F31] text-[14px]", "rating": 4.5, "count": 38 },
+                "button": { "addToCart": "hidden", "moreInfo": "hidden", "isShowIcon": false }
+              }
+            }
+          }
+        }
+      },
+      { "CartMismatchBanner": { "config": { "show": true } } },
+      { "FreeShippingPriceNudge": { "config": { "variant": "popup" } } }
     ]
   }
 }
-          }
-        ]
-      }
-    }
-  }
-]

config/nam.drsquatch.design.json

@@ -168,6 +168,52 @@
       }
     }
   },
+  {
+    "VtFeaturedProducts": {
+      "config": {
+        "title": "drsquatch-best-seller",
+        "styles": {
+          "container": "content-container py-12 px-[100px] small:py-24",
+          
+          "header": {
+            "container": "flex justify-center mb-8",
+            "title": "text-[28px] font-bold text-[#1f3521]",
+            "isShowViewAll": false
+          },
+          "list": "grid grid-cols-2 small:grid-cols-3 gap-x-6 gap-y-24 small:gap-y-36",
+          "productCard": {
+            "card": "shadow-none border-none",
+            "className": "relative overflow-hidden rounded-2xl bg-white shadow-elevation-card-rest h-full flex flex-col",
+            "badgeText": "LIMITED EDITION",
+            "badge": {
+              "container": "absolute z-[1] top-0 left-0 pt-4",
+              "text": "uppercase px-4 py-2 bg-[#3B6F47] text-white"
+            },
+            "thumbnail": {
+              "className": "rounded-none h-[300px] shadow-none",
+              "size": "full"
+            },
+            "content": " flex flex-col flex-1",
+            "title": "mt-2 text-[#1f3521] text-[22px] font-bold",
+            "price": "mt-2 text-[#3B6F47] font-bold text-[20px] flex gap-3 flex-row-reverse justify-end",
+            "reviews": {
+              "container": "mt-3 flex items-center gap-2",
+              "stars": "flex gap-1",
+              "star": "text-[#C4622C] text-xl leading-none",
+              "emptyStar": "text-[#C4622C] text-xl opacity-30 leading-none",
+              "text": "text-[#1f3521]",
+              "rating": 3.6,
+              "count": 59
+            },
+            "button": {
+              "addToCart": "mt-6 w-full bg-[#C4622C] hover:bg-[#C4622C]/90 shadow-none text-white rounded-none h-fit font-bold",
+              "moreInfo": "hidden"
+            }
+          }
+        }
+      }
+    }
+  },
   {
     "CartMismatchBanner": {
       "config": {

config/nam.mds-starter-design.json

@@ -1,4 +1,5 @@
-[
+{
+  "layout": [
     {
       "Header": {
         "config": {
@@ -134,31 +135,7 @@
         ]
       }
     },
-  {
+    { "PropsChildren": {} },
-    "Hero": {
-      "config": {
-        "variant": "default",
-        "className": "bg-custom-gradient"
-      }
-    }
-  },
-  {
-    "CartMismatchBanner": {
-      "config": {
-        "show": true
-      }
-    }
-  },
-  {
-    "FreeShippingPriceNudge": {
-      "config": {
-        "variant": "popup"
-      }
-    }
-  },
-  {
-    "PropsChildren": {}
-  },
     {
       "Footer": {
         "config": {
@@ -171,18 +148,9 @@
                   "className": "flex flex-col gap-y-2",
                   "itemClassName": "text-ui-fg-subtle txt-small ml-3",
                   "items": [
-                  {
+                    { "text": "Clothing", "href": "/" },
-                    "text": "Clothing",
+                    { "text": "Shoes", "href": "/categories/shoes" },
-                    "href": "/"
+                    { "text": "Accessories", "href": "/categories/accessories" }
-                  },
-                  {
-                    "text": "Shoes",
-                    "href": "/categories/shoes"
-                  },
-                  {
-                    "text": "Accessories",
-                    "href": "/categories/accessories"
-                  }
                   ]
                 }
               }
@@ -196,18 +164,9 @@
                   "className": "flex flex-col gap-y-2",
                   "itemClassName": "text-ui-fg-subtle txt-small ml-3",
                   "items": [
-                  {
+                    { "text": "Clothing", "href": "/" },
-                    "text": "Clothing",
+                    { "text": "Shoes", "href": "/categories/shoes" },
-                    "href": "/"
+                    { "text": "Accessories", "href": "/categories/accessories" }
-                  },
-                  {
-                    "text": "Shoes",
-                    "href": "/categories/shoes"
-                  },
-                  {
-                    "text": "Accessories",
-                    "href": "/categories/accessories"
-                  }
                   ]
                 }
               }
@@ -226,4 +185,52 @@
         }
       }
     }
+  ],
+  "pages": {
+    "Home": [
+      {
+        "Hero": {
+          "config": {
+            "variant": "default",
+            "className": "bg-custom-gradient"
+          }
+        }
+      },
+      {
+        "VtFeaturedProducts": {
+          "config": {
+            "title": "best-seller"
+          }
+        }
+      },
+      {
+        "CartMismatchBanner": {
+          "config": { "show": true }
+        }
+      },
+      {
+        "FreeShippingPriceNudge": {
+          "config": { "variant": "popup" }
+        }
+      }
+    ],
+    "Product": [
+      {
+        "VtFeaturedProducts": {
+          "config": {
+            "title": "best-seller"
+          }
+        }
+      }
+    ],
+    "StorePage": [
+      {
+        "VtFeaturedProducts": {
+          "config": {
+            "title": "best-seller"
+          }
+        }
+      }
     ]
+  }
+}

config/nam.vibentec.design.json

@@ -1,4 +1,5 @@
-[
+{
+  "layout": [
     {
       "Header": {
         "config": {
@@ -176,93 +177,7 @@
         ]
       }
     },
-  {
+    { "PropsChildren": {} },
-    "Hero": {
-      "config": {
-        "className": "h-[35rem]",
-        "ImageDisplayer": {
-          "config": {
-            "duration": 5,
-            "images": [
-              "./banner-hero.webp",
-              "./banner-hero-1.webp",
-              "./banner-hero-2.webp"
-            ],
-            "links": ["/", "/account", "/product"]
-          }
-        },
-        "left": [
-          {
-            "VtCtaBanner": {
-              "config": {
-                "variant": "default",
-                "className": "left-[120px] top-[80px]",
-                "titleTextClassName": "leading-normal",
-                "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": []
-      }
-    }
-  },
-  {
-    "VtFeaturedProducts": {
-      "config": {
-        "title": "best-seller",
-        "styles": {
-          "container": "content-container py-12 px-[100px] small:py-24",
-          "header": {
-            "container": "flex justify-between mb-8",
-            "title": "txt-xlarge",
-            "link": ""
-          },
-          "list": "grid grid-cols-2 small:grid-cols-3 gap-x-6 gap-y-24 small:gap-y-36",
-          "productCard": {
-            "className": "relative overflow-hidden rounded-2xl border border-[#285A86] bg-ui-bg-base shadow-elevation-card-rest h-full flex flex-col",
-            "badge": {
-              "container": "p-4",
-              "text": "z-20 px-3 py-1 border-[0.5px] rounded bg-[#c9e0f5] txt-compact-small-plus shadow-borders-base text-[#285A86]"
-            },
-            "thumbnail": {
-              "className": "rounded-none h-[240px]",
-              "size": "full"
-            },
-            "content": "flex flex-col flex-1 justify-between p-4",
-            "title": "text-ui-fg-subtle text-[18px]",
-            "price": "flex items-center gap-x-1 text-[#285A86] font-bold",
-            "button": {
-              "addToCart": "w-full h-[40px] bg-black text-white rounded-md",
-              "moreInfo": "w-full h-[40px] border border-[#285A86] text-[#285A86] rounded-md"
-            }
-          }
-        }
-      }
-    }
-  },
-  
-  {
-    "CartMismatchBanner": {
-      "config": {
-        "show": true
-      }
-    }
-  },
-  {
-    "FreeShippingPriceNudge": {
-      "config": {
-        "variant": "popup"
-      }
-    }
-  },
-  {
-    "PropsChildren": {}
-  },
     {
       "Footer": {
         "config": {
@@ -299,18 +214,9 @@
                   "className": "flex flex-col gap-y-2 text-[24px] font-semibold text-[#11314E]",
                   "itemClassName": "text-[1rem] font-[400]",
                   "items": [
-                  {
+                    { "text": "Über Uns", "href": "/" },
-                    "text": "Über Uns",
+                    { "text": "Placeholder", "href": "/categories/shoes" },
-                    "href": "/"
+                    { "text": "Placeholder", "href": "/categories/accessories" }
-                  },
-                  {
-                    "text": "Placeholder",
-                    "href": "/categories/shoes"
-                  },
-                  {
-                    "text": "Placeholder",
-                    "href": "/categories/accessories"
-                  }
                   ]
                 }
               }
@@ -322,21 +228,9 @@
                   "className": "flex flex-col gap-y-2 text-[24px] font-semibold text-[#11314E]",
                   "itemClassName": "text-[1rem] font-[400] flex items-center",
                   "items": [
-                  {
+                    { "text": "Twitter", "href": "/", "icon": "X" },
-                    "text": "Twitter",
+                    { "text": "Facebook", "href": "/categories/shoes", "icon": "X" },
-                    "href": "/",
+                    { "text": "Pinterest", "href": "/categories/accessories", "icon": "X" }
-                    "icon": "X"
-                  },
-                  {
-                    "text": "Facebook",
-                    "href": "/categories/shoes",
-                    "icon": "X"
-                  },
-                  {
-                    "text": "Pinterest",
-                    "href": "/categories/accessories",
-                    "icon": "X"
-                  }
                   ]
                 }
               }
@@ -348,18 +242,9 @@
                   "className": "flex flex-col gap-y-2 text-[24px] font-semibold text-[#11314E]",
                   "itemClassName": "text-[1rem] font-[400] w-[150px]",
                   "items": [
-                  {
+                    { "text": "Hopfenstr. 10c76185 Karlsruhe Deutschland", "href": "/" },
-                    "text": "Hopfenstr. 10c76185 Karlsruhe Deutschland",
+                    { "text": "+497271 5970098", "href": "/categories/shoes" },
-                    "href": "/"
+                    { "text": "info@vibentec-it.io", "href": "/categories/accessories" }
-                  },
-                  {
-                    "text": "+497271 5970098",
-                    "href": "/categories/shoes"
-                  },
-                  {
-                    "text": "info@vibentec-it.io",
-                    "href": "/categories/accessories"
-                  }
                   ]
                 }
               }
@@ -372,18 +257,9 @@
                   "className": "flex flex-col gap-y-2 text-[24px] font-semibold text-[#11314E]",
                   "itemClassName": "text-[1rem] font-[400] w-[150px]",
                   "items": [
-                  {
+                    { "text": "Datenschutz", "href": "/" },
-                    "text": "Datenschutz",
+                    { "text": "Impressum", "href": "/categories/shoes" },
-                    "href": "/"
+                    { "text": "Installation Info", "href": "/categories/accessories" }
-                  },
-                  {
-                    "text": "Impressum",
-                    "href": "/categories/shoes"
-                  },
-                  {
-                    "text": "Installation Info",
-                    "href": "/categories/accessories"
-                  }
                   ]
                 }
               }
@@ -402,11 +278,7 @@
               "VtFooterBottom": {
                 "config": {
                   "text": "©2025 Vibentec IT. All rights reserved",
-                "icons": [
+                  "icons": ["Mastercard", "PayPal", "Visa"]
-                  "Mastercard",
-                  "PayPal",
-                  "Visa"
-                ]
                 }
               }
             }
@@ -414,4 +286,74 @@
         }
       }
     }
+  ],
+  "pages": {
+    "Home": [
+      {
+        "Hero": {
+          "config": {
+            "className": "h-[35rem]",
+            "ImageDisplayer": {
+              "config": {
+                "duration": 5,
+                "images": ["./banner-hero.webp", "./banner-hero-1.webp", "./banner-hero-2.webp"],
+                "links": ["/", "/account", "/product"]
+              }
+            },
+            "left": [
+              {
+                "VtCtaBanner": {
+                  "config": {
+                    "variant": "default",
+                    "className": "left-[120px] top-[80px]",
+                    "titleTextClassName": "leading-normal",
+                    "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": []
+          }
+        }
+      },
+      {
+        "VtFeaturedProducts": {
+          "config": {
+            "title": "best-seller",
+            "styles": {
+              "container": "content-container py-12 px-[100px] small:py-24",
+              "header": {
+                "container": "flex justify-between mb-8",
+                "title": "text-[56px] text-[#11314E]",
+                "isShowViewAll": false
+              },
+              "list": "grid grid-cols-2 small:grid-cols-3 gap-x-6 gap-y-24 small:gap-y-36",
+              "productCard": {
+                "card": "relative overflow-hidden rounded-2xl border border-[#285A86] bg-ui-bg-base shadow-elevation-card-rest h-full flex flex-col",
+                "badge": {
+                  "container": "p-4",
+                  "text": "z-20 px-3 py-1 border-[0.5px] rounded bg-[#c9e0f5] txt-compact-small-plus shadow-borders-base text-[#285A86]"
+                },
+                "thumbnail": { "className": "rounded-none h-[240px]", "size": "full" },
+                "subtitle": "text-ui-fg-subtle text-[14px]",
+                "content": "flex flex-col flex-1 justify-between p-4",
+                "title": "text-ui-fg-subtle text-[18px]",
+                "price": "flex items-center gap-x-1 text-[#285A86] font-bold border-b pb-4",
+                "button": {
+                  "addToCart": "w-fit h-[40px] bg-black text-white rounded-md",
+                  "moreInfo": "w-fit h-[40px] border border-[#285A86] text-[#285A86] rounded-md"
+                }
+              }
+            }
+          }
+        }
+      },
+      { "CartMismatchBanner": { "config": { "show": true } } },
+      { "FreeShippingPriceNudge": { "config": { "variant": "popup" } } }
     ]
+  }
+}

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

@@ -5,8 +5,8 @@ import { retrieveCustomer } from "@lib/data/customer"
 import { getBaseURL } from "@lib/util/env"
 import { StoreCartShippingOption } from "@medusajs/types"
 import { DynamicLayoutRenderer } from "../../../vibentec/renderer"
-import { LayoutContext, LayoutComponentNode,  } from "../../../vibentec/component-map"
+import { LayoutContext, LayoutComponentNode } from "../../../vibentec/component-map"
-import { loadDesignConfig } from "vibentec/configloader"
+import { loadLayoutConfig } from "vibentec/configloader"
 
 import { getRegion } from "@lib/data/regions"
 
@@ -31,7 +31,7 @@ export default async function PageLayout(props: {
     shippingOptions = shipping_options
   }
 
-  const nodes: LayoutComponentNode[] = await loadDesignConfig()
+  const nodes: LayoutComponentNode[] = await loadLayoutConfig()
   const context: LayoutContext = {
     customer,
     cart,

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

@@ -5,6 +5,9 @@ import Hero from "@modules/home/components/hero"
 import { listCollections } from "@lib/data/collections"
 import { getRegion } from "@lib/data/regions"
 import VtFeaturedProducts from "@modules/home/components/vt-featured-products"
+import { DynamicLayoutRenderer } from "@vibentec/renderer"
+import { LayoutContext, LayoutComponentNode } from "@vibentec/component-map"
+import { loadPageConfig } from "@vibentec/configloader"
 
 export const metadata: Metadata = {
   title: "Medusa Next.js Starter Template",
@@ -30,14 +33,20 @@ export default async function Home(props: {
   if (!collections || !region) {
     return null
   }
-  return (
+  const nodes: LayoutComponentNode[] = await loadPageConfig("Home")
-    <>
+
-      {/* <Hero /> */}
+  if (!region) {
-      {/* <div className="py-12">
+    return null
-        <ul className="flex flex-col gap-x-6">
+  }
-          <VtFeaturedProducts collections={collections} region={region} countryCode={countryCode} />
+
-        </ul>
+  const context: LayoutContext = {
-      </div> */}
+    customer: null,
-    </>
+    cart: null,
-  )
+    shippingOptions: [],
+    contentChildren: null,
+    countryCode,
+    region,
+  }
+
+  return <DynamicLayoutRenderer nodes={nodes} context={context} />
 }

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

@@ -3,6 +3,9 @@ import { notFound } from "next/navigation"
 import { listProducts } from "@lib/data/products"
 import { getRegion, listRegions } from "@lib/data/regions"
 import ProductTemplate from "@modules/products/templates"
+import { DynamicLayoutRenderer } from "@vibentec/renderer"
+import { LayoutContext, LayoutComponentNode } from "@vibentec/component-map"
+import { loadPageConfig } from "@vibentec/configloader"
 
 type Props = {
   params: Promise<{ countryCode: string; handle: string }>
@@ -96,11 +99,25 @@ export default async function ProductPage(props: Props) {
     notFound()
   }
 
+  const nodes: LayoutComponentNode[] = await loadPageConfig("Product")
+
+  const context: LayoutContext = {
+    customer: null,
+    cart: null,
+    shippingOptions: [],
+    contentChildren: null,
+    countryCode: params.countryCode,
+    region,
+  }
+
   return (
+    <>
       <ProductTemplate
         product={pricedProduct}
         region={region}
         countryCode={params.countryCode}
       />
+      <DynamicLayoutRenderer nodes={nodes} context={context} />
+    </>
   )
 }

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

@@ -2,6 +2,10 @@ import { Metadata } from "next"
 
 import { SortOptions } from "@modules/store/components/refinement-list/sort-products"
 import StoreTemplate from "@modules/store/templates"
+import { LayoutComponentNode, LayoutContext } from "@vibentec/component-map"
+import { getRegion } from "@lib/data/regions"
+import { loadPageConfig } from "@vibentec/configloader"
+import { DynamicLayoutRenderer } from "@vibentec/renderer"
 
 export const metadata: Metadata = {
   title: "Store",
@@ -19,15 +23,28 @@ type Params = {
 }
 
 export default async function StorePage(props: Params) {
-  const params = await props.params;
+  const params = await props.params
-  const searchParams = await props.searchParams;
+  const searchParams = await props.searchParams
+  const region = await getRegion(params.countryCode)
   const { sortBy, page } = searchParams
+  const nodes: LayoutComponentNode[] = await loadPageConfig("Store")
 
+  const context: LayoutContext = {
+    customer: null,
+    cart: null,
+    shippingOptions: [],
+    contentChildren: null,
+    countryCode: params.countryCode,
+    region,
+  }
   return (
+    <>
       <StoreTemplate
         sortBy={sortBy}
         page={page}
         countryCode={params.countryCode}
       />
+      <DynamicLayoutRenderer nodes={nodes} context={context} />
+    </>
   )
 }

src/lib/data/products.ts

@@ -63,7 +63,7 @@ export const listProducts = async ({
           offset,
           region_id: region?.id,
           fields:
-            "*variants.calculated_price,+variants.inventory_quantity,+metadata,+tags",
+            "*variants.calculated_price,+variants.inventory_quantity,*metadata,+tags",
           ...queryParams,
         },
         headers,

src/modules/home/components/vt-featured-products/product-rail/index.tsx

@@ -31,21 +31,24 @@ export default async function ProductRail({
   }
 
   const classes = {
-    container: styles?.container || "content-container py-12 px-[100px] small:py-24",
+    container: styles?.container ?? "content-container py-12 px-[100px] small:py-24",
     header: {
-      container: styles?.header?.container || "flex justify-between mb-8",
+      container: styles?.header?.container ?? "flex justify-between mb-8",
-      title: styles?.header?.title || "txt-xlarge",
+      title: styles?.header?.title ?? "txt-xlarge",
+      isShowViewAll: styles?.header.isShowViewAll ?? true,
     },
-    list: styles?.list || "grid grid-cols-2 small:grid-cols-3 gap-x-6 gap-y-24 small:gap-y-36",
+    list: styles?.list ?? "grid grid-cols-2 small:grid-cols-3 gap-x-6 gap-y-24 small:gap-y-36",
   }
 
   return (
     <div className={classes.container}>
       <div className={classes.header.container}>
         <Text className={classes.header.title}>{collection.title}</Text>
+        {classes.header.isShowViewAll && (
           <InteractiveLink href={`/collections/${collection.handle}`}>
             View all
           </InteractiveLink>
+        )}
       </div>
       <ul className={classes.list}>
         {pricedProducts &&
@@ -55,6 +58,7 @@ export default async function ProductRail({
                 product={product} 
                 countryCode={countryCode} 
                 styles={styles?.productCard}
+                badgeText={styles?.productCard?.badgeText}
               />
             </li>
           ))}

src/modules/products/components/product-preview/price.tsx

@@ -18,7 +18,7 @@ export default async function PreviewPrice({ price }: { price: VariantPrice }) {
       )}
       <Text
         className={clx("text-ui-fg-muted", {
-          "text-ui-fg-interactive": price.price_type === "sale",
+          "text-green-700": price.price_type === "sale",
         })}
         data-testid="price"
       >

src/modules/products/components/vt-product-card/index.tsx

@@ -6,7 +6,7 @@ import PreviewPrice from "@modules/products/components/product-preview/price"
 import { getProductPrice } from "@lib/util/get-product-price"
 import { addToCart } from "@lib/data/cart"
 import VtThumbnail from "../vt-thumbnail"
-
+import { Plus, ChevronRight } from "@medusajs/icons"
 type ProductCardProps = {
   product: HttpTypes.StoreProduct
   badgeText?: string
@@ -32,7 +32,7 @@ export default function ProductCard({
     if (firstVariant.allow_backorder) return true
     return (firstVariant.inventory_quantity || 0) > 0
   })()
-
+  console.dir(product, { depth: null })
   const { cheapestPrice } = getProductPrice({ product })
 
   async function handleAddToCart() {
@@ -46,42 +46,56 @@ export default function ProductCard({
   }
 
   const description = (() => {
-    const description = product.description || ""
+    const prodDescription = product.description || ""
-    const textSlice = description.length > 120 ? description.slice(0, 117) + "…" : description
+    const textSlice =
+      prodDescription.length > 120
+        ? prodDescription.slice(0, 117) + "…"
+        : prodDescription
     return textSlice
   })()
 
   const classes = {
-    card: styles?.className || className || "relative overflow-hidden rounded-2xl border border-[#285A86] bg-ui-bg-base shadow-elevation-card-rest h-full flex flex-col",
+    card: styles?.card ?? className ?? "",
     badge: {
-      container: styles?.badge?.container || "p-4",
+      container: styles?.badge?.container ?? "p-4",
-      text: styles?.badge?.text || "z-20 px-3 py-1 border-[0.5px] rounded bg-[#c9e0f5] txt-compact-small-plus shadow-borders-base text-[#285A86] ",
+      text:
+        styles?.badge?.text ??
+        "z-20 px-3 py-1 border-[0.5px] rounded bg-[#c9e0f5] txt-compact-small-plus shadow-borders-base text-[#285A86] ",
     },
     thumbnail: {
-      className: styles?.thumbnail?.className || "rounded-none h-[240px]",
+      className: styles?.thumbnail?.className ?? "rounded-none h-[240px]",
-      size: styles?.thumbnail?.size || "full",
+      size: styles?.thumbnail?.size ?? "full",
+    },
+    subtitle: styles?.subtitle ?? "",
+    content: styles?.content ?? "p-6 flex flex-col flex-1",
+    title: styles?.title ?? "mt-2 text-ui-fg-base",
+    price: styles?.price ?? "mt-2 flex items-baseline gap-2",
+    description: styles?.description ?? "txt-small text-[#285A86] my-4",
+    reviews: {
+      container: styles?.reviews?.container ?? undefined,
+      stars: styles?.reviews?.stars ?? "flex gap-1",
+      star: styles?.reviews?.star ?? "text-[#C4622C] text-xl leading-none",
+      emptyStar:
+        styles?.reviews?.emptyStar ??
+        "text-[#C4622C] text-xl opacity-30 leading-none",
+      text: styles?.reviews?.text ?? "txt-small text-ui-fg-subtle",
+      rating: styles?.reviews?.rating,
+      count: styles?.reviews?.count,
     },
-    content: styles?.content || "p-6 flex flex-col flex-1",
-    title: styles?.title || "mt-2 text-ui-fg-base",
-    price: styles?.price || "mt-2 flex items-baseline gap-2",
     button: {
-      addToCart: styles?.button?.addToCart || "flex-1",
+      addToCart: styles?.button?.addToCart ?? "flex-1",
-      moreInfo: styles?.button?.moreInfo || "w-full",
+      moreInfo: styles?.button?.moreInfo ?? "w-full",
+      isShowIcon: styles?.button?.isShowIcon ?? true,
     },
   }
 
   return (
-    <div
+    <div className={clx(classes.card)}>
-      className={clx(
+      <LocalizedClientLink href={`/products/${product.handle}`} className="block">
-        classes.card
-      )}
-    >
         <div className="relative">
           {badgeText && (
             <div className={classes.badge.container}>
-            <span className={classes.badge.text}>
+              <span className={classes.badge.text}>{badgeText}</span>
-              {badgeText}
-            </span>
             </div>
           )}
           <VtThumbnail
@@ -92,17 +106,19 @@ export default function ProductCard({
             isFeatured
           />
         </div>
+      </LocalizedClientLink>
 
       <div className={classes.content}>
-        {product.collection && (
+        {classes.subtitle && product.collection && (
           <LocalizedClientLink
             href={`/collections/${product.collection.handle}`}
             className="txt-small text-ui-fg-muted hover:text-ui-fg-subtle"
           >
-            {product.collection.title}
+            {product.subtitle}
           </LocalizedClientLink>
         )}
 
+        <LocalizedClientLink href={`/products/${product.handle}`} className="block">
           <Heading
             level="h3"
             className={classes.title}
@@ -110,22 +126,63 @@ export default function ProductCard({
           >
             {product.title}
           </Heading>
+        </LocalizedClientLink>
 
         <div className={classes.price}>
           {cheapestPrice && <PreviewPrice price={cheapestPrice} />}
         </div>
-        <Text className="mt-1 txt-compact-small text-ui-fg-muted">
-          inkl. MwSt. zzgl. Versandkosten
-        </Text>
 
-        <div className="my-4">
+        {(classes.reviews.rating !== undefined ||
-          <Divider />
+          classes.reviews.count !== undefined) && (
+          <div
+            className={
+              classes.reviews.container || "mt-2 flex items-center gap-3"
+            }
+          >
+            <div className="relative inline-block">
+              <div className={classes.reviews.stars}>
+                {Array.from({ length: 5 }).map((_, i) => (
+                  <span
+                    key={`star-empty-${i}`}
+                    className={classes.reviews.emptyStar}
+                  >
+                    ★
+                  </span>
+                ))}
               </div>
+              <div
+                className="absolute inset-0 overflow-hidden"
+                style={{
+                  width: `${Math.max(
+                    0,
+                    Math.min(
+                      100,
+                      (((classes.reviews.rating as number) ?? 0) / 5) * 100
+                    )
+                  )}%`,
+                }}
+              >
+                <div className={classes.reviews.stars}>
+                  {Array.from({ length: 5 }).map((_, i) => (
+                    <span
+                      key={`star-fills-${i}`}
+                      className={classes.reviews.star}
+                    >
+                      ★
+                    </span>
+                  ))}
+                </div>
+              </div>
+            </div>
+            {typeof classes.reviews.count === "number" && (
+              <span className={classes.reviews.text}>
+                {classes.reviews.count} Reviews
+              </span>
+            )}
+          </div>
+        )}
 
-        <Text className="txt-small text-ui-fg-subtle">{description}</Text>
+        <Text className={clx(classes.description, "txt-small my-4")}>{description}</Text>
-        <Text className="mt-1 txt-small text-ui-fg-muted">
-          Lieferzeit: {deliveryTime}
-        </Text>
 
         <div className="flex gap-3 mt-auto">
           <Button
@@ -133,20 +190,15 @@ export default function ProductCard({
             disabled={!inStock}
             variant="primary"
             className={classes.button.addToCart}
-            data-testid="product-card-add-to-cart"
           >
-            Add to cart
+            Add to cart {classes.button.isShowIcon && <Plus />}
           </Button>
           <LocalizedClientLink
             href={`/products/${product.handle}`}
             className="flex-1"
           >
-            <Button
+            <Button variant="secondary" className={classes.button.moreInfo}>
-              variant="secondary"
+              More Info {classes.button.isShowIcon && <ChevronRight />}
-              className={classes.button.moreInfo}
-              data-testid="product-card-more-info"
-            >
-              More Info
             </Button>
           </LocalizedClientLink>
         </div>

src/vibentec/configloader.ts

@@ -1,11 +1,28 @@
 import fs from "fs"
 import path from "path"
-import { jsonFileNames } from "./devJsonFileNames";
+import { jsonFileNames } from "./devJsonFileNames"
 
-const fileName = jsonFileNames.namVibentec;
+const fileName = jsonFileNames.nam3Bear
 
-export async function loadDesignConfig() {
+async function readDesignFile() {
   const filePath = path.join(process.cwd(), "config", fileName)
   const fileData = await fs.promises.readFile(filePath, "utf-8")
   return JSON.parse(fileData)
 }
+
+export async function loadLayoutConfig() {
+  const config = await readDesignFile()
+  if (Array.isArray(config)) return config
+  return config.layout ?? []
+}
+
+export async function loadPageConfig(pageKey: string) {
+  const config = await readDesignFile()
+  if (Array.isArray(config)) return []
+  const pages = config.pages ?? {}
+  return pages[pageKey] ?? []
+}
+
+export async function loadDesignConfig() {
+  return loadLayoutConfig()
+}