+
+ )
+ }
+
+ return (
+
+
+
+ Ecommerce Starter Template
+
+
+ Powered by Medusa and Next.js
+
+
+
+
+
+
+ )
+}
diff --git a/src/modules/layout/templates/hero/hero-vibentec.tsx b/src/modules/layout/templates/hero/hero-vibentec.tsx
new file mode 100644
index 0000000..209f777
--- /dev/null
+++ b/src/modules/layout/templates/hero/hero-vibentec.tsx
@@ -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 (
+
+ {imageDisplayer ? (
+
+ )
+}
+
+export default HeroVibentec
diff --git a/src/modules/layout/templates/hero/index.tsx b/src/modules/layout/templates/hero/index.tsx
new file mode 100644
index 0000000..624b9ef
--- /dev/null
+++ b/src/modules/layout/templates/hero/index.tsx
@@ -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 (
+
+
+ )
+}
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..bf48169
--- /dev/null
+++ b/src/modules/layout/templates/vt-carousel/index.module.css
@@ -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);
+}
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..9d7feb1
--- /dev/null
+++ b/src/modules/layout/templates/vt-carousel/index.tsx
@@ -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 (
+
+
+
+
+
+
+
+ {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(" ")}
+ />
+ ))}
+
+
+
+ )
+}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 35c79e3..706603e 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -113,4 +113,4 @@
}
[data-radix-popper-content-wrapper]{
z-index: 51 !important;
-}
\ No newline at end of file
+}
diff --git a/src/vibentec/component-map.tsx b/src/vibentec/component-map.tsx
index 4ec8f7e..b1c1dcd 100644
--- a/src/vibentec/component-map.tsx
+++ b/src/vibentec/component-map.tsx
@@ -22,42 +22,56 @@ import VtFooterHero from "@modules/layout/templates/vt-footer/vt-footer-hero"
import VtFooterBottom from "@modules/layout/templates/vt-footer/vt-footer-bottom"
import VtLogo from "@modules/layout/templates/vt-logo"
import VtFooterSignUp from "@modules/layout/templates/vt-footer/vt-footer-signup"
+import Hero from "@modules/layout/templates/hero"
+import { VtCarousel } from "@modules/layout/templates/vt-carousel"
+import { VtCtaBanner } from "@modules/layout/templates/vt-cta-banner"
-type ComponentConfig = Record
+ {props.tagText}
+
+
+ + {props.titleText} +
+ ++ {props.descriptionText} +
+ + +