Menu
Comparison 4
<section id="relume" class="px-[5%] py-16 md:py-24 lg:py-28">
<div class="container">
<div class="mx-auto mb-12 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="mx-auto">
<div class="grid grid-cols-3 md:grid-cols-[1.5fr_1fr_1fr_1fr]">
<div
class="hidden h-full flex-col items-start justify-end py-4 pr-4 sm:py-6 sm:pr-6 md:flex lg:py-6 lg:pr-6"
>
<h2 class="text-md font-bold leading-[1.4] md:text-xl">Product comparison</h2>
</div>
<div class="flex h-full flex-col justify-between px-2 py-4 sm:px-4 sm:py-6 lg:p-6">
<div class="flex flex-col items-center gap-2 text-center">
<img
src="https://d22po4pjz3o32e.cloudfront.net/relume-icon.svg"
alt="Relume icon 1"
class="size-12"
/>
<h2 class="text-md font-bold leading-[1.4] md:text-xl">Product name</h2>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="flex h-full flex-col justify-between px-2 py-4 sm:px-4 sm:py-6 lg:p-6">
<div class="flex flex-col items-center gap-2 text-center">
<img
src="https://d22po4pjz3o32e.cloudfront.net/relume-icon.svg"
alt="Relume icon 2"
class="size-12"
/>
<h2 class="text-md font-bold leading-[1.4] md:text-xl">Product name</h2>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="flex h-full flex-col justify-between px-2 py-4 sm:px-4 sm:py-6 lg:p-6">
<div class="flex flex-col items-center gap-2 text-center">
<img
src="https://d22po4pjz3o32e.cloudfront.net/relume-icon.svg"
alt="Relume icon 3"
class="size-12"
/>
<h2 class="text-md font-bold leading-[1.4] md:text-xl">Product name</h2>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div>
<div>
<div class="grid grid-cols-3 md:grid-cols-[1.5fr_1fr_1fr_1fr] bg-background-secondary">
<p class="col-span-3 row-span-1 p-4 md:col-span-1 md:px-6 md:py-4">
Feature text goes here
</p>
<div
class="flex items-center justify-center px-4 py-4 text-center font-semibold md:px-6"
>
<span>Unlimited</span>
</div>
<div
class="flex items-center justify-center px-4 py-4 text-center font-semibold md:px-6"
>
<span>25</span>
</div>
<div
class="flex items-center justify-center px-4 py-4 text-center font-semibold md:px-6"
>
<span>10</span>
</div>
</div>
</div>
<div>
<div class="grid grid-cols-3 md:grid-cols-[1.5fr_1fr_1fr_1fr]">
<p class="col-span-3 row-span-1 p-4 md:col-span-1 md:px-6 md:py-4">
Feature text goes here
</p>
<div
class="flex items-center justify-center px-4 py-4 text-center font-semibold md:px-6"
>
<span
><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="m10 15.586-3.293-3.293-1.414 1.414L10 18.414l9.707-9.707-1.414-1.414z"
></path></svg
></span>
</div>
<div
class="flex items-center justify-center px-4 py-4 text-center font-semibold md:px-6"
>
<span
><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="m10 15.586-3.293-3.293-1.414 1.414L10 18.414l9.707-9.707-1.414-1.414z"
></path></svg
></span>
</div>
<div
class="flex items-center justify-center px-4 py-4 text-center font-semibold md:px-6"
>
<span
><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="m10 15.586-3.293-3.293-1.414 1.414L10 18.414l9.707-9.707-1.414-1.414z"
></path></svg
></span>
</div>
</div>
</div>
<div>
<div class="grid grid-cols-3 md:grid-cols-[1.5fr_1fr_1fr_1fr] bg-background-secondary">
<p class="col-span-3 row-span-1 p-4 md:col-span-1 md:px-6 md:py-4">
Feature text goes here
</p>
<div
class="flex items-center justify-center px-4 py-4 text-center font-semibold md:px-6"
>
<span
><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="m10 15.586-3.293-3.293-1.414 1.414L10 18.414l9.707-9.707-1.414-1.414z"
></path></svg
></span>
</div>
<div
class="flex items-center justify-center px-4 py-4 text-center font-semibold md:px-6"
>
<span
><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="m10 15.586-3.293-3.293-1.414 1.414L10 18.414l9.707-9.707-1.414-1.414z"
></path></svg
></span>
</div>
<div
class="flex items-center justify-center px-4 py-4 text-center font-semibold md:px-6"
>
<span
><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="m10 15.586-3.293-3.293-1.414 1.414L10 18.414l9.707-9.707-1.414-1.414z"
></path></svg
></span>
</div>
</div>
</div>
<div>
<div class="grid grid-cols-3 md:grid-cols-[1.5fr_1fr_1fr_1fr]">
<p class="col-span-3 row-span-1 p-4 md:col-span-1 md:px-6 md:py-4">
Feature text goes here
</p>
<div
class="flex items-center justify-center px-4 py-4 text-center font-semibold md:px-6"
>
<span
><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="m10 15.586-3.293-3.293-1.414 1.414L10 18.414l9.707-9.707-1.414-1.414z"
></path></svg
></span>
</div>
<div
class="flex items-center justify-center px-4 py-4 text-center font-semibold md:px-6"
>
<span
><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="m10 15.586-3.293-3.293-1.414 1.414L10 18.414l9.707-9.707-1.414-1.414z"
></path></svg
></span>
</div>
<div
class="flex items-center justify-center px-4 py-4 text-center font-semibold md:px-6"
>
<span
><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="m16.192 6.344-4.243 4.242-4.242-4.242-1.414 1.414L10.535 12l-4.242 4.242 1.414 1.414 4.242-4.242 4.243 4.242 1.414-1.414L13.364 12l4.242-4.242z"
></path></svg
></span>
</div>
</div>
</div>
<div>
<div class="grid grid-cols-3 md:grid-cols-[1.5fr_1fr_1fr_1fr] bg-background-secondary">
<p class="col-span-3 row-span-1 p-4 md:col-span-1 md:px-6 md:py-4">
Feature text goes here
</p>
<div
class="flex items-center justify-center px-4 py-4 text-center font-semibold md:px-6"
>
<span
><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="m10 15.586-3.293-3.293-1.414 1.414L10 18.414l9.707-9.707-1.414-1.414z"
></path></svg
></span>
</div>
<div
class="flex items-center justify-center px-4 py-4 text-center font-semibold md:px-6"
>
<span
><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="m16.192 6.344-4.243 4.242-4.242-4.242-1.414 1.414L10.535 12l-4.242 4.242 1.414 1.414 4.242-4.242 4.243 4.242 1.414-1.414L13.364 12l4.242-4.242z"
></path></svg
></span>
</div>
<div
class="flex items-center justify-center px-4 py-4 text-center font-semibold md:px-6"
>
<span
><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="m16.192 6.344-4.243 4.242-4.242-4.242-1.414 1.414L10.535 12l-4.242 4.242 1.414 1.414 4.242-4.242 4.243 4.242 1.414-1.414L13.364 12l4.242-4.242z"
></path></svg
></span>
</div>
</div>
</div>
</div>
<div class="mt-12 flex flex-wrap items-center justify-center gap-4 md:mt-18 lg:mt-20">
<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
><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>
</section>
import { Button, ButtonProps } from "@relume_io/relume-ui";
import clsx from "clsx";
import React from "react";
import { BiCheck, BiX } from "react-icons/bi";
import { RxChevronRight } from "react-icons/rx";
type Feature = {
text: string;
items: React.ReactNode[];
};
type ImageProps = {
src: string;
alt?: string;
};
type ComparisonProducts = {
title?: string;
products: Product[];
};
type Product = {
icon: ImageProps;
productName: string;
description: string;
};
type Props = {
tagline: string;
heading: string;
description: string;
comparisonProducts: ComparisonProducts[];
features: Feature[];
buttons: ButtonProps[];
};
export type Comparison4Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
export const Comparison4 = (props: Comparison4Props) => {
const { tagline, heading, description, buttons, comparisonProducts, features } = {
...Comparison4Defaults,
...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 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="mx-auto">
<div className="grid grid-cols-3 md:grid-cols-[1.5fr_1fr_1fr_1fr]">
{comparisonProducts.map((comparison, index) => (
<React.Fragment key={index}>
<div className="hidden h-full flex-col items-start justify-end py-4 pr-4 sm:py-6 sm:pr-6 md:flex lg:py-6 lg:pr-6">
<h2 className="text-md font-bold leading-[1.4] md:text-xl">{comparison.title}</h2>
</div>
{comparison.products.map((plan, index) => (
<ProductPlan key={index} index={index} {...plan} />
))}
</React.Fragment>
))}
</div>
<FeaturesSection features={features} />
<div className="mt-12 flex flex-wrap items-center justify-center gap-4 md:mt-18 lg:mt-20">
{buttons.map((button, index) => (
<Button key={index} {...button}>
{button.title}
</Button>
))}
</div>
</div>
</div>
</section>
);
};
const ProductPlan = ({ ...product }: Product & { index: number }) => {
return (
<div className="flex h-full flex-col justify-between px-2 py-4 sm:px-4 sm:py-6 lg:p-6">
<div className="flex flex-col items-center gap-2 text-center">
<img src={product.icon.src} alt={product.icon.alt} className="size-12" />
<h2 className="text-md font-bold leading-[1.4] md:text-xl">{product.productName}</h2>
<p>{product.description}</p>
</div>
</div>
);
};
const FeaturesSection = ({ features }: { features: Feature[] }) => {
return (
<div>
{features.map((feature, index) => (
<div key={index}>
<div
key={index}
className={clsx("grid grid-cols-3 md:grid-cols-[1.5fr_1fr_1fr_1fr]", {
"bg-background-secondary": index % 2 === 0,
})}
>
<p className="col-span-3 row-span-1 p-4 md:col-span-1 md:px-6 md:py-4">
{feature.text}
</p>
{feature.items.map((item, index) => (
<div
key={index}
className="flex items-center justify-center px-4 py-4 text-center font-semibold md:px-6"
>
<span>{item}</span>
</div>
))}
</div>
</div>
))}
</div>
);
};
export const Comparison4Defaults: Props = {
tagline: "Tagline",
heading: "Short heading goes here",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
comparisonProducts: [
{
title: "Product comparison",
products: [
{
icon: {
src: "https://d22po4pjz3o32e.cloudfront.net/relume-icon.svg",
alt: "Relume icon 1",
},
productName: "Product name",
description: "Lorem ipsum dolor sit amet",
},
{
icon: {
src: "https://d22po4pjz3o32e.cloudfront.net/relume-icon.svg",
alt: "Relume icon 2",
},
productName: "Product name",
description: "Lorem ipsum dolor sit amet",
},
{
icon: {
src: "https://d22po4pjz3o32e.cloudfront.net/relume-icon.svg",
alt: "Relume icon 3",
},
productName: "Product name",
description: "Lorem ipsum dolor sit amet",
},
],
},
],
features: [
{
text: "Feature text goes here",
items: ["Unlimited", "25", "10"],
},
{
text: "Feature text goes here",
items: [
<BiCheck className="size-6" />,
<BiCheck className="size-6" />,
<BiCheck className="size-6" />,
],
},
{
text: "Feature text goes here",
items: [
<BiCheck className="size-6" />,
<BiCheck className="size-6" />,
<BiCheck className="size-6" />,
],
},
{
text: "Feature text goes here",
items: [
<BiCheck className="size-6" />,
<BiCheck className="size-6" />,
<BiX className="size-6" />,
],
},
{
text: "Feature text goes here",
items: [
<BiCheck className="size-6" />,
<BiX className="size-6" />,
<BiX className="size-6" />,
],
},
],
buttons: [
{
title: "Button",
variant: "secondary",
},
{ 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)
