Menu
Layout 392
<section id="relume" class="px-[5%] py-16 md:py-24 lg:py-28">
<div class="container">
<div class="mx-auto mb-12 w-full max-w-lg text-center md:mb-18 lg:mb-20">
<p class="mb-3 font-semibold md:mb-4">Tagline</p>
<h1 class="mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl">
Short heading goes here
</h1>
<p class="md:text-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="grid auto-cols-fr gap-6 md:grid-cols-2 md:gap-8 lg:grid-cols-3">
<div
class="grid auto-cols-fr grid-cols-1 border border-border-primary first-of-type:row-span-2 first-of-type:flex first-of-type:flex-col sm:col-span-2 sm:grid-cols-2 lg:first-of-type:col-span-1"
>
<div class="block p-6 first-of-type:flex-1 sm:flex sm:flex-col sm:justify-center md:p-8">
<div>
<p class="mb-2 font-semibold">Tagline</p>
<h2 class="mb-3 text-2xl font-bold md:mb-4 md:text-3xl md:leading-[1.3] lg:text-4xl">
Medium length section heading goes here
</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="mt-5 md:mt-6">
<button
class="focus-visible:ring-border-primary inline-flex 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-0 text-text-primary gap-2 p-0"
title="Button"
>
Button<svg
stroke="currentColor"
fill="none"
stroke-width="0"
viewBox="0 0 15 15"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z"
fill="currentColor"
></path>
</svg>
</button>
</div>
</div>
<div class="flex size-full flex-col items-center justify-center self-start lg:h-auto">
<img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder image 1"
/>
</div>
</div>
<div
class="grid auto-cols-fr grid-cols-1 border border-border-primary first-of-type:row-span-2 first-of-type:flex first-of-type:flex-col sm:col-span-2 sm:grid-cols-2 lg:first-of-type:col-span-1"
>
<div class="block p-6 first-of-type:flex-1 sm:flex sm:flex-col sm:justify-center md:p-8">
<div>
<p class="mb-2 font-semibold">Tagline</p>
<h2 class="mb-3 text-2xl font-bold md:mb-4 md:text-3xl md:leading-[1.3] lg:text-4xl">
Medium length section heading goes here
</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="mt-5 md:mt-6">
<button
class="focus-visible:ring-border-primary inline-flex 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-0 text-text-primary gap-2 p-0"
title="Button"
>
Button<svg
stroke="currentColor"
fill="none"
stroke-width="0"
viewBox="0 0 15 15"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z"
fill="currentColor"
></path>
</svg>
</button>
</div>
</div>
<div class="flex size-full flex-col items-center justify-center self-start lg:h-auto">
<img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder image 2"
/>
</div>
</div>
<div class="flex flex-col border border-border-primary">
<div class="flex flex-1 flex-col justify-center p-6 md:p-8">
<div>
<div class="rb-5 mb-5 md:mb-6">
<img
src="https://d22po4pjz3o32e.cloudfront.net/relume-icon.svg"
class="size-12"
alt="Relume logo 1"
/>
</div>
<h2 class="mb-3 text-2xl font-bold md:mb-4 md:text-3xl md:leading-[1.3] lg:text-4xl">
Medium length section heading goes here
</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="mt-5 md:mt-6">
<button
class="focus-visible:ring-border-primary inline-flex 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-0 text-text-primary gap-2 p-0"
title="Button"
>
Button<svg
stroke="currentColor"
fill="none"
stroke-width="0"
viewBox="0 0 15 15"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z"
fill="currentColor"
></path>
</svg>
</button>
</div>
</div>
</div>
<div class="flex flex-col border border-border-primary">
<div class="flex flex-1 flex-col justify-center p-6 md:p-8">
<div>
<div class="rb-5 mb-5 md:mb-6">
<img
src="https://d22po4pjz3o32e.cloudfront.net/relume-icon.svg"
class="size-12"
alt="Relume logo 2"
/>
</div>
<h2 class="mb-3 text-2xl font-bold md:mb-4 md:text-3xl md:leading-[1.3] lg:text-4xl">
Medium length section heading goes here
</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="mt-5 md:mt-6">
<button
class="focus-visible:ring-border-primary inline-flex 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-0 text-text-primary gap-2 p-0"
title="Button"
>
Button<svg
stroke="currentColor"
fill="none"
stroke-width="0"
viewBox="0 0 15 15"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z"
fill="currentColor"
></path>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</section>
import { Button } from "@relume_io/relume-ui";
import type { ButtonProps } from "@relume_io/relume-ui";
import { RxChevronRight } from "react-icons/rx";
type ImageProps = {
src: string;
alt?: string;
};
type FeatureSection = {
icon: ImageProps;
heading: string;
description: string;
button: ButtonProps;
};
type Card = {
tagline: string;
image: ImageProps;
heading: string;
description: string;
button: ButtonProps;
};
type Props = {
tagline: string;
heading: string;
description: string;
cards: Card[];
featureSections: FeatureSection[];
};
export type Layout392Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
export const Layout392 = (props: Layout392Props) => {
const { tagline, heading, description, cards, featureSections } = {
...Layout392Defaults,
...props,
};
return (
<section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28">
<div className="container">
<div className="mx-auto mb-12 w-full max-w-lg text-center md:mb-18 lg:mb-20">
<p className="mb-3 font-semibold md:mb-4">{tagline}</p>
<h1 className="mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl">{heading}</h1>
<p className="md:text-md">{description}</p>
</div>
<div className="grid auto-cols-fr gap-6 md:grid-cols-2 md:gap-8 lg:grid-cols-3">
{cards.map((card, index) => (
<Card key={index} {...card} />
))}
{featureSections.map((feature, index) => (
<FeatureSection key={index} {...feature} />
))}
</div>
</div>
</section>
);
};
const Card = (card: Card) => {
return (
<div className="grid auto-cols-fr grid-cols-1 border border-border-primary first-of-type:row-span-2 first-of-type:flex first-of-type:flex-col sm:col-span-2 sm:grid-cols-2 lg:first-of-type:col-span-1">
<div className="block p-6 first-of-type:flex-1 sm:flex sm:flex-col sm:justify-center md:p-8">
<div>
<p className="mb-2 font-semibold">{card.tagline}</p>
<h2 className="mb-3 text-2xl font-bold md:mb-4 md:text-3xl md:leading-[1.3] lg:text-4xl">
{card.heading}
</h2>
<p>{card.description}</p>
</div>
<div className="mt-5 md:mt-6">
<Button {...card.button}>{card.button.title}</Button>
</div>
</div>
<div className="flex size-full flex-col items-center justify-center self-start lg:h-auto">
<img src={card.image.src} alt={card.image.alt} />
</div>
</div>
);
};
const FeatureSection = (featureSection: FeatureSection) => (
<div className="flex flex-col border border-border-primary">
<div className="flex flex-1 flex-col justify-center p-6 md:p-8">
<div>
<div className="rb-5 mb-5 md:mb-6">
<img src={featureSection.icon.src} className="size-12" alt={featureSection.icon.alt} />
</div>
<h2 className="mb-3 text-2xl font-bold md:mb-4 md:text-3xl md:leading-[1.3] lg:text-4xl">
{featureSection.heading}
</h2>
<p>{featureSection.description}</p>
</div>
<div className="mt-5 md:mt-6">
<Button {...featureSection.button}>{featureSection.button.title}</Button>
</div>
</div>
</div>
);
export const Layout392Defaults: Props = {
tagline: "Tagline",
heading: "Short heading goes here",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
cards: [
{
tagline: "Tagline",
image: {
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
alt: "Relume placeholder image 1",
},
heading: "Medium length section heading goes here",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
button: {
title: "Button",
variant: "link",
size: "link",
iconRight: <RxChevronRight />,
},
},
{
tagline: "Tagline",
image: {
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
alt: "Relume placeholder image 2",
},
heading: "Medium length section heading goes here",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
button: {
title: "Button",
variant: "link",
size: "link",
iconRight: <RxChevronRight />,
},
},
],
featureSections: [
{
icon: {
src: "https://d22po4pjz3o32e.cloudfront.net/relume-icon.svg",
alt: "Relume logo 1",
},
heading: "Medium length section heading goes here",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
button: {
title: "Button",
variant: "link",
size: "link",
iconRight: <RxChevronRight />,
},
},
{
icon: {
src: "https://d22po4pjz3o32e.cloudfront.net/relume-icon.svg",
alt: "Relume logo 2",
},
heading: "Medium length section heading goes here",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
button: {
title: "Button",
variant: "link",
size: "link",
iconRight: <RxChevronRight />,
},
},
],
};
.svg)
.svg)
Need help?
For installation guidelines and API information, visit the docs.
Examples
No items found.
.avif)
.avif)
.avif)
.webp)
.webp)
.webp)
