bugfix: restyle vt-subcription 3bear json config file

Reviewed-on: #37

config/nam.3bear.design.json

@@ -14,9 +14,30 @@
                 "className": "h-12 bg-[#009b93] text-[#fff] gap-12",
                 "speed": 24,
                 "items": [
-                  { "Link": { "config": { "label": "NEU: Overnight Oats – Sallys Nussecke 😍", "href": "/" } } },
+                  {
-                  { "Link": { "config": { "label": "Versandkostenfrei ab 45 € 💛", "href": "/" } } },
+                    "Link": {
-                  { "Link": { "config": { "label": "Gratis Geschenk ab 60 € Warenkorbwert 🎁", "href": "/" } } }
+                      "config": {
+                        "label": "NEU: Overnight Oats – Sallys Nussecke 😍",
+                        "href": "/"
+                      }
+                    }
+                  },
+                  {
+                    "Link": {
+                      "config": {
+                        "label": "Versandkostenfrei ab 45 € 💛",
+                        "href": "/"
+                      }
+                    }
+                  },
+                  {
+                    "Link": {
+                      "config": {
+                        "label": "Gratis Geschenk ab 60 € Warenkorbwert 🎁",
+                        "href": "/"
+                      }
+                    }
+                  }
                 ]
               }
             }
@@ -26,18 +47,130 @@
               "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" } } },
+                  {
-                  { "VtMegaMenu": { "config": { "navLabel": { "text": "Shop", "className": "font-bold text-[1rem] text-[#003F31] flex items-center mr-8 gap-1 hover:text-[#009b93]", "isShowArrow": true } } } },
+                    "Logo": {
-                  { "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" } ] } } },
+                      "config": {
-                  { "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" } ] } } },
+                        "src": "/3bear-logo.png",
-                  { "Link": { "config": { "label": "Rezepte", "href": "/", "className": "font-bold text-[1rem] text-[#003F31] flex items-center mr-8 gap-1 hover:text-[#009b93]" } } },
+                        "alt": "MyShop",
-                  { "Link": { "config": { "label": "Triff Harry Kane", "href": "/", "className": "font-bold text-[1rem] text-[#003F31] flex items-center gap-1 hover:text-[#009b93]" } } }
+                        "className": "h-[150px] w-[180px]",
+                        "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 } } } },
+                  {
-                  { "Button": { "config": { "icon": "MagnifyingGlass", "className": "shadow-none" } } },
+                    "VtCountryCodeSelect": {
-                  { "AccountButton": { "config": { "icon": "User", "className": " flex items-center gap-1 shadow-none" } } },
+                      "config": {
-                  { "VtCartButton": { "config": { "icon": "ShoppingBag", "className": "shadow-none bg-transparent text-black w-[50px]" } } }
+                        "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
+                        }
+                      }
+                    }
+                  },
+                  {
+                    "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]"
+                      }
+                    }
+                  }
                 ]
               }
             }
@@ -45,7 +178,9 @@
         ]
       }
     },
-    { "PropsChildren": {} },
+    {
+      "PropsChildren": {}
+    },
     {
       "Footer": {
         "config": {
@@ -54,13 +189,122 @@
           "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": { "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": {
-            { "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" } ] } } }
+                "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": {
+                "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"
+                    }
+                  ]
+                }
+              }
+            }
           ]
         }
       }
@@ -73,7 +317,22 @@
           "left": [],
           "center": [],
           "right": [
-            { "VtFooterBottom": { "config": { "className": " mr-[80px]", "icons": [ "Mastercard", "PayPal", "Visa", "Mastercard", "Mastercard", "Mastercard", "Mastercard" ] } } }
+            {
+              "VtFooterBottom": {
+                "config": {
+                  "className": " mr-[80px]",
+                  "icons": [
+                    "Mastercard",
+                    "PayPal",
+                    "Visa",
+                    "Mastercard",
+                    "Mastercard",
+                    "Mastercard",
+                    "Mastercard"
+                  ]
+                }
+              }
+            }
           ]
         }
       }
@@ -85,8 +344,31 @@
         "Hero": {
           "config": {
             "className": "h-[35rem]",
-            "ImageDisplayer": { "config": { "duration": 0, "images": ["./banner-hero.webp"], "links": ["/account"] } },
+            "ImageDisplayer": {
-            "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" } } } ],
+              "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": []
           }
