CTA 27



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[];
image: ImageProps;
};
export type Cta27Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
export const Cta27 = (props: Cta27Props) => {
const { heading, description, buttons, image } = {
...Cta27Defaults,
...props,
};
return (
<section id="relume" className="relative px-[5%] py-16 md:py-24 lg:py-28">
<div className="container relative z-10 max-w-lg text-center">
<h2 className="rb-5 mb-5 text-5xl font-bold text-text-alternative md:mb-6 md:text-7xl lg:text-8xl">
{heading}
</h2>
<p className="text-text-alternative md:text-md">{description}</p>
<div className="mt-6 flex flex-wrap items-center justify-center gap-4 md:mt-8">
{buttons.map((button, index) => (
<Button key={index} {...button}>
{button.title}
</Button>
))}
</div>
</div>
<div className="absolute inset-0 z-0">
<img src={image.src} className="size-full object-cover" alt={image.alt} />
<div className="absolute inset-0 bg-black/50" />
</div>
</section>
);
};
export const Cta27Defaults: Props = {
heading: "Medium length heading goes here",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
buttons: [{ title: "Button" }, { title: "Button", variant: "secondary-alt" }],
image: {
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
alt: "Relume placeholder image",
},
};
Need help?
For installation guidelines and API information, visit the docs.
Examples
No items found.