Implement Hero Banner for each page #11

New Issue

namds29 · 2025-12-15T03:33:27Z

namds29 commented

2025-12-15 03:33:27 +00:00

No description provided.

namds29 commented

2025-12-15 06:58:36 +00:00

I am having trouble working with the carousel. Normally, if the hero banner has one image, dividing the layout into left, right, and center poses no problem. The issue arises when I design it in a carousel format; does the layout still divide into left, right, and center, or is it simply a section listing the images?

I am having trouble working with the carousel. Normally, if the hero banner has one image, dividing the layout into left, right, and center poses no problem. The issue arises when I design it in a carousel format; does the layout still divide into left, right, and center, or is it simply a section listing the images? ![image](/attachments/e225fe4d-5f27-452e-882a-927547d2ec3e) ![image](/attachments/a461a7d3-e71e-4602-8495-b36a9aa46a0f)

image.png

1.1 MiB

image.png

6.6 MiB

namds29 commented

2025-12-17 04:17:42 +00:00

I have done the Hero banner each page and reused the Hero folder already implment of medusa component.
Also i have installed carousel lib embla-carousel.com and implement the json file follow Stephan structure suggested.

Some component i have created is VtCtaBanner and VtCarousel.
Folder Hero im also copy into the template and refactor it to map with our json file

Pls help me review #13

![image](/attachments/55401b06-9c3a-4a4a-ae02-9a11b577f209) ![image](/attachments/11b1aa69-6748-4497-bc84-23fff44a0970) ![image](/attachments/d0f34112-b647-4d79-b9d9-2699343c6f43) ![image](/attachments/034787ee-2c02-46a3-afb3-9728e47b62dd) I have done the Hero banner each page and reused the Hero folder already implment of medusa component. Also i have installed carousel lib `embla-carousel.com ` and implement the json file follow Stephan structure suggested. - Some component i have created is VtCtaBanner and VtCarousel. - Folder Hero im also copy into the template and refactor it to map with our json file Pls help me review https://gitea.vibentec-it.io/Shop/Shop-Storefront/pulls/13

image.png

2.0 MiB

image.png

6.4 MiB

image.png

149 KiB

image.png

2.1 MiB

namds29 added this to the Storefront Shop project 2025-12-17 04:18:00 +00:00

duc.vi was assigned by namds29

2025-12-17 04:18:54 +00:00

yen.nguyen was assigned by namds29

2025-12-17 04:18:54 +00:00

Stephan was assigned by namds29

2025-12-17 04:18:54 +00:00

namds29 commented

2026-01-12 10:51:18 +00:00

Hero — JSON Configuration Guide

This guide explains how to configure the Hero component in config/nam.vibentec.design.json. It follows the current structure and does not use file line references.

Overview

Hero renders the top-of-page banner area.
Supports a slideshow via ImageDisplayer, and overlay content placed in left, center, or right regions.

Minimal Structure

{
  "Hero": {
    "config": {
      "className": "h-[35rem]",
      "ImageDisplayer": {
        "config": {
          "duration": 5,
          "images": ["./banner-hero.webp"],
          "links": ["/"]
        }
      },
      "left": [],
      "center": [],
      "right": []
    }
  }
}

Config Keys

Container
- className: overall CSS classes for the hero container.
Slideshow (ImageDisplayer)
- duration: number (seconds) between image rotations.
- images: array of image paths (relative to your public/assets location).
- links: array of URLs associated with each image. Keep the array length aligned with images.
Overlay regions
- left, center, right: arrays of components to render as overlays on top of the hero.

Overlay with `VtCtaBanner`

VtCtaBanner is commonly used to display messaging and a CTA inside the hero.

Config keys:

variant: e.g., "default".
className: positioning/styling classes (e.g., absolute offsets).
Copy keys: tagText, titleText, descriptionText, buttonText.
Typography classes: titleTextClassName and other optional text-related class keys.

Example overlay:

{
  "VtCtaBanner": {
    "config": {
      "variant": "default",
      "className": "left-[120px] top-[80px]",
      "titleTextClassName": "leading-normal",
      "tagText": "Special Offer",
      "titleText": "Welcome to Vibentec IT Shop",
      "descriptionText": "Concise description text, ideally 1–2 lines.",
      "buttonText": "Shop Now"
    }
  }
}

Place this object in one of the overlay arrays, e.g., Hero.config.left.

Full Example