@@ -98,26 +380,213 @@
             "title": "best-seller",
             "styles": {
               "container": "content-container py-12 small:py-20",
-              "header": { "container": "hidden", "title": "hidden", "isShowViewAll": false },
+              "header": {
+                "container": "ml-16",
+                "title": "text-2xl mb-12",
+                "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-0 left-0 z-[1]", "text": "px-3 py-1 rounded-full bg-[#009b93] text-white text-[12px] font-semibold" },
+                "badge": {
-                "thumbnail": { "className": "rounded-2xl bg-white h-[320px] object-contain shadow-none", "size": "full" },
+                  "container": "absolute top-0 left-0 z-[1]",
+                  "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 shadow-none",
+                  "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 },
+                "reviews": {
-                "button": { "addToCart": "hidden", "moreInfo": "hidden", "isShowIcon": false }
+                  "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" } } }
+        "CartMismatchBanner": {
+          "config": {
+            "show": true
+          }
+        }
+      },
+      {
+        "VtCategoryHighlight": {
+          "config": {
+            "title": "Oder lieber stöbern? Hier findest du sicher deine neuen Hafer-Favoriten.",
+            "className": "content-container py-12 small:py-20",
+            "gridClassName": "grid grid-cols-4 gap-6 w-full",
+            "labelClassName": "absolute left-4 bottom-4 text-[#003F31] text-[18px] font-semibold",
+            "items": [
+              {
+                "imageSrc": "/overnight-oat.webp",
+                "href": "/categories/overnight-oats",
+                "label": "Overnight Oats",
+                "className": "bg-[#CFECD9] col-start-1 col-end-3 row-start-1 row-end-3",
+                "imageClassName": "object-contain"
+              },
+              {
+                "imageSrc": "/overnight-oat.webp",
+                "href": "/categories/porridge",
+                "label": "Porridge",
+                "className": "bg-[#F9E0B0]",
+                "imageClassName": "object-contain"
+              },
+              {
+                "imageSrc": "/overnight-oat.webp",
+                "href": "/categories/cereals",
+                "label": "Cereals",
+                "className": "bg-[#F59E0B]",
+                "imageClassName": "object-contain"
+              },
+              {
+                "imageSrc": "/overnight-oat.webp",
+                "href": "/categories/granola",
+                "label": "Granola",
+                "className": "bg-[#A7D8F0]",
+                "imageClassName": "object-contain"
+              },
+              {
+                "imageSrc": "/overnight-oat.webp",
+                "href": "/categories/oat-bars",
+                "label": "Oat Bars",
+                "className": "bg-[#EED7F2]",
+                "imageClassName": "object-contain"
+              }
+            ]
+          }
+        }
+      },
+      {
+        "VtBrand": {
+          "config": {
+            "className": "w-full py-12 bg-[#CFECD9]",
+            "innerClassName": "content-container flex flex-col items-center",
+            "title": "Trusted By",
+            "titleClassName": "text-[#003F31] text-[20px] font-semibold mb-8",
+            "brandsClassName": "flex w-full items-center justify-between gap-12",
+            "items": [
+              {
+                "label": "Men'sHealth",
+                "containerClassName": "",
+                "className": "text-[#003F31] text-[36px] font-semibold italic"
+              },
+              {
+                "label": "GQ",
+                "containerClassName": "",
+                "className": "text-[#003F31] text-[44px] font-black tracking-tight"
+              },
+              {
+                "label": "BIRCHBOX",
+                "containerClassName": "",
+                "className": "text-[#003F31] text-[36px] font-semibold tracking-[0.2em]"
+              }
+            ]
+          }
+        }
+      },
+      {
+        "VtFeedbackCard": {
+          "config": {
+            "className": "content-container py-16 bg-[#CFECD9] mt-16",
+            "title": "Der Hafer-Hype ist real. Finden nicht nur 100.000+ zufriedene 3Bears Fans.",
+            "gridClassName": "grid grid-cols-1 small:grid-cols-2 xl:grid-cols-4 gap-6",
+            "cardClassName": "rounded-2xl overflow-hidden",
+            "imageClassName": "w-full h-[260px] object-cover",
+            "contentClassName": "p-6",
+            "nameClassName": "text-[#003F31] text-[20px] font-bold",
+            "subtitleClassName": "mt-1 text-[#003f31b3] text-[14px]",
+            "quoteClassName": "mt-4 text-[#003F31] text-[16px]",
+            "ctaClassName": "mt-6 inline-flex items-center justify-center bg-[#FCEE56] text-[#0D382E] px-6 py-2 rounded-full font-bold",
+            "items": [
+              {
+                "imageSrc": "/overnight-oat.webp",
+                "name": "Harry Kane",
+                "subtitle": "Profißballer, Kapitän engl. Nationalmannschaft, Stürmer FC Bayern",
+                "quote": "Als Sportler ist das Frühstück die wichtigste Mahlzeit für mich, und natürlich achte ich sehr darauf, was ich esse. Als ich 3Bears entdeckt habe, hat mich nachhaltig beeindruckt, dass die Haferflocken auf ein neues Level heben.",
+                "cta": {
+                  "label": "Mehr erfahren",
+                  "href": "/"
+                }
+              },
+              {
+                "imageSrc": "/overnight-oat.webp",
+                "name": "Sally Özcan",
+                "subtitle": "Foodcreatorin & Unternehmerin",
+                "quote": "Ich liebe Frühstück, weil es für mich der Start in einen guten Tag ist, mit meiner Familie, meinem Team oder unterwegs. Ich mag Produkte, die einfach einen Sinn ergeben, natürlich, lecker und ohne Schnickschnack. Genau das ist 3Bears für mich."
+              },
+              {
+                "imageSrc": "/overnight-oat.webp",
+                "name": "Sarah Harrison",
+                "subtitle": "Unternehmerin & Influencerin",
+                "quote": "3Bears teilt meine Leidenschaft für hochwertige Lebensmittel, die nicht nur mega lecker, sondern auch vollwertig sind. Deswegen war ich so begeistert von der Idee, gemeinsam ein Granola zu entwickeln.",
+                "cta": {
+                  "label": "Mehr erfahren",
+                  "href": "/"
+                }
+              },
+              {
+                "imageSrc": "/overnight-oat.webp",
+                "name": "Hendrik Pfeiffer",
+                "subtitle": "Profi-Läufer & German Champion",
+                "quote": "Als Profisportler spielt meine bewusste Ernährung eine absolute Schlüsselrolle, um vorne mitmischen zu können. Die Produkte von 3Bears passen dabei wie die Faust aufs Auge.",
+                "cta": {
+                  "label": "Mehr erfahren",
+                  "href": "/"
+                }
+              }
+            ]
+          }
+        }
+      },
+      {
+        "VtSubcription": {
+          "config": {
+            "className": "content-container py-12 flex justify-center",
+            "cardClassName": "rounded-2xl overflow-hidden bg-[#CFECD9] w-[800px] p-10",
+            "title": "10% für dich!",
+            "titleClassName": "text-[#003F31] text-[28px] font-bold text-center",
+            "highlightClassName": "text-[#003F31] font-bold",
+            "description": true,
+            "formClassName": "mt-8 flex flex-col items-center gap-4",
+            "descriptionClassName": "text-[#003F31] text-[16px] text-center",
+            "fieldsClassName": "grid grid-cols-1 small:grid-cols-2 gap-4 w-full",
+            "descriptionPrefix": "Melde dich jetzt zum 3Bears Newsletter an und sichere dir",
+            "descriptionHighlight": "10% Rabatt auf deinen nächsten Einkauf!",
+            "subtextClassName": "text-[#003F31] text-[16px] text-center",
+            "descriptionSuffix": "",
+            "subtext": "Deinen Rabattcode bekommst du von uns per Mail.",
+            "firstName": { "placeholder": "Vorname" },
+            "email": { "placeholder": "E-Mail-Adresse" },
+            "policyLabel": "Ich habe die DSGVO gelesen und akzeptiere sie.",
+            "cta": { "label": "Anmelden", "className": "bg-[#FCEE56] text-[#0D382E] px-6 py-2 rounded-full w-fit font-bold" }
+          }
+        }
+      },
+      {
+        "FreeShippingPriceNudge": {
+          "config": {
+            "variant": "popup"
+          }
+        }
+      }
     ]
   }
 }

config/nam.drsquatch.design.json

@@ -131,7 +131,9 @@
         ]
       }
     },
