From 4bb28b3b638c3549ea3f0e6639fa0eaff83a97d0 Mon Sep 17 00:00:00 2001
From: namds29 <dsnam1@cmcglobal.vn>
Date: Wed, 7 Jan 2026 03:30:23 +0000
Subject: [PATCH] Add Card feedback component guideline

---
 Card-feedback-component-guideline.md | 65 ++++++++++++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 Card-feedback-component-guideline.md

diff --git a/Card-feedback-component-guideline.md b/Card-feedback-component-guideline.md
new file mode 100644
index 0000000..667c751
--- /dev/null
+++ b/Card-feedback-component-guideline.md
@@ -0,0 +1,65 @@
+# VtFeedbackCard
+
+VtFeedbackCard displays a grid of testimonial cards (image, name, subtitle, quote, CTA) and is fully driven by JSON config.
+
+## Component Key
+
+`VtFeedbackCard` in `component-map` and JSON.
+
+## JSON Example
+
+```json
+{
+  "VtFeedbackCard": {
+    "config": {
+      "title": "Der Hafer-Hype ist real...",
+      "className": "content-container py-16",
+      "gridClassName": "grid grid-cols-1 small:grid-cols-2 xl:grid-cols-4 gap-6",
+      "cardClassName": "rounded-2xl overflow-hidden bg-[#CFECD9]",
+      "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...",
+          "quote": "Als Sportler ist das Frühstück...",
+          "cta": { "label": "Mehr erfahren", "href": "/" }
+        }
+      ]
+    }
+  }
+}
+```
+
+## Item Fields
+
+- `imageSrc`: Path to image. Optional.
+- `imageAlt`: Alt text for image. Defaults to `name`.
+- `name`: Person name.
+- `subtitle`: Role or description.
+- `quote`: Testimonial text.
+- `cta.label`: Button text.
+- `cta.href`: Optional link; if missing, renders as a button.
+- `className`, `nameClassName`, `subtitleClassName`, `quoteClassName`: Per-item style overrides.
+
+## Styling Keys
+
+- `className`: Section container.
+- `title`, `titleClassName`: Optional header text and style.
+- `gridClassName`: Cards layout grid.
+- `cardClassName`: Card container.
+- `imageClassName`: Image styles.
+- `contentClassName`: Inner content padding/layout.
+- `nameClassName`, `subtitleClassName`, `quoteClassName`: Typography.
+- `ctaClassName`: CTA button styles.
+
+## Notes
+
+- Omit `imageSrc` to create text-only cards.
+- Add or remove cards by editing `items` array in JSON.
+