Merge pull request 'update: add vt-subcription component into design vibentec json file' (#37) from namds/implement-highlight-and-subcription-section into main

Reviewed-on: #37

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" } } }

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]",
+    checkboxLabel: props.checkboxLabelClassName ?? "text-white text-[16px]",
-    subtextClass: props.subtextClassName ?? "text-[#003F31]",
+    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",
+    benefitTitle: props.benefitTitleClassName ?? "text-white font-semibold",
-    benefitDesc: props.benefitDescClassName ?? "text-[#003F31] opacity-80",
+    benefitDesc: props.benefitDescClassName ?? "text-white opacity-80",
+    subtextSubcribe: props.subtextSubcribe ?? {},
   }
 
   const submitConfig = props.cta ?? {}
@@ -83,6 +85,9 @@ export default function VtSubcription({
 
   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 && (
@@ -180,7 +185,13 @@ export default function VtSubcription({
           >
             {submitConfig.label ?? "Anmelden"}
           </button>
+         
         </form>
+         {classes?.subtextSubcribe && (
+            <div className={props.subtextSubcribe.className}>
+              {props.subtextSubcribe.label}
+            </div>
+          )}
         {submitted && (
           <div className={classes.success}>
             {props.successMessage ??
@@ -188,6 +199,7 @@ export default function VtSubcription({
           </div>
         )}
       </div>
+
     </section>
   )
 }

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)