-    { "PropsChildren": {} },
+    {
+      "PropsChildren": {}
+    },
     {
       "Footer": {
         "config": {
@@ -147,12 +149,30 @@
                   "className": "flex flex-col gap-y-2 text-[16px] font-semibold text-white gap-8",
                   "itemClassName": "text-[14px] font-[400] mt-3",
                   "items": [
-                    { "text": "FAQ", "href": "/" },
+                    {
-                    { "text": "Track my order", "href": "/categories/shoes" },
+                      "text": "FAQ",
-                    { "text": "Placeholder", "href": "/categories/accessories" },
+                      "href": "/"
-                    { "text": "Placeholder", "href": "/categories/accessories" },
+                    },
-                    { "text": "Placeholder", "href": "/categories/accessories" },
+                    {
-                    { "text": "Placeholder", "href": "/categories/accessories" }
+                      "text": "Track my order",
+                      "href": "/categories/shoes"
+                    },
+                    {
+                      "text": "Placeholder",
+                      "href": "/categories/accessories"
+                    },
+                    {
+                      "text": "Placeholder",
+                      "href": "/categories/accessories"
+                    },
+                    {
+                      "text": "Placeholder",
+                      "href": "/categories/accessories"
+                    },
+                    {
+                      "text": "Placeholder",
+                      "href": "/categories/accessories"
+                    }
                   ]
                 }
               }
@@ -164,13 +184,34 @@
                   "className": "flex flex-col gap-y-2 text-[16px] font-semibold text-white",
                   "itemClassName": "text-[14px] font-[400] flex items-center mt-3",
                   "items": [
-                    { "text": "Twitter", "href": "/" },
+                    {
-                    { "text": "Facebook", "href": "/categories/shoes" },
+                      "text": "Twitter",
-                    { "text": "Pinterest", "href": "/categories/accessories" },
+                      "href": "/"
-                    { "text": "Placeholder", "href": "/categories/accessories" },
+                    },
-                    { "text": "Placeholder", "href": "/categories/accessories" },
+                    {
-                    { "text": "Placeholder", "href": "/categories/accessories" },
+                      "text": "Facebook",
-                    { "text": "Placeholder", "href": "/categories/accessories" }
+                      "href": "/categories/shoes"
+                    },
+                    {
+                      "text": "Pinterest",
+                      "href": "/categories/accessories"
+                    },
+                    {
+                      "text": "Placeholder",
+                      "href": "/categories/accessories"
+                    },
+                    {
+                      "text": "Placeholder",
+                      "href": "/categories/accessories"
+                    },
+                    {
+                      "text": "Placeholder",
+                      "href": "/categories/accessories"
+                    },
+                    {
+                      "text": "Placeholder",
+                      "href": "/categories/accessories"
+                    }
                   ]
                 }
               }
@@ -182,9 +223,18 @@
                   "className": "flex flex-col gap-y-2 text-[16px] font-semibold text-white",
                   "itemClassName": "text-[14px] font-[400] w-[200px] mt-3",
                   "items": [
-                    { "text": "The Squatch Difference", "href": "/" },
+                    {
-                    { "text": "Why Natural Products", "href": "/categories/shoes" },
+                      "text": "The Squatch Difference",
-                    { "text": "No Harmful Ingredients", "href": "/categories/accessories" }
+                      "href": "/"
+                    },
+                    {
+                      "text": "Why Natural Products",
+                      "href": "/categories/shoes"
+                    },
+                    {
+                      "text": "No Harmful Ingredients",
+                      "href": "/categories/accessories"
+                    }
                   ]
                 }
               }
@@ -214,10 +264,26 @@
                   "buttonClassName": "bg-[#C4622C] w-[90px]",
                   "socialsClassName": "mt-4 gap-8",
                   "socials": [
-                    { "icon": "Twitter", "href": "/", "className": "w-5 h-5 text-white" },
+                    {
-                    { "icon": "Twitter", "href": "/", "className": "w-5 h-5 text-white" },
+                      "icon": "Twitter",
-                    { "icon": "Twitter", "href": "/", "className": "w-5 h-5 text-white" },
+                      "href": "/",
-                    { "icon": "Twitter", "href": "/", "className": "w-5 h-5 text-white" }
+                      "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"
+                    }
                   ]
                 }
               }
@@ -233,9 +299,18 @@
           "text": "©2025 Vibentec IT. All rights reserved",
           "linksClassName": "flex items-center text-orange-500 mt-2 pl-2",
           "links": [
-            { "label": "Privacy Policy", "href": "/" },
+            {
-            { "label": "Terms of Service", "href": "/categories/shoes" },
+              "label": "Privacy Policy",
-            { "label": "Cookie Policy", "href": "/categories/accessories" }
+              "href": "/"
+            },
+            {
+              "label": "Terms of Service",
+              "href": "/categories/shoes"
+            },
+            {
+              "label": "Cookie Policy",
+              "href": "/categories/accessories"
+            }
           ]
         }
       }
@@ -250,8 +325,12 @@
             "ImageDisplayer": {
               "config": {
                 "duration": 0,
-                "images": ["./drsquatch-banner.jpg"],
+                "images": [
-                "links": ["/account"]
+                  "./drsquatch-banner.jpg"
+                ],
+                "links": [
+                  "/account"
+                ]
               }
             },
             "left": [
@@ -297,10 +376,14 @@
                   "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" },
+                "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",
+                "description": "mt-2",
                 "reviews": {
                   "container": "mt-3 flex items-center gap-2",
                   "stars": "flex gap-1",
@@ -319,14 +402,170 @@
           }
         }
       },
