Implement Footer design #7

New Issue

namds29 · 2025-12-01T03:42:10Z

namds29 commented

2025-12-01 03:42:10 +00:00

Recreate footer designs with medusa ui components and custom components.

Update JSON files and Component Map accordingly.

Base starter design

Recreate footer designs with medusa ui components and custom components. Update JSON files and Component Map accordingly. `Base starter design` ![image](/attachments/e70b5bdf-65a5-42b0-af09-3fccdf81c70e)

image.png

277 KiB

namds29 commented

2026-01-12 02:47:42 +00:00

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

Identify the target region (left, center, right).
Insert a new object with the component name and its config.
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.

# 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.

Sign in to join this conversation.