+
+ )
+ }
+
+ return (
+
+
+
+ Ecommerce Starter Template
+
+
+ Powered by Medusa and Next.js
+
+
+
+
+
+
+ )
+}
diff --git a/src/modules/layout/templates/hero/index.tsx b/src/modules/layout/templates/hero/index.tsx
new file mode 100644
index 0000000..3c128e6
--- /dev/null
+++ b/src/modules/layout/templates/hero/index.tsx
@@ -0,0 +1,45 @@
+import {
+ LayoutComponentDefinition,
+ LayoutContext,
+} from "vibentec/component-map"
+import { clx } from "@medusajs/ui"
+import BannerHero from "./banner-hero"
+import { DynamicLayoutRenderer } from "vibentec/renderer"
+
+export default async function Hero({
+ nodes,
+ context,
+}: {
+ nodes: LayoutComponentDefinition
+ context: LayoutContext
+}) {
+ const props = nodes.config ?? {}
+ 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
+ )
+
+ return (
+
+
+ )
+}
diff --git a/src/modules/layout/templates/vt-carousel/carousel-arrow-button.tsx b/src/modules/layout/templates/vt-carousel/carousel-arrow-button.tsx
new file mode 100644
index 0000000..ffb2f1f
--- /dev/null
+++ b/src/modules/layout/templates/vt-carousel/carousel-arrow-button.tsx
@@ -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 (
+
+ )
+}
+
+export const NextButton = (props: any) => {
+ const { children, ...restProps } = props
+
+ return (
+
+ )
+}
diff --git a/src/modules/layout/templates/vt-carousel/carousel-dot-button.tsx b/src/modules/layout/templates/vt-carousel/carousel-dot-button.tsx
new file mode 100644
index 0000000..271767e
--- /dev/null
+++ b/src/modules/layout/templates/vt-carousel/carousel-dot-button.tsx
@@ -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 (
+
+ )
+}
diff --git a/src/modules/layout/templates/vt-carousel/index.module.css b/src/modules/layout/templates/vt-carousel/index.module.css
new file mode 100644
index 0000000..2dfa1ce
--- /dev/null
+++ b/src/modules/layout/templates/vt-carousel/index.module.css
@@ -0,0 +1,139 @@
+.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;
+ z-index: 1000;
+ 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;
+ z-index: 1000;
+}
+.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: 1001;
+ 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;
+ z-index: 1000;
+}
+.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);
+}
diff --git a/src/modules/layout/templates/vt-carousel/index.tsx b/src/modules/layout/templates/vt-carousel/index.tsx
new file mode 100644
index 0000000..6744cc3
--- /dev/null
+++ b/src/modules/layout/templates/vt-carousel/index.tsx
@@ -0,0 +1,92 @@
+"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"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+
+export function VtCarousel({
+ nodes,
+ context,
+}: {
+ nodes: LayoutComponentDefinition
+ context: LayoutContext
+}) {
+ const props = nodes.config ?? {}
+ const { options } = props as any
+ const images: string[] = props.images ?? props.slides ?? []
+ const links: (string | undefined)[] = props.links ?? []
+ const durationSeconds: number = props.duration ?? 4
+ const showControls = images.length > 1
+
+ const plugins = useMemo(() => {
+ if (!durationSeconds || durationSeconds <= 0) return []
+ return [
+ Autoplay({
+ delay: 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 (
+
+
+
+
+
+
+ {showControls && (
+
+ {images && images.map((src: string, index: number) => (
+
+
+
+ ))}
+
+ {links[index] ? (
+
+ 
+
+ ) : (
+
+ )}
+
+
+
+ )}
+
+
+
+
+ {scrollSnaps.map((_, index) => (
+ onDotButtonClick(index)}
+ className={[
+ styles["embla__dot"],
+ index === selectedIndex ? styles["embla__dot--selected"] : "",
+ ].filter(Boolean).join(" ")}
+ />
+ ))}
+
+
+ {props.tagText && (
+
+ )
+}
diff --git a/src/modules/layout/templates/vt-cta-banner/index.tsx b/src/modules/layout/templates/vt-cta-banner/index.tsx
new file mode 100644
index 0000000..b9c78cf
--- /dev/null
+++ b/src/modules/layout/templates/vt-cta-banner/index.tsx
@@ -0,0 +1,25 @@
+"use client"
+import {
+ LayoutComponentDefinition,
+ LayoutContext,
+} from "@vibentec/component-map"
+import { DefaultCtaBanner } from "./default-cta"
+
+export function VtCtaBanner({
+ nodes,
+ context,
+}: {
+ nodes: LayoutComponentDefinition
+ context: LayoutContext
+}) {
+ const props = nodes.config ?? {}
+ const variant = props.variant ?? "default"
+
+ const variants: Record
+ {props.tagText}
+
+ )}
+
+ {props.titleText && (
+ + {props.titleText} +
+ )} + + {props.descriptionText && ( ++ {props.descriptionText} +
+ )} + + +