-      { "CartMismatchBanner": { "config": { "show": true } } },
+      {
-      { "FreeShippingPriceNudge": { "config": { "variant": "popup" } } }
+        "VtCategoryHighlight": {
-    ],
+          "config": {
-    "Product": [
+            "title": "Oder lieber stöbern? Hier findest du sicher deine neuen Hafer-Favoriten.",
-      { "VtFeaturedProducts": { "config": { "title": "drsquatch-best-seller" } } }
+            "className": "content-container py-12 small:py-20",
-    ],
+            "gridClassName": "grid grid-cols-2 gap-6 w-full",
-    "StorePage": [
+            "labelClassName": "absolute left-4 bottom-4 text-[#003F31] text-[18px] font-semibold",
-      { "VtFeaturedProducts": { "config": { "title": "drsquatch-best-seller" } } }
+            "items": [
+              {
+                "imageSrc": "/overnight-oat.webp",
+                "href": "/categories/overnight-oats",
+                "label": "Overnight Oats",
+                "className": "bg-[#CFECD9] h-[250px]",
+                "imageClassName": "object-contain"
+              },
+              {
+                "headingLabel": "The Squatch Difference",
+                "descriptionLabel": "Learn why men everywhere are loving Dr. Squatch.",
+                "buttonLabel": "Learn more",
+                "className": "flex-col bg-[#F9E0B0] p-6 justify-center",
+                "headingClassName": "text-[#003F31] text-[28px] font-semibold",
+                "descriptionClassName": "text-[#003f31b3]",
+                "buttonClassName": "mt-4 text-[#003F31] text-[18px] font-semibold bg-orange-500 py-2 px-16 rounded text-white"
+              }
+            ]
+          }
+        }
+      },
+      {
+        "VtBrand": {
+          "config": {
+            "className": "w-full py-12 bg-[#CFECD9]",
+            "innerClassName": "content-container flex flex-col items-center",
+            "title": "",
+            "titleClassName": "text-[#1f3521] text-[20px] font-bold mb-8",
+            "brandsClassName": "flex w-full items-center justify-between gap-12",
+            "items": [
+              {
+                "imageSrc": "/brand-logo.png",
+                "alt": "Men's Health",
+                "containerClassName": "",
+                "imageClassName": "h-[40px] object-contain"
+              },
+              {
+                "imageSrc": "/brand-logo.png",
+                "alt": "GQ",
+                "containerClassName": "",
+                "imageClassName": "h-[40px] object-contain"
+              },
+              {
+                "imageSrc": "/brand-logo.png",
+                "alt": "Birchbox",
+                "containerClassName": "",
+                "imageClassName": "h-[40px] object-contain"
+              }
+            ]
+          }
+        }
+      },
+      {
+        "VtSubcription": {
+          "config": {
+            "className": "w-full",
+            "cardClassName": "overflow-hidden bg-[#F3EDE3] p-10",
+            "title": "SUBSCRIBE & SAVE",
+            "titleClassName": "text-[#003F31] text-[28px] font-bold text-center",
+            "description": true,
+            "policyLabel": "Ich habe die DSGVO gelesen und akzeptiere sie.",
+            "benefits": [
+              {
+                "icon": "🗓",
+                "title": "Ships Every 3 Months",
+                "description": "Customize your picks and scents, upgrade anytime, or hit snooze if you want. You're in control."
+              },
+              {
+                "icon": "🚚",
+                "title": "Free Delivery",
+                "description": "Subscribe once and relax. All your shipping expenses are covered by Squatch."
+              },
+              {
+                "icon": "⭐",
+                "title": "Exclusive Benefits",
+                "description": "Gain exclusive, subscriber-only benefits. Enjoy early access to new products and limited edition releases!"
+              }
+            ],
+            "formClassName": "flex justify-center",
+            "cta": {
+              "label": "SUBSCRIBE & SAVE",
+              "className": "w-fit mt-12 px-[30px]  h-[56px] rounded-full bg-orange-500 text-white font-bold"
+            }
+          }
+        }
+      },
+      {
+        "VtFeedback": {
+          "config": {
+            "title": "100,000+ Reviews From Squatchers",
+            "className": "content-container py-16",
+            "titleClassName": "text-[#1f3521] text-[28px] font-bold text-center mb-10",
+            "duration": 5,
+            "options": {
+              "loop": true
+            },
+            "itemClassName": "min-w-full px-6",
+            "starsClassName": "text-[#C4622C] text-xl leading-none",
+            "reviewTitleClassName": "text-[#1f3521] font-bold",
+            "reviewTextClassName": "text-[#1f3521]",
+            "authorClassName": "italic text-[#1f3521]",
+            "controls": "mt-6 flex items-center justify-center gap-4",
+            "items": [
+              {
+                "rating": 5,
+                "title": "Ah-freaking-amazing!",
+                "text": "So I just had my first shower with Dr. Squatch Cool Fresh Aloe. Holy sh*t this stuff is Ah-freaking-amazing! Talk about a life hack!",
+                "author": "Stephen B."
+              },
+              {
+                "rating": 5,
+                "title": "Best damn soap ever…period.",
+                "text": "Best Damn Soap I EVER bought! Super smooth on the skin, smells awesome, makes you feel good showering, and yes…the wife approves.",
+                "author": "Chris H."
+              },
+              {
+                "rating": 5,
+                "title": "Hilarious…products awesome too",
+                "text": "Ok…the Dr. Squatch commercials are just freakin hilarious…plus the products are awesome too! So yes, buy it now and subscribe to it!",
+                "author": "Mike C."
+              }
+            ]
+          }
+        }
+      },
+      {
+        "CartMismatchBanner": {
+          "config": {
+            "show": true
+          }
+        }
+      },
+      {
+        "FreeShippingPriceNudge": {
+          "config": {
+            "variant": "popup"
+          }
+        }
+      }
+    ],
+    "Product": [
+      {
+        "VtFeaturedProducts": {
+          "config": {
+            "title": "drsquatch-best-seller"
+          }
+        }
+      }
+    ],
+    "StorePage": [
+      {
+        "VtFeaturedProducts": {
+          "config": {
+            "title": "drsquatch-best-seller"
+          }
+        }
+      }
     ]
   }
 }

config/nam.mds-starter-design.json

@@ -203,6 +203,34 @@
           }
         }
       },
+      {
+        "VtCategoryHighlight": {
+          "config": {
+            "title": "Oder lieber stöbern? Hier findest du sicher deine neuen Hafer-Favoriten.",
+            "className": "content-container py-12 small:py-20",
+            "gridClassName": "grid grid-cols-2 gap-6 w-full",
+            "labelClassName": "absolute left-4 bottom-4 text-[#003F31] text-[18px] font-semibold",
+            "items": [
+              {
+                "imageSrc": "/overnight-oat.webp",
+                "href": "/categories/overnight-oats",
+                "label": "Overnight Oats",
+                "className": "bg-[#CFECD9] h-[250px]",
+                "imageClassName": "object-contain"
+              },
+              {
+                "headingLabel": "The Squatch Difference",
+                "descriptionLabel": "Learn why men everywhere are loving Dr. Squatch.",
+                "buttonLabel": "Learn more",
+                "className": "flex-col bg-[#F9E0B0] p-6 justify-center",
+                "headingClassName": "text-[#003F31] text-[28px] font-semibold",
+                "descriptionClassName": "text-[#003f31b3]",
+                "buttonClassName": "mt-4 text-[#003F31] text-[18px] font-semibold bg-orange-500 py-2 px-16 rounded text-white"
+              }
+            ]
+          }
+        }
+      },
       {
         "CartMismatchBanner": {
           "config": { "show": true }

config/nam.vibentec.design.json

@@ -342,6 +342,7 @@
                 "subtitle": "text-ui-fg-subtle text-[14px]",
                 "content": "flex flex-col flex-1 justify-between p-4",
                 "title": "text-ui-fg-subtle text-[18px]",
+                "description": "mt-2 text-ui-fg-subtle text-[14px]",
                 "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",
@@ -383,6 +384,26 @@
             }
           }
         }