{
  "Hero": {
    "config": {
      "className": "h-[35rem]",
      "ImageDisplayer": {
        "config": {
          "duration": 5,
          "images": [
            "./banner-hero.webp",
            "./banner-hero-1.webp",
            "./banner-hero-2.webp"
          ],
          "links": ["/", "/account", "/product"]
        }
      },
      "left": [
        {
          "VtCtaBanner": {
            "config": {
              "variant": "default",
              "className": "left-[120px] top-[80px]",
              "titleTextClassName": "leading-normal",
              "tagText": "Special Offer",
              "titleText": "Welcome to Vibentec IT Shop",
              "descriptionText": "Concise description text, ideally 1–2 lines.",
              "buttonText": "Shop Now"
            }
          }
        }
      ],
      "center": [],
      "right": []
    }
  }
}

Common Edits

Change slideshow speed: update ImageDisplayer.config.duration.
Change images: update ImageDisplayer.config.images with valid paths.
Update image click behavior: adjust ImageDisplayer.config.links to match image positions.
Modify overlay content: edit VtCtaBanner copy and classes; reposition by updating className or moving the object between left/center/right.
Adjust hero height or layout: change the container className.

Tips

Keep images and links arrays aligned in length to avoid mismatched navigation.
Ensure image paths resolve correctly from your app’s public/static assets.
Reuse existing CSS class conventions for consistent styling.
You can add multiple overlay components to any region; order controls stacking/placement.

This guide helps you configure the hero quickly while following the current JSON design pattern.

# Hero — JSON Configuration Guide This guide explains how to configure the `Hero` component in `config/nam.vibentec.design.json`. It follows the current structure and does not use file line references. ## Overview - `Hero` renders the top-of-page banner area. - Supports a slideshow via `ImageDisplayer`, and overlay content placed in `left`, `center`, or `right` regions. ## Minimal Structure ```json { "Hero": { "config": { "className": "h-[35rem]", "ImageDisplayer": { "config": { "duration": 5, "images": ["./banner-hero.webp"], "links": ["/"] } }, "left": [], "center": [], "right": [] } } } ``` ## Config Keys - Container - `className`: overall CSS classes for the hero container. - Slideshow (`ImageDisplayer`) - `duration`: number (seconds) between image rotations. - `images`: array of image paths (relative to your public/assets location). - `links`: array of URLs associated with each image. Keep the array length aligned with `images`. - Overlay regions - `left`, `center`, `right`: arrays of components to render as overlays on top of the hero. ## Overlay with `VtCtaBanner` `VtCtaBanner` is commonly used to display messaging and a CTA inside the hero. Config keys: - `variant`: e.g., `"default"`. - `className`: positioning/styling classes (e.g., absolute offsets). - Copy keys: `tagText`, `titleText`, `descriptionText`, `buttonText`. - Typography classes: `titleTextClassName` and other optional text-related class keys. Example overlay: ```json { "VtCtaBanner": { "config": { "variant": "default", "className": "left-[120px] top-[80px]", "titleTextClassName": "leading-normal", "tagText": "Special Offer", "titleText": "Welcome to Vibentec IT Shop", "descriptionText": "Concise description text, ideally 1–2 lines.", "buttonText": "Shop Now" } } } ``` Place this object in one of the overlay arrays, e.g., `Hero.config.left`. ## Full Example ```json { "Hero": { "config": { "className": "h-[35rem]", "ImageDisplayer": { "config": { "duration": 5, "images": [ "./banner-hero.webp", "./banner-hero-1.webp", "./banner-hero-2.webp" ], "links": ["/", "/account", "/product"] } }, "left": [ { "VtCtaBanner": { "config": { "variant": "default", "className": "left-[120px] top-[80px]", "titleTextClassName": "leading-normal", "tagText": "Special Offer", "titleText": "Welcome to Vibentec IT Shop", "descriptionText": "Concise description text, ideally 1–2 lines.", "buttonText": "Shop Now" } } } ], "center": [], "right": [] } } } ``` ## Common Edits - Change slideshow speed: update `ImageDisplayer.config.duration`. - Change images: update `ImageDisplayer.config.images` with valid paths. - Update image click behavior: adjust `ImageDisplayer.config.links` to match image positions. - Modify overlay content: edit `VtCtaBanner` copy and classes; reposition by updating `className` or moving the object between `left`/`center`/`right`. - Adjust hero height or layout: change the container `className`. ## Tips - Keep `images` and `links` arrays aligned in length to avoid mismatched navigation. - Ensure image paths resolve correctly from your app’s public/static assets. - Reuse existing CSS class conventions for consistent styling. - You can add multiple overlay components to any region; order controls stacking/placement. This guide helps you configure the hero quickly while following the current JSON design pattern.

Sign in to join this conversation.