1 Footer component config guideline

namds29 edited this page 2026-01-12 02:48:08 +00:00

Table of Contents

• Footer — JSON Configuration Guide
• Location
• Minimal Structure
• Core Config Keys
• Primary Content Footer
• Hero Block (VtFooterHero)
• Menu Columns (VtMenuItem)
• Right Region (Legal Links)
• Bottom Footer Bar
• VtFooterBottom
• Common Edits
• Adding New Components
• Tips

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

{
  "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:

{
  "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:

{
  "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:

{
  "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:

{
  "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):

{ "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.