+      },
+       {
+        "VtSubcription": {
+          "config": {
+            "className": "content-container py-12 flex justify-center",
+            "leftClassName": "w-1/2 bg-[#132437]",
+            "cardClassName": "overflow-hidden bg-[#132437] w-1/2 p-10 text-left flex flex-col items-start",
+            "title": "Subscribe our newsletter!",
+            "titleClassName": "text-white text-[28px] font-bold border-b-2 border-white",
+            "description": true,
+            "descriptionPrefix": "Subscribe to our newsletter and be the first to receive insights, updates, and expert tips",
+            "subtext": "Stay up to date!",
+            "email": { "placeholder": "E-Mail-Adresse", "className": "border border-white w-full h-[40px] mt-4" },
+            "policyLabel": "Ich habe die DSGVO gelesen und akzeptiere sie.",
+            "formClassName": "flex gap-4",
+            "fieldsClassName": "w-[390px]",
+            "cta": { "label": "Subcribe", "className": "w-fit h-[40px] px-6 mt-4 bg-white text-[#132437] font-bold rounded-md" },
+            "subtextSubcribe": { "label": "By subscribing, you agree to our terms.!", "className": "text-white text-[13px]" }
+          }
+        }
       },
       { "CartMismatchBanner": { "config": { "show": true } } },
       { "FreeShippingPriceNudge": { "config": { "variant": "popup" } } }

src/modules/home/components/vt-brand/index.tsx

@@ -0,0 +1,72 @@
+import { clx } from "@medusajs/ui"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import {
+  LayoutComponentDefinition,
+  LayoutContext,
+} from "@vibentec/component-map"
+
+export default async function VtBrand({
+  nodes,
+  context,
+}: {
+  nodes: LayoutComponentDefinition
+  context: LayoutContext
+}) {
+  const props = nodes.config ?? {}
+
+  const title: string = props.title ?? "Trusted By"
+  const items = props.items ?? []
+
+  const classes = {
+    container: props.className ?? "w-full py-12 bg-[#CFECD9]",
+    inner: props.innerClassName ?? "content-container flex flex-col items-center",
+    title: props.titleClassName ?? "text-[#1f3521] text-[20px] font-bold mb-8",
+    brands: props.brandsClassName ?? "flex w-full items-center justify-between gap-12",
+    item: props.itemClassName ?? "opacity-90",
+    image: props.imageClassName ?? "h-[48px] w-auto object-contain",
+    label: props.labelClassName ?? "text-[#1f3521] text-[36px] font-semibold",
+  }
+
+  if (!items || items.length === 0) {
+    return null
+  }
+
+  const renderItem = (brand: any, idx: number) => {
+    const content = brand.imageSrc ? (
+      <img
+        src={brand.imageSrc}
+        alt={brand.alt ?? brand.label ?? `brand-${idx}`}
+        className={clx(classes.image, brand.imageClassName)}
+      />
+    ) : (
+      <span className={clx(classes.label, brand.className)}>
+        {brand.label ?? ""}
+      </span>
+    )
+
+    return brand.href ? (
+      <LocalizedClientLink
+        key={`brand-${idx}`}
+        href={brand.href}
+        className={clx(classes.item, brand.containerClassName)}
+      >
+        {content}
+      </LocalizedClientLink>
+    ) : (
+      <div className={clx(classes.item, brand.containerClassName)} key={`brand-${idx}`}>
+        {content}
+      </div>
+    )
+  }
+
+  return (
+    <section className={classes.container}>
+      <div className={classes.inner}>
+        {title && <div className={classes.title}>{title}</div>}
+        <div className={classes.brands}>
+          {items.map((brand: any, idx: number) => renderItem(brand, idx))}
+        </div>
+      </div>
+    </section>
+  )
+}

src/modules/home/components/vt-category-highlight/index.tsx

@@ -0,0 +1,86 @@
+import { clx } from "@medusajs/ui"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import {
+  LayoutComponentDefinition,
+  LayoutContext,
+} from "@vibentec/component-map"
+
+export default async function VtCategoryHighlight({
+  nodes,
+  context,
+}: {
+  nodes: LayoutComponentDefinition
+  context: LayoutContext
+}) {
+  const props = nodes.config ?? {}
+
+  const title: string = props.title ?? ""
+  const items = props.items ?? []
+
+  const classes = {
+    container: props.className ?? "content-container py-12",
+    title:
+      props.titleClassName ?? "text-[#003F31] text-[28px] font-semibold mb-6",
+    grid: props.gridClassName ?? "grid grid-cols-3 gap-6 w-full",
+    tile:
+      props.tileClassName ??
+      "relative rounded-2xl overflow-hidden bg-white aspect-square w-full",
+    label: props.labelClassName ?? "text-[#003F31] text-[18px] font-semibold",
+    image: props.imageClassName ?? "w-full h-full object-contain",
+  }
+
+  if (!items || items.length === 0) {
+    return null
+  }
+
+  const renderTile = (tile: any, idx: number) => {
+    const imageEl = tile.imageSrc ? (
+      <img
+        src={tile.imageSrc}
+        alt={tile.label ?? `category-${idx}`}
+        className={clx(classes.image, tile.imageClassName)}
+      />
+    ) : (
+      <div
+        className={clx(
+          "w-full h-full flex items-center justify-center",
+          tile.className
+        )}
+      >
+        <div className={clx(tile.headingClassName)}>{tile.headingLabel}</div>
+        <div className={tile.descriptionClassName}>{tile.descriptionLabel}</div>
+        <button className={tile.buttonClassName}>{tile.buttonLabel}</button>
+      </div>
+    )
+
+    const content = (
+      <div className={clx("relative w-full h-full")}>
+        {imageEl}
+        {tile.label && <span className={classes.label}>{tile.label}</span>}
+      </div>
+    )
+
+    return tile.href ? (
+      <LocalizedClientLink
+        key={`tile-${idx}`}
+        href={tile.href}
+        className={clx("w-full h-full", tile.className)}
+      >
+        {content}
+      </LocalizedClientLink>
+    ) : (
+      <div className={clx(tile.className, "w-full h-full")} key={`tile-${idx}`}>
+        {content}
+      </div>
+    )
+  }
+
+  return (
+    <section className={classes.container}>
+      {title && <h2 className={classes.title}>{title}</h2>}
+      <div className={classes.grid}>
+        {items.map((tile: any, idx: number) => renderTile(tile, idx))}
+      </div>
+    </section>
+  )
+}

