From be97784f949714b2f6eb39fb282cd770568c8bc1 Mon Sep 17 00:00:00 2001
From: namds29 <dsnam1@cmcglobal.vn>
Date: Tue, 30 Dec 2025 02:52:40 +0000
Subject: [PATCH] Add VtBrand usage guideline

---
 VtBrand-usage-guideline.md | 124 +++++++++++++++++++++++++++++++++++++
 1 file changed, 124 insertions(+)
 create mode 100644 VtBrand-usage-guideline.md

diff --git a/VtBrand-usage-guideline.md b/VtBrand-usage-guideline.md
new file mode 100644
index 0000000..4b075a5
--- /dev/null
+++ b/VtBrand-usage-guideline.md
@@ -0,0 +1,124 @@
+# VtBrand — Usage Guide
+
+- Renders a horizontal row of brand logos with an optional section title.
+- Supports image logos via `items[].imageSrc` with `alt`, or text fallback via `items[].label`.
+- Fully styleable through JSON classes for container, title, row layout, and per-item overrides.
+
+**Location**
+- Component is available as `VtBrand` in the dynamic layout system.
+
+**Add To A Page**
+- Route-aware pages:
+
+```json
+{
+  "pages": {
+    "Home": [
+      {
+        "VtBrand": {
+          "config": {
+            "className": "w-full py-12 bg-[#CFECD9]",
+            "innerClassName": "content-container flex flex-col items-center",
+            "title": "Trusted By",
+            "titleClassName": "text-[#1f3521] text-[20px] font-bold mb-8",
+            "brandsClassName": "flex w-full items-center justify-between gap-12",
+            "items": [
+              { "imageSrc": "/brands/menshealth.svg", "alt": "Men's Health", "imageClassName": "h-[40px] object-contain" },
+              { "imageSrc": "/brands/gq.svg", "alt": "GQ", "imageClassName": "h-[40px] object-contain" },
+              { "imageSrc": "/brands/birchbox.svg", "alt": "Birchbox", "imageClassName": "h-[40px] object-contain" }
+            ]
+          }
+        }
+      }
+    ]
+  }
+}
+```
+
+- Global layout (always visible across pages):
+
+```json
+{
+  "layout": [
+    { "Header": { "config": { "sticky": true } } },
+    { "PropsChildren": {} },
+    { "VtBrand": { "config": { "title": "Trusted By", "items": [ { "imageSrc": "/brands/menshealth.svg", "alt": "Men's Health" } ] } } },
+    { "Footer": { "config": { /* ... */ } } }
+  ]
+}
+```
+
+**Config Fields**
+- `config.title` — optional section heading. Default "Trusted By".
+- `config.className` — outer section classes. Default `w-full py-12 bg-[#CFECD9]`.
+- `config.innerClassName` — inner wrapper. Default `content-container flex flex-col items-center`.
+- `config.titleClassName` — title element classes. Default `text-[#1f3521] text-[20px] font-bold mb-8`.
+- `config.brandsClassName` — row layout for logos. Default `flex w-full items-center justify-between gap-12`.
+- `config.itemClassName` — per-item wrapper defaults. Default `opacity-90`.
+- `config.imageClassName` — default for all images. Default `h-[48px] w-auto object-contain`.
+- `config.labelClassName` — text fallback style. Default `text-[#1f3521] text-[36px] font-semibold`.
+- `config.items[]` — array of brand entries:
+  - Image logo: `imageSrc`, `alt`, optional `containerClassName`, `imageClassName`, `href`.
+  - Text fallback: omit `imageSrc`, provide `label`, optional `className`.
+
+**Behavior**
+- If `items` is empty, the component returns nothing.
+- If `href` is supplied, the item wraps with a localized link for country-aware routing.
+- Image `alt` falls back to `label` or `brand-{index}` when `alt` is omitted.
+
+**Examples**
+- Image-only logos with consistent height:
+
+```json
+{
+  "VtBrand": {
+    "config": {
+      "brandsClassName": "flex items-center justify-between gap-12",
+      "items": [
+        { "imageSrc": "/brands/menshealth.svg", "alt": "Men's Health", "imageClassName": "h-[40px] object-contain" },
+        { "imageSrc": "/brands/gq.svg", "alt": "GQ", "imageClassName": "h-[40px] object-contain" },
+        { "imageSrc": "/brands/birchbox.svg", "alt": "Birchbox", "imageClassName": "h-[40px] object-contain" }
+      ]
+    }
+  }
+}
+```
+
+- Mixed image and text fallback:
+
+```json
+{
+  "VtBrand": {
+    "config": {
+      "items": [
+        { "imageSrc": "/brands/menshealth.svg", "alt": "Men's Health" },
+        { "label": "GQ", "className": "text-[#1f3521] text-[44px] font-black" },
+        { "imageSrc": "/brands/birchbox.svg", "alt": "Birchbox" }
+      ]
+    }
+  }
+}
+```
+
+- Clickable logos:
+
+```json
+{
+  "VtBrand": {
+    "config": {
+      "items": [
+        { "imageSrc": "/brands/menshealth.svg", "alt": "Men's Health", "href": "/press/menshealth" },
+        { "imageSrc": "/brands/gq.svg", "alt": "GQ", "href": "/press/gq" },
+        { "imageSrc": "/brands/birchbox.svg", "alt": "Birchbox", "href": "/press/birchbox" }
+      ]
+    }
+  }
+}
+```
+
+**Styling Tips**
+- Keep all logos visually consistent by setting a uniform height via `imageClassName` and using `object-contain` to preserve aspect ratio.
+- Adjust spacing with `brandsClassName` (`gap-*`, `justify-*`) and per-logo `containerClassName`.
+- Use SVG assets for crisp rendering; place assets under `public/brands/` for simple `imageSrc` paths.
+
+