Header 78



<section id="relume" class="px-[5%] py-16 md:py-24 lg:py-28">
<div class="container flex flex-col items-center">
<div class="rb-12 mb-12 max-w-lg text-center md:mb-18 lg:mb-20">
<h1 class="mb-5 text-6xl font-bold md:mb-6 md:text-9xl lg:text-10xl">
Medium length hero heading goes here
</h1>
<p class="md:text-md">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros
elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut
commodo diam libero vitae erat.
</p>
<div class="mt-6 flex items-center justify-center gap-x-4 md:mt-8">
<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 bg-background-alternative text-text-alternative px-6 py-3"
title="Button"
>
Button</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 bg-background-primary px-6 py-3"
title="Button"
>
Button
</button>
</div>
</div>
<div class="flex w-screen justify-start overflow-hidden">
<div class="grid shrink-0 grid-cols-1 gap-y-4">
<div class="grid w-full animate-marquee-top auto-cols-fr grid-cols-2 gap-4 self-center">
<div class="grid w-full grid-flow-col gap-4">
<div class="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
<img
class="absolute inset-0 size-full object-cover"
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder image 1"
/>
</div>
<div class="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
<img
class="absolute inset-0 size-full object-cover"
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder image 2"
/>
</div>
<div class="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
<img
class="absolute inset-0 size-full object-cover"
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder image 3"
/>
</div>
<div class="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
<img
class="absolute inset-0 size-full object-cover"
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder image 4"
/>
</div>
<div class="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
<img
class="absolute inset-0 size-full object-cover"
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder image 5"
/>
</div>
<div class="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
<img
class="absolute inset-0 size-full object-cover"
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder image 6"
/>
</div>
</div>
<div class="grid w-full grid-flow-col gap-4">
<div class="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
<img
class="absolute inset-0 size-full object-cover"
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder image 1"
/>
</div>
<div class="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
<img
class="absolute inset-0 size-full object-cover"
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder image 2"
/>
</div>
<div class="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
<img
class="absolute inset-0 size-full object-cover"
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder image 3"
/>
</div>
<div class="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
<img
class="absolute inset-0 size-full object-cover"
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder image 4"
/>
</div>
<div class="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
<img
class="absolute inset-0 size-full object-cover"
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder image 5"
/>
</div>
<div class="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
<img
class="absolute inset-0 size-full object-cover"
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder image 6"
/>
</div>
</div>
</div>
<div class="grid w-full animate-marquee-bottom grid-cols-2 gap-4 self-center">
<div class="grid w-full grid-flow-col gap-4">
<div class="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
<img
class="absolute inset-0 size-full object-cover"
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder image 1"
/>
</div>
<div class="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
<img
class="absolute inset-0 size-full object-cover"
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder image 2"
/>
</div>
<div class="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
<img
class="absolute inset-0 size-full object-cover"
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder image 3"
/>
</div>
<div class="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
<img
class="absolute inset-0 size-full object-cover"
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder image 4"
/>
</div>
<div class="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
<img
class="absolute inset-0 size-full object-cover"
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder image 5"
/>
</div>
<div class="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
<img
class="absolute inset-0 size-full object-cover"
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder image 6"
/>
</div>
</div>
<div class="grid w-full grid-flow-col gap-4">
<div class="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
<img
class="absolute inset-0 size-full object-cover"
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder image 1"
/>
</div>
<div class="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
<img
class="absolute inset-0 size-full object-cover"
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder image 2"
/>
</div>
<div class="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
<img
class="absolute inset-0 size-full object-cover"
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder image 3"
/>
</div>
<div class="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
<img
class="absolute inset-0 size-full object-cover"
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder image 4"
/>
</div>
<div class="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
<img
class="absolute inset-0 size-full object-cover"
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder image 5"
/>
</div>
<div class="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]">
<img
class="absolute inset-0 size-full object-cover"
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder image 6"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
import { Button } from "@relume_io/relume-ui";
import type { ButtonProps } from "@relume_io/relume-ui";
type ImageProps = {
src: string;
alt?: string;
};
type Props = {
heading: string;
description: string;
buttons: ButtonProps[];
images: ImageProps[];
};
export type Header78Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
export const Header78 = (props: Header78Props) => {
const { heading, description, buttons, images } = {
...Header78Defaults,
...props,
};
return (
<section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28">
<div className="container flex flex-col items-center">
<div className="rb-12 mb-12 max-w-lg text-center md:mb-18 lg:mb-20">
<h1 className="mb-5 text-6xl font-bold md:mb-6 md:text-9xl lg:text-10xl">{heading}</h1>
<p className="md:text-md">{description}</p>
<div className="mt-6 flex items-center justify-center gap-x-4 md:mt-8">
{buttons.map((button, index) => (
<Button key={index} {...button}>
{button.title}
</Button>
))}
</div>
</div>
<div className="flex w-screen justify-start overflow-hidden">
<div className="grid shrink-0 grid-cols-1 gap-y-4">
<div className="grid w-full animate-marquee-top auto-cols-fr grid-cols-2 gap-4 self-center">
{[...new Array(2)].map((e, index) => (
<div key={index} className="grid w-full grid-flow-col gap-4">
{images.map((image, imageIndex) => (
<div
key={imageIndex}
className="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]"
>
<img
className="absolute inset-0 size-full object-cover"
src={image.src}
alt={image.alt}
/>
</div>
))}
</div>
))}
</div>
<div className="grid w-full animate-marquee-bottom grid-cols-2 gap-4 self-center">
{[...new Array(2)].map((e, index) => (
<div key={index} className="grid w-full grid-flow-col gap-4">
{images.map((image, imageIndex) => (
<div
key={imageIndex}
className="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]"
>
<img
className="absolute inset-0 size-full object-cover"
src={image.src}
alt={image.alt}
/>
</div>
))}
</div>
))}
</div>
</div>
</div>
</div>
</section>
);
};
export const Header78Defaults: Props = {
heading: "Medium length hero heading goes here",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.",
buttons: [{ title: "Button" }, { title: "Button", variant: "secondary" }],
images: [
{
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
alt: "Relume placeholder image 1",
},
{
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
alt: "Relume placeholder image 2",
},
{
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
alt: "Relume placeholder image 3",
},
{
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
alt: "Relume placeholder image 4",
},
{
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
alt: "Relume placeholder image 5",
},
{
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
alt: "Relume placeholder image 6",
},
],
};
Need help?
For installation guidelines and API information, visit the docs.