src/modules/home/components/vt-feedback-card/index.tsx

@@ -0,0 +1,74 @@
+import { clx } from "@medusajs/ui"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import {
+  LayoutComponentDefinition,
+  LayoutContext,
+} from "@vibentec/component-map"
+
+export default async function VtFeedbackCard({
+  nodes,
+  context,
+}: {
+  nodes: LayoutComponentDefinition
+  context: LayoutContext
+}) {
+  const props = nodes.config ?? {}
+
+  const title: string = props.title ?? ""
+  const items = props.items ?? []
+
+  const classes = {
+    container: props.className ?? "",
+    title: props.titleClassName ?? "text-[#003F31] text-[28px] font-semibold mb-10",
+    grid: props.gridClassName ?? "grid grid-cols-1 small:grid-cols-2 xl:grid-cols-4 gap-6",
+    card: props.cardClassName ?? "rounded-2xl overflow-hidden bg-[#CFECD9]",
+    image: props.imageClassName ?? "w-full h-[260px] object-cover",
+    content: props.contentClassName ?? "p-6",
+    name: props.nameClassName ?? "text-[#003F31] text-[20px] font-bold",
+    subtitle: props.subtitleClassName ?? "mt-1 text-[#003f31b3] text-[14px]",
+    quote: props.quoteClassName ?? "mt-4 text-[#003F31] text-[16px]",
+    cta: props.ctaClassName ?? "mt-6 inline-flex items-center justify-center bg-[#FCEE56] text-[#0D382E] px-6 py-2 rounded-full font-bold",
+  }
+
+  if (!items || items.length === 0) return null
+
+  const renderCard = (entry: any, idx: number) => {
+    const imageEl = entry.imageSrc ? (
+      <img
+        src={entry.imageSrc}
+        alt={entry.imageAlt ?? entry.name ?? `feedback-card-${idx}`}
+        className={classes.image}
+      />
+    ) : null
+
+    const ctaEl = entry.cta?.href ? (
+      <LocalizedClientLink href={entry.cta.href} className={clx(classes.cta, entry.cta?.className)}>
+        {entry.cta.label ?? "Mehr erfahren"}
+      </LocalizedClientLink>
+    ) : entry.cta?.label ? (
+      <button className={clx(classes.cta, entry.cta?.className)}>{entry.cta.label}</button>
+    ) : null
+
+    return (
+      <div className={clx(classes.card, entry.className)} key={`vt-feedback-card-${idx}`}>
+        {imageEl}
+        <div className={clx(classes.content)}>
+          {entry.name && <div className={clx(classes.name, entry.nameClassName)}>{entry.name}</div>}
+          {entry.subtitle && (
+            <div className={clx(classes.subtitle, entry.subtitleClassName)}>{entry.subtitle}</div>
+          )}
+          {entry.quote && <div className={clx(classes.quote, entry.quoteClassName)}>{entry.quote}</div>}
+          {ctaEl}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <section className={classes.container}>
+      {title && <h2 className={classes.title}>{title}</h2>}
+      <div className={classes.grid}>{items.map((it: any, idx: number) => renderCard(it, idx))}</div>
+    </section>
+  )
+}
+

src/modules/home/components/vt-feedback/index.tsx

@@ -0,0 +1,91 @@
+"use client"
+import useEmblaCarousel from "embla-carousel-react"
+import Autoplay from "embla-carousel-autoplay"
+import { useMemo } from "react"
+import { clx } from "@medusajs/ui"
+import {
+  LayoutComponentDefinition,
+  LayoutContext,
+} from "@vibentec/component-map"
+import { NextButton, PrevButton, usePrevNextButtons } from "@modules/layout/templates/vt-carousel/carousel-arrow-button"
+
+export default function VtFeedback({
+  nodes,
+  context,
+}: {
+  nodes: LayoutComponentDefinition
+  context: LayoutContext
+}) {
+  
+  const props = nodes.config ?? {}
+
+  const title: string = props.title ?? ""
+  const items = props.items ?? []
+  const durationSeconds: number = props.duration ?? 5
+  const options = props.options ?? { loop: true }
+ const plugins = useMemo(() => {
+    if (!durationSeconds || durationSeconds <= 0) return []
+    return [
+      Autoplay({
+        delay: durationSeconds * 1000,
+        stopOnInteraction: false,
+        stopOnMouseEnter: true,
+      }),
+    ]
+  }, [durationSeconds])
+  const [emblaRef, emblaApi] = useEmblaCarousel(options, plugins)
+  const { prevBtnDisabled, nextBtnDisabled, onPrevButtonClick, onNextButtonClick } = usePrevNextButtons(emblaApi)
+
+  const classes = {
+    container: props.className ?? "content-container py-16",
+    title: props.titleClassName ?? "text-[#1f3521] text-[28px] font-bold text-center mb-10",
+    viewport: "relative overflow-hidden",
+    containerInner: "flex",
+    slide: props.itemClassName ?? "min-w-full px-6",
+    slideInner: "flex flex-col items-center text-center gap-3",
+    stars: props.starsClassName ?? "text-[#C4622C] text-xl leading-none",
+    reviewTitle: props.reviewTitleClassName ?? "text-[#1f3521] font-bold",
+    reviewText: props.reviewTextClassName ?? "text-[#1f3521]",
+    author: props.authorClassName ?? "italic text-[#1f3521]",
+    controls: props.controls,
+  }
+
+  if (!items || items.length === 0) return null
+
+  const showControls = items.length > 1 && classes.controls
+
+  const renderStars = (rating?: number) => {
+    const count = Math.max(0, Math.min(5, Math.round(rating ?? 5)))
+    return "★★★★★".slice(0, count)
+  }
+
+  return (
+    <section className={classes.container}>
+      {title && <h2 className={classes.title}>{title}</h2>}
+      <div className={classes.viewport} ref={emblaRef}>
+        <div className={classes.containerInner}>
+          {items.map((it: any, idx: number) => (
+            <div className={classes.slide} key={`feedback-${idx}`}>
+              <div className={classes.slideInner}>
+                <div className={classes.stars}>{renderStars(it.rating)}</div>
+                {it.title && <div className={classes.reviewTitle}>{it.title}</div>}
+                {it.text && <div className={classes.reviewText}>{it.text}</div>}
+                {it.author && <div className={classes.author}>{it.author}</div>}
+              </div>
+            </div>
+          ))}
+        </div>
+        {showControls && (
+          <div className="absolute top-1/2 -translate-y-1/2 left-0 right-0 flex items-center justify-between px-4">
+            <div className="pointer-events-auto">
+              <PrevButton onClick={onPrevButtonClick} disabled={prevBtnDisabled} />
+            </div>
+            <div className="pointer-events-auto">
+              <NextButton onClick={onNextButtonClick} disabled={nextBtnDisabled} />
+            </div>
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}

src/modules/home/components/vt-subcription/index.tsx

@@ -0,0 +1,205 @@
+"use client"
+import { Button } from "@medusajs/ui"
+import { clx } from "@medusajs/ui"
+import {
+  LayoutComponentDefinition,
+  LayoutContext,
+} from "@vibentec/component-map"
+import React, { useState } from "react"
+
+interface BenefitItem {
+  icon?: string
+  imgSrc?: string
+  title?: string
+  description?: string
+  className?: string
+  iconClassName?: string
+  titleClassName?: string
+  descriptionClassName?: string
+}
+
+export default function VtSubcription({
+  nodes,
+  context,
+}: {
+  nodes: LayoutComponentDefinition
+  context: LayoutContext
+}) {
+  const props = nodes.config ?? {}
+
+  const [firstName, setFirstName] = useState("")
+  const [email, setEmail] = useState("")
+  const [accepted, setAccepted] = useState(false)
+  const [submitted, setSubmitted] = useState(false)
+
+  const classes = {
+    container: props.className ?? "content-container",
+    left: props.leftClassName ?? "",
+    card: props.cardClassName ?? "rounded-2xl bg-[#CFECD9] p-8 small:p-12",
+    title:
+      props.titleClassName ??
+      "text-white text-[28px] font-bold text-center",
+    description:
+      props.descriptionClassName ?? "mt-2 text-white",
+    highlight: props.highlightClassName ?? "font-bold",
+    form: props.formClassName ?? "mt-8 flex flex-col gap-6",
+    fields: props.fieldsClassName ?? "grid grid-cols-1 small:grid-cols-2 gap-4",
+    input:
+      props.inputClassName ??
+      "h-[52px] rounded-md border border-[#003F31]/40 px-4 bg-transparent text-white",
+    checkboxRow: props.checkboxRowClassName ?? "flex items-center gap-3",
+    checkbox:
+      props.checkboxClassName ??
+      "w-5 h-5 rounded-md border border-[#003F31]/60",
+    checkboxLabel: props.checkboxLabelClassName ?? "text-white text-[16px]",
+    subtextClass: props.subtextClassName ?? "text-white",
+    submit:
+      props.submitClassName ?? "",
+    success: props.successClassName ?? "mt-4 text-center text-white",
+    benefits:
+      props.benefitsClassName ??
+      "mt-8 grid grid-cols-1 small:grid-cols-3 gap-8",
+    benefitItem:
+      props.benefitItemClassName ??
+      "flex flex-col items-center text-center gap-3",
+    benefitIcon:
+      props.benefitIconClassName ??
+      "w-12 h-12 rounded-full bg-[#003F31] text-white flex items-center justify-center",
+    benefitTitle: props.benefitTitleClassName ?? "text-white font-semibold",
+    benefitDesc: props.benefitDescClassName ?? "text-white opacity-80",
+    subtextSubcribe: props.subtextSubcribe ?? {},
+  }
+
+  const submitConfig = props.cta ?? {}
+  const policyLabel: string =
+    props.policyLabel ?? "Ich habe die DSGVO gelesen und akzeptiere sie."
+  const firstNameField = props.firstName ?? null
+  const emailField = props.email ?? null
+
+  const onSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!accepted) return
+    setSubmitted(true)
+    console.log("subscription_submit", { firstName, email, accepted })
+  }
+
+  return (
+    <section className={classes.container}>
+      {classes.left && <div className={classes.left}>
+        half
+      </div>}
+      <div className={classes.card}>
+        {props.title && <h2 className={classes.title}>{props.title}</h2>}
+        {props.description && (
+          <p className={classes.description}>
+            {props.descriptionPrefix}{" "}
+            <span className={classes.highlight}>
+              {props.descriptionHighlight}
+            </span>{" "}
+            {props.descriptionSuffix}
+          </p>
+        )}
+        {Array.isArray(props.benefits) && props.benefits.length > 0 && (
+          <div className={classes.benefits}>
+            {props.benefits.map((b: BenefitItem, i: number) => (
+              <div
+                key={`benefit-${i}`}
+                className={clx(classes.benefitItem, b.className)}
+              >
+                {b.imgSrc ? (
+                  <img
+                    src={b.imgSrc}
+                    alt={b.title ?? `benefit-${i}`}
+                    className={clx(classes.benefitIcon, b.iconClassName)}
+                  />
+                ) : (
+                  <div
+                    className={clx(classes.benefitIcon, b.iconClassName)}
+                    aria-hidden="true"
+                  >
+                    {b.icon ?? ""}
+                  </div>
+                )}
+                {b.title && (
+                  <div className={clx(classes.benefitTitle, b.titleClassName)}>
+                    {b.title}
+                  </div>
+                )}
+                {b.description && (
+                  <div
+                    className={clx(classes.benefitDesc, b.descriptionClassName)}
+                  >
+                    {b.description}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+        {props.subtext && (
+          <p
+            className={clx(
+              "mt-2 text-center", classes?.subtextClass ?? "text-[#003F31]"
+            )}
+          >
+            {props.subtext}
+          </p>
+        )}
+        <form className={classes.form} onSubmit={onSubmit}>
+          <div className={classes.fields}>
+            {firstNameField && (
+              <input
+                type="text"
+                placeholder={firstNameField.placeholder ?? "Vorname"}
+                value={firstName}
+                onChange={(e) => setFirstName(e.target.value)}
+                className={clx(classes.input, firstNameField.className)}
+              />
+            )}
+            {emailField && (
+              <input
+                type="email"
+                placeholder={emailField.placeholder ?? "E-Mail-Adresse"}
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className={clx(classes.input, emailField.className)}
+                required
+              />
+            )}
+          </div>
+          {props.newCheckboxRowClassName && (
+            <label className={classes.checkboxRow}>
+              <input
+                type="checkbox"
+                checked={accepted}
+                onChange={(e) => setAccepted(e.target.checked)}
+                className={classes.checkbox}
+              />
+              <span className={classes.checkboxLabel}>{policyLabel}</span>
+            </label>
+          )}
+
+          <button
+            type="submit"
+            className={clx(classes.submit, submitConfig.className)}
+          >
+            {submitConfig.label ?? "Anmelden"}
+          </button>
+         
+        </form>
+         {classes?.subtextSubcribe && (
+            <div className={props.subtextSubcribe?.className}>
+              {props.subtextSubcribe?.label}
+            </div>
+          )}
+        {submitted && (
+          <div className={classes.success}>
+            {props.successMessage ??
+              "Danke! Prüfe deine E-Mails für den Rabattcode."}
+          </div>
+        )}
+      </div>
+
+    </section>
+  )
+}

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

@@ -57,7 +57,7 @@ export default function ProductCard({
   const classes = {
     card: styles?.card ?? className ?? "",
     badge: {
-      container: styles?.badge?.container ?? "p-4",
+      container: styles?.badge?.container ?? " pb-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] ",
@@ -68,9 +68,9 @@ export default function ProductCard({
     },
     subtitle: styles?.subtitle ?? "",
     content: styles?.content ?? "p-6 flex flex-col flex-1",
-    title: styles?.title ?? "mt-2 text-ui-fg-base",
+    title: styles?.title ?? "",
-    price: styles?.price ?? "mt-2 flex items-baseline gap-2",
+    price: styles?.price ?? "",
-    description: styles?.description ?? "txt-small text-[#285A86] my-4",
+    description: styles?.description ?? "",
     reviews: {
       container: styles?.reviews?.container ?? undefined,
       stars: styles?.reviews?.stars ?? "flex gap-1",
@@ -83,15 +83,18 @@ export default function ProductCard({
       count: styles?.reviews?.count,
     },
     button: {
-      addToCart: styles?.button?.addToCart ?? "flex-1",
+      addToCart: styles?.button?.addToCart ?? "",
-      moreInfo: styles?.button?.moreInfo ?? "w-full",
+      moreInfo: styles?.button?.moreInfo ?? "",
-      isShowIcon: styles?.button?.isShowIcon ?? true,
+      isShowIcon: styles?.button?.isShowIcon ?? false,
     },
   }
 
   return (
     <div className={clx(classes.card)}>
-      <LocalizedClientLink href={`/products/${product.handle}`} className="block">
+      <LocalizedClientLink
+        href={`/products/${product.handle}`}
+        className="block"
+      >
         <div className="relative">
           {badgeText && (
             <div className={classes.badge.container}>
@@ -118,7 +121,10 @@ export default function ProductCard({
           </LocalizedClientLink>
         )}
 
-        <LocalizedClientLink href={`/products/${product.handle}`} className="block">
+        <LocalizedClientLink
+          href={`/products/${product.handle}`}
+          className="block"
+        >
           <Heading
             level="h3"
             className={classes.title}
@@ -128,9 +134,11 @@ export default function ProductCard({
           </Heading>
         </LocalizedClientLink>
 
+        {classes.price && (
           <div className={classes.price}>
             {cheapestPrice && <PreviewPrice price={cheapestPrice} />}
           </div>
+        )}
 
         {(classes.reviews.rating !== undefined ||
           classes.reviews.count !== undefined) && (
@@ -182,9 +190,14 @@ export default function ProductCard({
           </div>
         )}
 
-        <Text className={clx(classes.description, "txt-small my-4")}>{description}</Text>
+        {classes.description && (
+          <Text className={clx(classes.description, "txt-small my-4")}>
+            {description}
+          </Text>
+        )}
 
         <div className="flex gap-3 mt-auto">
+          {classes.button?.addToCart && (
             <Button
               formAction={handleAddToCart}
               disabled={!inStock}
@@ -193,6 +206,9 @@ export default function ProductCard({
             >
               Add to cart {classes.button.isShowIcon && <Plus />}
             </Button>
+          )}
+
+          {classes.button?.moreInfo && (
             <LocalizedClientLink
               href={`/products/${product.handle}`}
               className="flex-1"
@@ -201,6 +217,7 @@ export default function ProductCard({
                 More Info {classes.button.isShowIcon && <ChevronRight />}
               </Button>
             </LocalizedClientLink>
+          )}
         </div>
       </div>
     </div>

src/vibentec/component-map.tsx

@@ -26,6 +26,11 @@ import Hero from "@modules/layout/templates/hero"
 import { VtCarousel } from "@modules/layout/templates/vt-carousel"
 import { VtCtaBanner } from "@modules/layout/templates/vt-cta-banner"
 import VtFeaturedProducts from "@modules/home/components/vt-featured-products"
+import VtCategoryHighlight from "@modules/home/components/vt-category-highlight"
+import VtBrand from "@modules/home/components/vt-brand"
+import VtFeedback from "@modules/home/components/vt-feedback"
+import VtFeedbackCard from "@modules/home/components/vt-feedback-card"
+import VtSubcription from "@modules/home/components/vt-subcription"
 
 type ComponentConfig = Record<string, any>
 
@@ -101,6 +106,11 @@ export const componentMap: Record<string, ComponentRenderer> = {
   Footer: nodesContextRenderer(VtFooter),
   ImageDisplayer: nodesContextRenderer(VtCarousel),
   VtFeaturedProducts: nodesContextRenderer(VtFeaturedProducts),
+  VtCategoryHighlight: nodesContextRenderer(VtCategoryHighlight),
+  VtBrand: nodesContextRenderer(VtBrand),
+  VtFeedback: nodesContextRenderer(VtFeedback),
+  VtFeedbackCard: nodesContextRenderer(VtFeedbackCard),
+  VtSubcription: nodesContextRenderer(VtSubcription),
 }
 
 export type ComponentName = keyof typeof componentMap

src/vibentec/configloader.ts

@@ -10,6 +10,7 @@ async function readDesignFile() {
   return JSON.parse(fileData)
 }
 
+
 export async function loadLayoutConfig() {
   const config = await readDesignFile()
   if (Array.isArray(config)) return config