Homepage: Implment Brand section (drSquatch) #30

New Issue

namds29 · 2025-12-23T03:11:35Z

namds29 commented

2025-12-23 03:11:35 +00:00

![image](/attachments/e3a9e675-52cd-4596-be19-ea70dae8bc1d)

image.png

94 KiB

namds29 added this to the Storefront Shop project 2025-12-23 03:11:41 +00:00

namds29 commented

2025-12-30 02:52:13 +00:00

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:

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

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

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

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

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

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

Sign in to join this conversation.