diff --git a/config/nam.vibentec.design.json b/config/nam.vibentec.design.json index c6622a1..29b78bf 100644 --- a/config/nam.vibentec.design.json +++ b/config/nam.vibentec.design.json @@ -384,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" } } } diff --git a/src/modules/home/components/vt-subcription/index.tsx b/src/modules/home/components/vt-subcription/index.tsx index f9bcf39..c3b0b4f 100644 --- a/src/modules/home/components/vt-subcription/index.tsx +++ b/src/modules/home/components/vt-subcription/index.tsx @@ -34,27 +34,28 @@ export default function VtSubcription({ 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-[#003F31] text-[28px] font-bold text-center", + "text-white text-[28px] font-bold text-center", description: - props.descriptionClassName ?? "mt-2 text-center text-[#003F31]", + 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-[#003F31]", + "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-[#003F31] text-[16px]", - subtextClass: props.subtextClassName ?? "text-[#003F31]", + checkboxLabel: props.checkboxLabelClassName ?? "text-white text-[16px]", + subtextClass: props.subtextClassName ?? "text-white", submit: props.submitClassName ?? "", - success: props.successClassName ?? "mt-4 text-center text-[#003F31]", + success: props.successClassName ?? "mt-4 text-center text-white", benefits: props.benefitsClassName ?? "mt-8 grid grid-cols-1 small:grid-cols-3 gap-8", @@ -64,8 +65,9 @@ export default function VtSubcription({ benefitIcon: props.benefitIconClassName ?? "w-12 h-12 rounded-full bg-[#003F31] text-white flex items-center justify-center", - benefitTitle: props.benefitTitleClassName ?? "text-[#003F31] font-semibold", - benefitDesc: props.benefitDescClassName ?? "text-[#003F31] opacity-80", + benefitTitle: props.benefitTitleClassName ?? "text-white font-semibold", + benefitDesc: props.benefitDescClassName ?? "text-white opacity-80", + subtextSubcribe: props.subtextSubcribe ?? {}, } const submitConfig = props.cta ?? {} @@ -83,6 +85,9 @@ export default function VtSubcription({ return (
+ {classes.left &&
+ half +
}
{props.title &&

{props.title}

} {props.description && ( @@ -180,7 +185,13 @@ export default function VtSubcription({ > {submitConfig.label ?? "Anmelden"} + + {classes?.subtextSubcribe && ( +
+ {props.subtextSubcribe.label} +
+ )} {submitted && (
{props.successMessage ?? @@ -188,6 +199,7 @@ export default function VtSubcription({
)}
+
) } diff --git a/src/vibentec/configloader.ts b/src/vibentec/configloader.ts index 7b07466..e7c8034 100644 --- a/src/vibentec/configloader.ts +++ b/src/vibentec/configloader.ts @@ -2,7 +2,7 @@ import fs from "fs" import path from "path" import { jsonFileNames } from "./devJsonFileNames" -const fileName = jsonFileNames.namDrsquatch +const fileName = jsonFileNames.namVibentec async function readDesignFile() { const filePath = path.join(process.cwd(), "config", fileName)