feat: add medusa starter design hero banner

feat: add hero banner for vibentec design feat: add CTA banner vibentec design and create carousel image display
2025-12-16 14:46:36 +07:00
parent 07a52dca2b
commit 9e0f6b0071
16 changed files with 604 additions and 24 deletions
@@ -0,0 +1,45 @@
+import { Github } from "@medusajs/icons"
+import { Button, Heading } from "@medusajs/ui"
+import { VtCarousel } from "../vt-carousel"
+import { LayoutComponentDefinition, LayoutContext } from "vibentec/component-map"
+
+export default function HeroDefault({ node, context }: { node: LayoutComponentDefinition; context: LayoutContext }) {
+  const props = node.config ?? {}
+  const imageDisplayer = props.ImageDisplayer
+
+  if (imageDisplayer) {
+    return (
+      <div className="absolute inset-0 z-10 w-full h-full">
+        <VtCarousel nodes={{ config: imageDisplayer.config }} context={context} />
+      </div>
+    )
+  }
+
+  return (
+    <div className="absolute inset-0 z-10 flex flex-col justify-center items-center text-center small:p-32 gap-6">
+      <span>
+        <Heading
+          level="h1"
+          className="text-3xl leading-10 text-ui-fg-base font-normal"
+        >
+          Ecommerce Starter Template
+        </Heading>
+        <Heading
+          level="h2"
+          className="text-3xl leading-10 text-ui-fg-subtle font-normal"
+        >
+          Powered by Medusa and Next.js
+        </Heading>
+      </span>
+      <a
+        href="https://github.com/medusajs/nextjs-starter-medusa"
+        target="_blank"
+      >
+        <Button variant="secondary">
+          View on GitHub
+          <Github />
+        </Button>
+      </a>
+    </div>
+  )
+}
@@ -0,0 +1,28 @@
+import { Github } from "@medusajs/icons"
+import { Button, clx, Heading } from "@medusajs/ui"
+import {
+  LayoutComponentDefinition,
+  LayoutContext,
+} from "@vibentec/component-map"
+import { VtCarousel } from "../vt-carousel"
+
+interface Props {
+  node: LayoutComponentDefinition
+  context: LayoutContext
+}
+const HeroVibentec = ({ node, context }: Props) => {
+  const props = node.config ?? {}
+  const imageDisplayer = props.ImageDisplayer
+
+  return (
+    <div className={clx(props.className)}>
+      {imageDisplayer ? (
+        <VtCarousel nodes={{ config: imageDisplayer.config }} context={context} />
+      ) : (
+        <VtCarousel nodes={node} context={context} />
+      )}
+    </div>
+  )
+}
+
+export default HeroVibentec
@@ -0,0 +1,58 @@
+import {
+  LayoutComponentDefinition,
+  LayoutContext,
+} from "vibentec/component-map"
+import { clx } from "@medusajs/ui"
+import BannerHeroVibentec from "../hero/hero-vibentec"
+import BannerHeroDefault from "../hero/hero-default"
+import { DynamicLayoutRenderer } from "vibentec/renderer"
+
+interface BannerProps {
+  variant: "vibentec" | "default"
+  className?: string
+}
+export default async function Hero({
+  nodes,
+  context,
+}: {
+  nodes: LayoutComponentDefinition
+  context: LayoutContext
+}) {
+  const props = (nodes.config as BannerProps) ?? {}
+  const left = nodes.config?.left ?? []
+  const center = nodes.config?.center ?? []
+  const right = nodes.config?.right ?? []
+  const heroClassName = clx(
+    "min-h-[30rem] w-full border-b border-ui-border-base relative",
+    props.className
+  )
+  if (!props.variant) return null
+
+  const variants = {
+    vibentec: BannerHeroVibentec,
+    default: BannerHeroDefault,
+  }
+
+  const Component = variants[props.variant]
+
+  return (
+    <div className={heroClassName}>
+      <Component node={nodes} context={context} />
+      <div className="absolute inset-0 z-20 w-full h-full">
+        <nav className="content-container txt-xsmall-plus flex items-center justify-between w-full h-full text-small-regular">
+          <div className="flex items-center gap-x-4 w-full h-full">
+            {left && <DynamicLayoutRenderer nodes={left} context={context} />}
+          </div>
+          <div className="flex items-center gap-x-4 w-full h-full">
+            {center && (
+              <DynamicLayoutRenderer nodes={center} context={context} />
+            )}
+          </div>
+          <div className="flex items-center gap-x-4 w-full h-full justify-end">
+            {right && <DynamicLayoutRenderer nodes={right} context={context} />}
+          </div>
+        </nav>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,75 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import style from './index.module.css'
+export const usePrevNextButtons = (emblaApi: any) => {
+  const [prevBtnDisabled, setPrevBtnDisabled] = useState(true)
+  const [nextBtnDisabled, setNextBtnDisabled] = useState(true)
+
+  const onPrevButtonClick = useCallback(() => {
+    if (!emblaApi) return
+    emblaApi.scrollPrev()
+  }, [emblaApi])
+
+  const onNextButtonClick = useCallback(() => {
+    if (!emblaApi) return
+    emblaApi.scrollNext()
+  }, [emblaApi])
+
+  const onSelect = useCallback((emblaApi: any) => {
+    setPrevBtnDisabled(!emblaApi.canScrollPrev())
+    setNextBtnDisabled(!emblaApi.canScrollNext())
+  }, [])
+
+  useEffect(() => {
+    if (!emblaApi) return
+
+    onSelect(emblaApi)
+    emblaApi.on('reInit', onSelect).on('select', onSelect)
+  }, [emblaApi, onSelect])
+
+  return {
+    prevBtnDisabled,
+    nextBtnDisabled,
+    onPrevButtonClick,
+    onNextButtonClick
+  }
+}
+
+export const PrevButton = (props: any) => {
+  const { children, ...restProps } = props
+
+  return (
+    <button
+      className={style['embla__button']}
+      type="button"
+      {...restProps}
+    >
+      <svg className={style['embla__button__svg']} viewBox="0 0 532 532">
+        <path
+          fill="currentColor"
+          d="M355.66 11.354c13.793-13.805 36.208-13.805 50.001 0 13.785 13.804 13.785 36.238 0 50.034L201.22 266l204.442 204.61c13.785 13.805 13.785 36.239 0 50.044-13.793 13.796-36.208 13.796-50.002 0a5994246.277 5994246.277 0 0 0-229.332-229.454 35.065 35.065 0 0 1-10.326-25.126c0-9.2 3.393-18.26 10.326-25.2C172.192 194.973 332.731 34.31 355.66 11.354Z"
+        />
+      </svg>
+      {children}
+    </button>
+  )
+}
+
+export const NextButton = (props: any) => {
+  const { children, ...restProps } = props
+
+  return (
+    <button
+      className={style['embla__button']}
+      type="button"
+      {...restProps}
+    >
+      <svg className={style['embla__button__svg']} viewBox="0 0 532 532">
+        <path
+          fill="currentColor"
+          d="M176.34 520.646c-13.793 13.805-36.208 13.805-50.001 0-13.785-13.804-13.785-36.238 0-50.034L330.78 266 126.34 61.391c-13.785-13.805-13.785-36.239 0-50.044 13.793-13.796 36.208-13.796 50.002 0 22.928 22.947 206.395 206.507 229.332 229.454a35.065 35.065 0 0 1 10.326 25.126c0 9.2-3.393 18.26-10.326 25.2-45.865 45.901-206.404 206.564-229.332 229.52Z"
+        />
+      </svg>
+      {children}
+    </button>
+  )
+}
@@ -0,0 +1,46 @@
+import React, { useCallback, useEffect, useState } from 'react'
+
+export const useDotButton = (emblaApi: any) => {
+  const [selectedIndex, setSelectedIndex] = useState(0)
+  const [scrollSnaps, setScrollSnaps] = useState([])
+
+  const onDotButtonClick = useCallback(
+    (index: number) => {
+      if (!emblaApi) return
+      emblaApi.scrollTo(index)
+    },
+    [emblaApi]
+  )
+
+  const onInit = useCallback((emblaApi: any) => {
+    setScrollSnaps(emblaApi.scrollSnapList())
+  }, [])
+
+  const onSelect = useCallback((emblaApi: any) => {
+    setSelectedIndex(emblaApi.selectedScrollSnap())
+  }, [])
+
+  useEffect(() => {
+    if (!emblaApi) return
+
+    onInit(emblaApi)
+    onSelect(emblaApi)
+    emblaApi.on('reInit', onInit).on('reInit', onSelect).on('select', onSelect)
+  }, [emblaApi, onInit, onSelect])
+
+  return {
+    selectedIndex,
+    scrollSnaps,
+    onDotButtonClick
+  }
+}
+
+export const DotButton = (props: any) => {
+  const { children, ...restProps } = props
+
+  return (
+    <button type="button" {...restProps}>
+      {children}
+    </button>
+  )
+}
@@ -0,0 +1,136 @@
+.embla {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  margin: auto;
+  --slide-height: 19rem;
+  --slide-spacing: 1rem;
+  --slide-size: 100%;
+}
+.embla__viewport {
+  height: 100%;
+  overflow: hidden;
+}
+.embla__container {
+  display: flex;
+  height: 100%;
+  touch-action: pan-y pinch-zoom;
+  margin-left: calc(var(--slide-spacing) * -1);
+  --slide-spacing: 1rem;
+}
+.embla__slide {
+  --slide-size: 100%;
+  --slide-spacing: 1rem;
+  transform: translate3d(0, 0, 0);
+  flex: 0 0 var(--slide-size);
+  min-width: 0;
+  padding-left: var(--slide-spacing);
+}
+.embla__slide__number {
+  height: 100%;
+  font-size: 4rem;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+}
+.embla__slide__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.embla__controls {
+  display: grid;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  grid-template-columns: auto 1fr;
+  justify-content: space-between;
+  gap: 1.2rem;
+}
+.embla__buttons {
+  position: absolute;
+  top: 45%;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.embla__button {
+  --text-high-contrast-rgb-value: 49, 49, 49;
+  --detail-high-contrast: rgb(192, 192, 192);
+  --text-body: rgb(54, 49, 61);
+  -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: transparent;
+  touch-action: manipulation;
+  text-decoration: none;
+  cursor: pointer;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  width: 3.6rem;
+  height: 3.6rem;
+  z-index: 1;
+  border-radius: 50%;
+  color: var(--text-body);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.embla__button:disabled {
+  --detail-high-contrast: rgb(192, 192, 192);
+  color: var(--detail-high-contrast);
+}
+.embla__button__svg {
+  width: 35%;
+  height: 35%;
+}
+.embla__dots {
+  display: flex;
+  position: absolute;
+  bottom: 0;
+  left: 48%;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: center;
+}
+.embla__dot {
+  --text-high-contrast-rgb-value: 49, 49, 49;
+  --text-body: rgb(54, 49, 61);
+  -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: transparent;
+  touch-action: manipulation;
+  text-decoration: none;
+  cursor: pointer;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  width: 1.6rem;
+  height: 1.6rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+}
+.embla__dot:after {
+  --detail-medium-contrast: rgb(234, 234, 234);
+  --detail-medium-contrast-rgb-value: 234, 234, 234;
+  box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
+  width: 0.42rem;
+  height: 0.42rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  content: "";
+}
+.embla__dot--selected:after {
+  --text-body: black;
+  box-shadow: inset 0 0 0 0.2rem var(--text-body);
+}
@@ -0,0 +1,80 @@
+"use client"
+import {
+  LayoutComponentDefinition,
+  LayoutContext,
+} from "@vibentec/component-map"
+import styles from "./index.module.css"
+import useEmblaCarousel from "embla-carousel-react"
+import Autoplay from "embla-carousel-autoplay"
+import { useMemo } from "react"
+import { DotButton, useDotButton } from "./carousel-dot-button"
+import { NextButton, PrevButton, usePrevNextButtons } from "./carousel-arrow-button"
+export function VtCarousel({
+  nodes,
+  context,
+}: {
+  nodes: LayoutComponentDefinition
+  context: LayoutContext
+}) {
+  const props = nodes.config ?? {}
+  const { options } = props as any
+  const images: string[] = (props as any).images ?? (props as any).slides ?? []
+  const links: (string | undefined)[] = (props as any).links ?? []
+  const durationSeconds: number = props.duration ?? 4
+
+  const plugins = useMemo(() => [
+    Autoplay({ delay: Math.max(1, durationSeconds) * 1000, stopOnInteraction: false, stopOnMouseEnter: true, })
+  ], [durationSeconds])
+
+  const [emblaRef, emblaApi] = useEmblaCarousel(options, plugins)
+  const { selectedIndex, scrollSnaps, onDotButtonClick } =
+    useDotButton(emblaApi)
+
+  const {
+    prevBtnDisabled,
+    nextBtnDisabled,
+    onPrevButtonClick,
+    onNextButtonClick,
+  } = usePrevNextButtons(emblaApi)
+  return (
+    <section className={styles["embla"]}>
+      <div className={styles["embla__viewport"]} ref={emblaRef}>
+        <div className={styles["embla__container"]}>
+          {images && images.map((src: string, index: number) => (
+            <div className={styles["embla__slide"]} key={index}>
+              <div className={styles["embla__slide__number"]}>
+                {links[index] ? (
+                  <a href={links[index]}>
+                    <img src={src} alt={`slide-${index + 1}`} className={styles["embla__slide__image"]} />
+                  </a>
+                ) : (
+                  <img src={src} alt={`slide-${index + 1}`} className={styles["embla__slide__image"]} />
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className={styles["embla__controls"]}>
+        <div className={styles["embla__buttons"]}>
+          <PrevButton onClick={onPrevButtonClick} disabled={prevBtnDisabled} />
+          <NextButton onClick={onNextButtonClick} disabled={nextBtnDisabled} />
+        </div>
+
+        <div className={styles["embla__dots"]}>
+          {scrollSnaps.map((_, index) => (
+            <DotButton
+              key={index}
+              onClick={() => onDotButtonClick(index)}
+              className={[
+                styles["embla__dot"],
+                index === selectedIndex ? styles["embla__dot--selected"] : "",
+              ].filter(Boolean).join(" ")}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
@@ -0,0 +1,40 @@
+"use client"
+import { Button, clx } from "@medusajs/ui"
+import { ChevronRightMini } from "@medusajs/icons"
+import {
+  LayoutComponentDefinition,
+  LayoutContext,
+} from "@vibentec/component-map"
+
+export function VtCtaBanner({
+  nodes,
+  context,
+}: {
+  nodes: LayoutComponentDefinition
+  context: LayoutContext
+}) {
+  const props = nodes.config ?? {}
+  return (
+    <div className={clx(
+      "relative w-[544px] bg-white rounded-[24px] border border-[#E6EFFC] shadow-[0_12px_40px_rgba(17,49,78,0.10)] p-6",
+      props.className
+    )}>
+      <div className="inline-flex items-center rounded-full bg-[#FCE9DA] text-[#E68445] px-3 py-1 text-sm font-medium">
+        {props.tagText}
+      </div>
+
+      <h1 className="mt-4 text-[#11314E] font-semibold leading-tight text-[56px]">
+        {props.titleText}
+      </h1>
+
+      <p className="mt-5 text-[#285A86] text-[16px] sm:text-xl opacity-80">
+        {props.descriptionText}
+      </p>
+
+      <Button className="mt-8 inline-flex items-center gap-2 bg-[#0F2740] hover:bg-[#173551] text-white px-6 py-3 rounded-[12px] shadow-md">
+        {props.buttonText}
+        <ChevronRightMini />
+      </Button>
+    </div>
+  )
+}