Add Footer component config guideline

2026-01-12 02:48:08 +00:00 · 2026-01-12 02:48:08 +00:00 · 6c9ef63d48
parent 225f1d86fd
commit 6c9ef63d48
1 changed files with 163 additions and 0 deletions
--- a/Footer-component-config-guideline.md
+++ b/Footer-component-config-guideline.md
@ -0,0 +1,163 @@
+# Footer — JSON Configuration Guide
+
+This guide explains how to configure `Footer` in `config/nam.vibentec.design.json`. It follows the current structure and does not use file line references.
+
+## Location
+- `Footer` lives under `layout` in the design JSON.
+- You can have multiple `Footer` blocks (e.g., one primary content footer and one bottom bar).
+- Each `Footer` has a `config` object and `left` / `center` / `right` arrays for child components.
+
+## Minimal Structure
+```json
+{
+  "Footer": {
+    "config": {
+      "className": "content-container",
+      "leftClassName": "",
+      "centerClassName": "",
+      "rightClassName": "",
+      "left": [],
+      "center": [],
+      "right": []
+    }
+  }
+}
+```
+
+## Core Config Keys
+- `className`: overall footer CSS classes.
+- `leftClassName` / `centerClassName` / `rightClassName`: per-region CSS classes.
+- `left` / `center` / `right`: arrays of components to render in each region.
+
+## Primary Content Footer
+This section typically contains a hero (logo + description + CTA), menu columns, and legal links.
+
+### Hero Block (`VtFooterHero`)
+Common config keys:
+- `logoSrc`, `logoAlt`, `logoClassName`: image source, alt text, and logo CSS.
+- `title`, `description`: heading and short description.
+- `cta`: `{ label, href }` to render a call-to-action button.
+- Display classes: `className`, `ctaClassName`, `titleClassName`, `descriptionClassName`.
+
+Example:
+```json
+{
+  "VtFooterHero": {
+    "config": {
+      "logoSrc": "/your-logo.svg",
+      "logoAlt": "YourBrand",
+      "logoClassName": "h-[100px] w-[255px]",
+      "title": "Technology solutions for business",
+      "description": "Modernize infrastructure and optimize operations with an expert team.",
+      "cta": { "label": "Contact us", "href": "/contact" },
+      "ctaClassName": "ml-8",
+      "titleClassName": "ml-8",
+      "descriptionClassName": "ml-8 w-[320px]"
+    }
+  }
+}
+```
+Place inside `Footer.config.left` to show the hero in the left region.
+
+### Menu Columns (`VtMenuItem`)
+Used to create column-based link lists.
+
+Config keys:
+- `title`: column title.
+- `items`: array of `{ text, href, icon? }`.
+- CSS classes: `className` for the column, `itemClassName` for each item.
+
+Example column:
+```json
+{
+  "VtMenuItem": {
+    "config": {
+      "title": "Company",
+      "className": "flex flex-col gap-y-2 text-[24px] font-semibold",
+      "itemClassName": "text-[1rem]",
+      "items": [
+        { "text": "About us", "href": "/about" },
+        { "text": "News", "href": "/news" },
+        { "text": "Careers", "href": "/careers" }
+      ]
+    }
+  }
+}
+```
+Add multiple `VtMenuItem` entries to `Footer.config.center` to render multiple columns.
+
+### Right Region (Legal Links)
+You can use `VtMenuItem` for links like Privacy Policy, Terms, Install Info.
+
+Example:
+```json
+{
+  "VtMenuItem": {
+    "config": {
+      "className": "flex flex-col gap-y-2 text-[24px] font-semibold",
+      "itemClassName": "text-[1rem]",
+      "items": [
+        { "text": "Privacy Policy", "href": "/privacy" },
+        { "text": "Terms", "href": "/terms" },
+        { "text": "Install Info", "href": "/install" }
+      ]
+    }
+  }
+}
+```
+Place inside `Footer.config.right`.
+
+## Bottom Footer Bar
+The second block is typically a bottom bar with copyright text and payment icons.
+
+### `VtFooterBottom`
+Config keys:
+- `text`: copyright content.
+- `icons`: array of icon names (e.g., `"Mastercard"`, `"PayPal"`, `"Visa"`).
+
+Example:
+```json
+{
+  "Footer": {
+    "config": {
+      "className": "content-container h-[128px] w-full flex items-center justify-between",
+      "left": [
+        {
+          "VtFooterBottom": {
+            "config": {
+              "text": "©2025 YourBrand. All rights reserved",
+              "icons": ["Mastercard", "PayPal", "Visa"]
+            }
+          }
+        }
+      ]
+    }
+  }
+}
+```
+
+## Common Edits
+- Update logo/title/description/CTA in `VtFooterHero`.
+- Add/remove/edit links in `VtMenuItem` columns.
+- Adjust CSS via `className`, `leftClassName`, `centerClassName`, `rightClassName`.
+- Reorder components by moving items within `left`/`center`/`right` arrays.
+- Update `text` and `icons` in `VtFooterBottom`.
+
+## Adding New Components
+1. Identify the target region (`left`, `center`, `right`).
+2. Insert a new object with the component name and its `config`.
+3. Follow existing CSS class conventions for consistent styling.
+
+Example (add a small announcement):
+```json
+{ "AnnouncementBar": { "config": { "text": "Free shipping over €50" } } }
+```
+Add to `Footer.config.center` or another suitable region.
+
+## Tips
+- Keep JSON valid (commas, braces, quotes). Use a formatter if needed.
+- Reuse existing CSS class conventions to keep styles consistent.
+- Icon names must match the supported icon set.
+- Use `left`/`center`/`right` to organize layout clearly.
+
+This guide helps you configure the footer quickly following the current pattern.