From dbe12845b06e2ac91a062eb26e28ee0c97ae6c28 Mon Sep 17 00:00:00 2001 From: Nam Doan Date: Mon, 8 Dec 2025 11:40:28 +0700 Subject: [PATCH] refactor: update config json file --- config/nam.vibentec.design.json | 408 ++++++++---------- .../layout/templates/vt-footer/index.tsx | 16 +- src/vibentec/component-map.tsx | 6 + src/vibentec/devJsonFileNames.ts | 3 +- 4 files changed, 197 insertions(+), 236 deletions(-) diff --git a/config/nam.vibentec.design.json b/config/nam.vibentec.design.json index 2df9a3c..c0d23f0 100644 --- a/config/nam.vibentec.design.json +++ b/config/nam.vibentec.design.json @@ -45,7 +45,7 @@ "config": { "label": "Mehr Info", "href": "/", - "className": "text-[13px] flex items-center bg-[#112638] gap-1 " + "className": "text-[13px] w-fit text-white px-3 flex items-center bg-[#112638] gap-1 " } } } @@ -70,20 +70,12 @@ } }, { - "Dropdown": { + "VtCountryCodeSelect": { "config": { "trigger": { - "text": "DE", - "className": "font-bold text-[13px] text-[#11314E] flex items-center gap-1 hover:text-[#009b93]", - "isShowArrow": true - }, - "items": [ - { - "icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Flag_of_Germany.svg/1200px-Flag_of_Germany.svg.png", - "text": "DE", - "href": "/" - } - ] + "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": false + } } } } @@ -154,10 +146,10 @@ } }, { - "Button": { + "AccountButton": { "config": { "icon": "User", - "className": " flex items-center gap-1 shadow-none w-[50px]" + "className": " flex items-center gap-1 shadow-none" } } }, @@ -172,7 +164,7 @@ { "VtCartButton": { "config": { - "variant": "shoppingBagbutton", + "icon": "ShoppingCart", "className": "shadow-none bg-transparent text-black w-[50px]" } } @@ -204,241 +196,189 @@ { "Footer": { "config": { - "children": [ + "className": "content-container flex w-full border justify-between pb-8", + "leftClassName": "flex-col ml-6", + "centerClassName": "flex mt-[130px] gap-24", + "rightClassName": "flex mt-[160px]", + "left": [ { "Image": { "config": { "src": "/VibentecIT-logo.svg", "alt": "MyShop", - "className": "h-[128px] w-[324px] ml-[3rem]", + "className": "h-[100px] w-[320px]", "objectFit": "contain" } } }, { - "Section": { + "VtMenuItem": { "config": { - "className": "flex items-start px-[3rem] justify-between" - }, - "children": [ - { - "Section": { - "config": { - "className": "flex flex-col" - }, - "children": [ - { - "Link": { - "config": { - "label": "Der Wegbereiter für innovative IT-Lösungen", - "href": "/", - "className": "text-[24px] leading-[125%] text-[#11314E] flex mr-8 gap-1 hover:underline font-bold w-[336px] pl-[2rem] mb-[22px]" - } - } - }, - { - "Link": { - "config": { - "label": "Tauchen Sie ein in eine Welt modernster Technologien, zuverlässiger Support und proaktiver Innovation – gemeinsam gestalten wir die digitale Zukunft Ihres Unternehmens.", - "href": "/", - "className": "text-[13px] leading-[160%] text-[#11314E] flex items-center mr-8 gap-1 w-[336px] pl-[2rem] hover:no-underline" - } - } - }, - { - "Button": { - "config": { - "label": "Kontaktieren Sie Uns", - "labelClassName": "order-[1]", - "iconClassName": "order-[2]", - "icon": "ChevronRight", - "className": "mt-[24px] flex items-center w-fit hover:bg-black gap-1 shadow-none p-[1rem] bg-[#18181B] text-white ml-[2rem]" - } - } - } - ] + "title": "Der Wegbereiter für innovative IT-Lösungen", + "className": "flex flex-col gap-y-2 ml-10 w-[320px] text-[24px] font-semibold text-[#11314E]", + "itemClassName": "text-ui-fg-subtle txt-small", + "items": [ + { + "text": "Tauchen Sie ein in eine Welt modernster Technologien, zuverlässiger Support und proaktiver Innovation – gemeinsam gestalten wir die digitale Zukunft Ihres Unternehmens.", + "href": "/" } - }, - { - "Section": { - "config": { - "className": "flex items-start mt-[2rem]" - }, - "children": [ - { - "Section": { - "config": { - "className": "flex flex-col" - }, - "children": [ - { - "Link": { - "config": { - "label": "Unternehmen", - "href": "/", - "className": "text-[24px] leading-[125%] text-[#11314E] flex mr-8 gap-1 hover:underline font-bold w-[200px] pl-[2rem] mb-[16px]" - } - } - }, - { - "Link": { - "config": { - "label": "Über Uns", - "href": "/", - "className": "text-[13px] leading-[160%] text-[#11314E] flex items-center mr-8 gap-1 w-[200px] pl-[2rem] hover:no-underline" - } - } - }, - { - "Link": { - "config": { - "label": "Placeholder", - "href": "/", - "className": "text-[13px] leading-[160%] text-[#11314E] flex items-center mr-8 gap-1 w-[200px] pl-[2rem] hover:no-underline" - } - } - }, - { - "Link": { - "config": { - "label": "Placeholder", - "href": "/", - "className": "text-[13px] leading-[160%] text-[#11314E] flex items-center mr-8 gap-1 w-[200px] pl-[2rem] hover:no-underline" - } - } - } - ] - } - }, - { - "Section": { - "config": { - "className": "flex flex-col gap-[6px]" - }, - "children": [ - { - "Link": { - "config": { - "label": "Social Media", - "href": "/", - "className": "text-[24px] leading-[125%] text-[#11314E] flex mr-8 mb-[2px] gap-1 hover:underline font-bold w-[200px] pl-[2rem]" - } - } - }, - { - "Button": { - "config": { - "label": "Über Uns", - "icon": "Twitter", - "className": "text-[13px] leading-[160%] text-[#11314E] flex justify-start font-semibold mr-8 gap-1 shadow-none w-[200px] pl-[2rem] hover:bg-transparent" - } - } - }, - { - "Button": { - "config": { - "label": "Über Uns", - "icon": "Twitter", - "className": "text-[13px] leading-[160%] text-[#11314E] flex justify-start font-semibold mr-8 gap-1 shadow-none w-[200px] pl-[2rem] hover:bg-transparent" - } - } - }, - { - "Button": { - "config": { - "label": "Über Uns", - "icon": "Twitter", - "className": "text-[13px] leading-[160%] text-[#11314E] flex justify-start font-semibold mr-8 gap-1 shadow-none w-[200px] pl-[2rem] hover:bg-transparent" - } - } - } - ] - } - }, - { - "Section": { - "config": { - "className": "flex flex-col" - }, - "children": [ - { - "Link": { - "config": { - "label": "Addresse", - "href": "/", - "className": "text-[24px] leading-[125%] text-[#11314E] flex mr-8 gap-1 hover:underline font-bold w-[200px] pl-[2rem] mb-[16px]" - } - } - }, - { - "Link": { - "config": { - "label": "Über Uns", - "href": "/", - "className": "text-[13px] leading-[160%] text-[#11314E] flex items-center mr-8 gap-1 w-[200px] pl-[2rem] hover:no-underline" - } - } - }, - { - "Link": { - "config": { - "label": "Social Media", - "href": "/", - "className": "text-[13px] leading-[160%] text-[#11314E] flex items-center mr-8 gap-1 w-[200px] pl-[2rem] hover:no-underline" - } - } - }, - { - "Link": { - "config": { - "label": "Über Uns", - "href": "/", - "className": "text-[13px] leading-[160%] text-[#11314E] flex items-center mr-8 gap-1 w-[200px] pl-[2rem] hover:no-underline" - } - } - } - ] - } - } - ] - } - }, - { - "Section": { - "config": { - "className": "flex flex-col mt-[5rem]" - }, - "children": [ - { - "Link": { - "config": { - "label": "Tauchen Sie ein in eine Welt modernster Technologien, zuverlässiger Support und proaktiver Innovation – gemeinsam gestalten wir die digitale Zukunft Ihres Unternehmens.", - "href": "/", - "className": "text-[13px] leading-[160%] text-[#11314E] flex items-center mr-8 gap-1 w-full pl-[2rem] hover:no-underline" - } - } - } - ] - } - } - ] + ] + } } }, { - "Section": { + "Button": { "config": { - "className": "relative flex px-[3rem] justify-between mt-[29px] pt-[8px] after:content-[''] after:absolute after:left-[4.8rem] after:right-[3rem] after:top-0 after:h-[1px] after:bg-[#285A86] mb-10" - }, - "children": [ - { - "Text": { - "config": { - "label": "©2025 Vibentec IT. All rights reserved", - "className": "text-[13px] leading-[160%] text-[#11314E] flex items-center mr-8 gap-1 w-full pl-[2rem]" - } + "label": "Kontaktieren Sie uns", + "className": "bg-black text-white items-center flex gap-2 ml-10 px-4 mt-[24px] py-5 rounded-md w-fit text-[14px]", + "icon": "ChevronRightMini", + "iconClassName": "order-1" + } + } + } + ], + "center": [ + { + "VtMenuItem": { + "config": { + "title": "Unternehmen", + "className": "flex flex-col gap-y-2 text-[24px] font-semibold text-[#11314E]", + "itemClassName": "text-[1rem] font-[400]", + "items": [ + { + "text": "Über Uns", + "href": "/" + }, + { + "text": "Placeholder", + "href": "/categories/shoes" + }, + { + "text": "Placeholder", + "href": "/categories/accessories" } - } - ] + ] + } + } + }, + { + "VtMenuItem": { + "config": { + "title": "Social Media", + "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": "Facebook", + "href": "/categories/shoes", + "icon": "X" + }, + { + "text": "Pinterest", + "href": "/categories/accessories", + "icon": "X" + } + ] + } + } + }, + { + "VtMenuItem": { + "config": { + "title": "Addresse", + "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": "+497271 5970098", + "href": "/categories/shoes" + }, + { + "text": "info@vibentec-it.io", + "href": "/categories/accessories" + } + ] + } + } + } + ], + "right": [ + { + "VtMenuItem": { + "config": { + "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": "Impressum", + "href": "/categories/shoes" + }, + { + "text": "Installation Info", + "href": "/categories/accessories" + } + ] + } + } + } + ] + } + } + }, + { + "Footer": { + "config": { + "className": "content-container h-[128px] w-full text text-[#11314E] flex items-center justify-between px-20 mt-2", + "left": [ + { + "Text": { + "config": { + "label": "©2025 Vibentec IT. All rights reserved", + "className": "text-[14px] font-[400] pt-2" + } + } + } + ], + "center": [], + "right": [ + { + "Button": { + "config": { + "href": "/", + "icon": "Mastercard", + "className": "shadow-none" + } + } + }, + { + "Button": { + "config": { + "href": "/", + "icon": "PayPal", + "className": "shadow-none" + } + } + }, + { + "Button": { + "config": { + "href": "/", + "icon": "Visa", + "className": "shadow-none" + } } } ] diff --git a/src/modules/layout/templates/vt-footer/index.tsx b/src/modules/layout/templates/vt-footer/index.tsx index 757f3b9..588b51e 100644 --- a/src/modules/layout/templates/vt-footer/index.tsx +++ b/src/modules/layout/templates/vt-footer/index.tsx @@ -24,7 +24,21 @@ export default async function VtFooter({ return ( ) } diff --git a/src/vibentec/component-map.tsx b/src/vibentec/component-map.tsx index b721cda..29d9640 100644 --- a/src/vibentec/component-map.tsx +++ b/src/vibentec/component-map.tsx @@ -19,6 +19,9 @@ import VtSearchInput from "@modules/layout/templates/vt-search-input" import VtSection from "@modules/layout/templates/vt-section" import VtText from "@modules/layout/templates/vt-text" import VtInput from "@modules/layout/templates/vt-input" +import VtCurrencySelect from "@modules/layout/templates/vt-currency-select" +import VtMenuItem from "@modules/layout/templates/vt-menu-item" +import VtCountryCodeSelect from "@modules/layout/templates/vt-country-select/server" type ComponentConfig = Record; @@ -64,11 +67,14 @@ export const componentMap: Record = { Section: nodesContextRenderer(VtSection), SearchInput: nodesContextRenderer(VtSearchInput), VtCartButton: nodesContextRenderer(VtCartButton), + VtCurrencySelect: nodesContextRenderer(VtCurrencySelect), + VtCountryCodeSelect: nodesContextRenderer(VtCountryCodeSelect), Link: nodesContextRenderer(VtLink), Input: nodesContextRenderer(VtInput), Image: nodesContextRenderer(VtImage), Text: nodesContextRenderer(VtText), Dropdown: nodesContextRenderer(VtDropdown), + VtMenuItem: nodesContextRenderer(VtMenuItem), CartMismatchBanner: configOnly(CartMismatchBanner), FreeShippingPriceNudge: configOnly(FreeShippingPriceNudge), PropsChildren: { diff --git a/src/vibentec/devJsonFileNames.ts b/src/vibentec/devJsonFileNames.ts index 62a4aa2..1b60ef1 100644 --- a/src/vibentec/devJsonFileNames.ts +++ b/src/vibentec/devJsonFileNames.ts @@ -3,5 +3,6 @@ export const jsonFileNames = { stePlayGround: "ste.playground.design.json", nam3Bear: "nam.3bear.design.json", namDrsquatch: "nam.drsquatch.design.json", - namVibentec: "nam.vibentec.design.json" + namVibentec: "nam.vibentec.design.json", + namStarter: "nam.mds-starter-design.json", }; \ No newline at end of file