Menu
Product 6
<section id="relume" class="overflow-hidden px-[5%] py-16 md:py-24 lg:py-28">
<div class="container">
<div
class="mb-12 grid grid-cols-1 items-end gap-12 md:mb-18 md:grid-cols-[1fr_max-content] lg:mb-20 lg:gap-20"
>
<div class="max-w-lg">
<p class="mb-3 font-semibold md:mb-4">Tagline</p>
<h1 class="mb-3 text-5xl font-bold md:mb-4 md:text-7xl lg:text-8xl">Products</h1>
<p class="md:text-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<button
class="focus-visible:ring-border-primary gap-3 items-center justify-center whitespace-nowrap ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-border-primary text-text-primary bg-background-primary px-6 py-3 hidden md:flex"
title="View all"
>
View all
</button>
</div>
<div class="relative" role="region" aria-roledescription="carousel">
<div class="relative pb-24">
<div>
<div class="flex ml-0">
<div
role="group"
aria-roledescription="slide"
class="min-w-0 shrink-0 grow-0 basis-[95%] pl-0 pr-6 sm:basis-4/5 md:basis-1/2 md:pr-8 lg:basis-1/4"
>
<div>
<a href="#" class="mb-3 block aspect-[5/6] md:mb-4"
><img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder image"
class="size-full object-cover" /></a
><a href="#" class="flex justify-between md:text-md"
><div class="mr-4">
<h3 class="font-semibold">Product name</h3>
<div class="text-sm">Variant</div>
</div>
<div class="text-md font-semibold md:text-lg">$55</div></a
><button
class="focus-visible:ring-border-primary inline-flex gap-3 items-center justify-center whitespace-nowrap ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-border-primary text-text-primary bg-background-primary px-5 py-2 mt-3 w-full md:mt-4"
title="Add to cart"
>
Add to cart
</button>
</div>
</div>
<div
role="group"
aria-roledescription="slide"
class="min-w-0 shrink-0 grow-0 basis-[95%] pl-0 pr-6 sm:basis-4/5 md:basis-1/2 md:pr-8 lg:basis-1/4"
>
<div>
<a href="#" class="mb-3 block aspect-[5/6] md:mb-4"
><img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder image"
class="size-full object-cover" /></a
><a href="#" class="flex justify-between md:text-md"
><div class="mr-4">
<h3 class="font-semibold">Product name</h3>
<div class="text-sm">Variant</div>
</div>
<div class="text-md font-semibold md:text-lg">$55</div></a
><button
class="focus-visible:ring-border-primary inline-flex gap-3 items-center justify-center whitespace-nowrap ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-border-primary text-text-primary bg-background-primary px-5 py-2 mt-3 w-full md:mt-4"
title="Add to cart"
>
Add to cart
</button>
</div>
</div>
<div
role="group"
aria-roledescription="slide"
class="min-w-0 shrink-0 grow-0 basis-[95%] pl-0 pr-6 sm:basis-4/5 md:basis-1/2 md:pr-8 lg:basis-1/4"
>
<div>
<a href="#" class="mb-3 block aspect-[5/6] md:mb-4"
><img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder image"
class="size-full object-cover" /></a
><a href="#" class="flex justify-between md:text-md"
><div class="mr-4">
<h3 class="font-semibold">Product name</h3>
<div class="text-sm">Variant</div>
</div>
<div class="text-md font-semibold md:text-lg">$55</div></a
><button
class="focus-visible:ring-border-primary inline-flex gap-3 items-center justify-center whitespace-nowrap ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-border-primary text-text-primary bg-background-primary px-5 py-2 mt-3 w-full md:mt-4"
title="Add to cart"
>
Add to cart
</button>
</div>
</div>
<div
role="group"
aria-roledescription="slide"
class="min-w-0 shrink-0 grow-0 basis-[95%] pl-0 pr-6 sm:basis-4/5 md:basis-1/2 md:pr-8 lg:basis-1/4"
>
<div>
<a href="#" class="mb-3 block aspect-[5/6] md:mb-4"
><img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder image"
class="size-full object-cover" /></a
><a href="#" class="flex justify-between md:text-md"
><div class="mr-4">
<h3 class="font-semibold">Product name</h3>
<div class="text-sm">Variant</div>
</div>
<div class="text-md font-semibold md:text-lg">$55</div></a
><button
class="focus-visible:ring-border-primary inline-flex gap-3 items-center justify-center whitespace-nowrap ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-border-primary text-text-primary bg-background-primary px-5 py-2 mt-3 w-full md:mt-4"
title="Add to cart"
>
Add to cart
</button>
</div>
</div>
<div
role="group"
aria-roledescription="slide"
class="min-w-0 shrink-0 grow-0 basis-[95%] pl-0 pr-6 sm:basis-4/5 md:basis-1/2 md:pr-8 lg:basis-1/4"
>
<div>
<a href="#" class="mb-3 block aspect-[5/6] md:mb-4"
><img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder image"
class="size-full object-cover" /></a
><a href="#" class="flex justify-between md:text-md"
><div class="mr-4">
<h3 class="font-semibold">Product name</h3>
<div class="text-sm">Variant</div>
</div>
<div class="text-md font-semibold md:text-lg">$55</div></a
><button
class="focus-visible:ring-border-primary inline-flex gap-3 items-center justify-center whitespace-nowrap ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-border-primary text-text-primary bg-background-primary px-5 py-2 mt-3 w-full md:mt-4"
title="Add to cart"
>
Add to cart
</button>
</div>
</div>
<div
role="group"
aria-roledescription="slide"
class="min-w-0 shrink-0 grow-0 basis-[95%] pl-0 pr-6 sm:basis-4/5 md:basis-1/2 md:pr-8 lg:basis-1/4"
>
<div>
<a href="#" class="mb-3 block aspect-[5/6] md:mb-4"
><img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder image"
class="size-full object-cover" /></a
><a href="#" class="flex justify-between md:text-md"
><div class="mr-4">
<h3 class="font-semibold">Product name</h3>
<div class="text-sm">Variant</div>
</div>
<div class="text-md font-semibold md:text-lg">$55</div></a
><button
class="focus-visible:ring-border-primary inline-flex gap-3 items-center justify-center whitespace-nowrap ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-border-primary text-text-primary bg-background-primary px-5 py-2 mt-3 w-full md:mt-4"
title="Add to cart"
>
Add to cart
</button>
</div>
</div>
<div
role="group"
aria-roledescription="slide"
class="min-w-0 shrink-0 grow-0 basis-[95%] pl-0 pr-6 sm:basis-4/5 md:basis-1/2 md:pr-8 lg:basis-1/4"
>
<div>
<a href="#" class="mb-3 block aspect-[5/6] md:mb-4"
><img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder image"
class="size-full object-cover" /></a
><a href="#" class="flex justify-between md:text-md"
><div class="mr-4">
<h3 class="font-semibold">Product name</h3>
<div class="text-sm">Variant</div>
</div>
<div class="text-md font-semibold md:text-lg">$55</div></a
><button
class="focus-visible:ring-border-primary inline-flex gap-3 items-center justify-center whitespace-nowrap ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-border-primary text-text-primary bg-background-primary px-5 py-2 mt-3 w-full md:mt-4"
title="Add to cart"
>
Add to cart
</button>
</div>
</div>
<div
role="group"
aria-roledescription="slide"
class="min-w-0 shrink-0 grow-0 basis-[95%] pl-0 pr-6 sm:basis-4/5 md:basis-1/2 md:pr-8 lg:basis-1/4"
>
<div>
<a href="#" class="mb-3 block aspect-[5/6] md:mb-4"
><img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder image"
class="size-full object-cover" /></a
><a href="#" class="flex justify-between md:text-md"
><div class="mr-4">
<h3 class="font-semibold">Product name</h3>
<div class="text-sm">Variant</div>
</div>
<div class="text-md font-semibold md:text-lg">$55</div></a
><button
class="focus-visible:ring-border-primary inline-flex gap-3 items-center justify-center whitespace-nowrap ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-border-primary text-text-primary bg-background-primary px-5 py-2 mt-3 w-full md:mt-4"
title="Add to cart"
>
Add to cart
</button>
</div>
</div>
</div>
</div>
<div class="absolute bottom-0 flex w-full items-end justify-between">
<div class="flex h-7 pt-[10px]">
<button class="mx-[3px] size-2 rounded-full bg-neutral-light"></button
><button class="mx-[3px] size-2 rounded-full bg-neutral-light"></button
><button class="mx-[3px] size-2 rounded-full bg-neutral-light"></button
><button class="mx-[3px] size-2 rounded-full bg-neutral-light"></button
><button class="mx-[3px] size-2 rounded-full bg-neutral-light"></button
><button class="mx-[3px] size-2 rounded-full bg-neutral-light"></button
><button class="mx-[3px] size-2 rounded-full bg-neutral-light"></button
><button class="mx-[3px] size-2 rounded-full bg-neutral-light"></button>
</div>
<div class="flex gap-2 md:gap-4">
<button
class="focus-visible:ring-border-primary inline-flex gap-3 items-center justify-center whitespace-nowrap ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-border-primary text-text-primary rounded-full bg-neutral-white left-0 top-1/2 static size-12 -translate-y-0"
disabled=""
>
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
class="size-6"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.707 17.293 8.414 13H18v-2H8.414l4.293-4.293-1.414-1.414L4.586 12l6.707 6.707z"
></path></svg
><span class="sr-only">Previous slide</span></button
><button
class="focus-visible:ring-border-primary inline-flex gap-3 items-center justify-center whitespace-nowrap ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-border-primary text-text-primary rounded-full bg-neutral-white right-0 top-1/2 static size-12 -translate-y-0"
disabled=""
>
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
class="size-6"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z"
></path></svg
><span class="sr-only">Next slide</span>
</button>
</div>
</div>
</div>
</div>
</div>
</section>
"use client";
import { useState, useEffect } from "react";
import clsx from "clsx";
import type { ButtonProps, CarouselApi } from "@relume_io/relume-ui";
import {
Button,
Carousel,
CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious,
} from "@relume_io/relume-ui";
type ImageProps = {
src: string;
alt?: string;
};
type ProductCardProps = {
url: string;
image: ImageProps;
title: string;
price: string;
variant: string;
button: ButtonProps;
};
type Props = {
tagline: string;
heading: string;
description: string;
button: ButtonProps;
products: ProductCardProps[];
};
export type Product6Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
export const Product6 = (props: Product6Props) => {
const { tagline, heading, description, button, products } = {
...Product6Defaults,
...props,
};
const [api, setApi] = useState<CarouselApi>();
const [current, setCurrent] = useState<number>(0);
useEffect(() => {
if (!api) {
return;
}
setCurrent(api.selectedScrollSnap() + 1);
api.on("select", () => {
setCurrent(api.selectedScrollSnap() + 1);
});
}, [api]);
return (
<section id="relume" className="overflow-hidden px-[5%] py-16 md:py-24 lg:py-28">
<div className="container">
<div className="mb-12 grid grid-cols-1 items-end gap-12 md:mb-18 md:grid-cols-[1fr_max-content] lg:mb-20 lg:gap-20">
<div className="max-w-lg">
<p className="mb-3 font-semibold md:mb-4">{tagline}</p>
<h1 className="mb-3 text-5xl font-bold md:mb-4 md:text-7xl lg:text-8xl">{heading}</h1>
<p className="md:text-md">{description}</p>
</div>
<Button {...button} className="hidden md:flex">
{button.title}
</Button>
</div>
<Carousel
setApi={setApi}
opts={{
loop: true,
align: "start",
}}
>
<div className="relative pb-24">
<CarouselContent className="ml-0">
{products.map((product, index) => (
<CarouselItem
key={index}
className="basis-[95%] pl-0 pr-6 sm:basis-4/5 md:basis-1/2 md:pr-8 lg:basis-1/4"
>
<ProductCard key={index} {...product} />
</CarouselItem>
))}
</CarouselContent>
<div className="absolute bottom-0 flex w-full items-end justify-between">
<div className="flex h-7 pt-[10px]">
{products.map((_, index) => (
<button
key={index}
onClick={() => api?.scrollTo(index)}
className={clsx(
"mx-[3px] size-2 rounded-full",
current === index + 1 ? "bg-black" : "bg-neutral-light",
)}
/>
))}
</div>
<div className="flex gap-2 md:gap-4">
<CarouselPrevious className="static size-12 -translate-y-0" />
<CarouselNext className="static size-12 -translate-y-0" />
</div>
</div>
</div>
</Carousel>
</div>
</section>
);
};
const ProductCard: React.FC<ProductCardProps> = ({ url, image, title, price, variant, button }) => {
return (
<div>
<a href={url} className="mb-3 block aspect-[5/6] md:mb-4">
<img src={image.src} alt={image.alt} className="size-full object-cover" />
</a>
<a href={url} className="flex justify-between md:text-md">
<div className="mr-4">
<h3 className="font-semibold">{title}</h3>
<div className="text-sm">{variant}</div>
</div>
<div className="text-md font-semibold md:text-lg">{price}</div>
</a>
<Button {...button} className="mt-3 w-full md:mt-4">
{button.title}
</Button>
</div>
);
};
const productData = {
url: "#",
image: {
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
alt: "Relume placeholder image",
},
title: "Product name",
price: "$55",
variant: "Variant",
button: { variant: "secondary", size: "sm", title: "Add to cart" },
};
export const Product6Defaults: Props = {
tagline: "Tagline",
heading: "Products",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
button: {
variant: "secondary",
size: "primary",
title: "View all",
},
products: [
productData,
productData,
productData,
productData,
productData,
productData,
productData,
productData,
],
};
.svg)
.svg)
Need help?
For installation guidelines and API information, visit the docs.
Examples
No items found.
.avif)
.avif)
.avif)
.webp)
.webp)
.webp)
