Menu
Links 15
<section id="relume" class="px-[5%] py-16 md:py-24 lg:py-28">
<div class="container max-w-md">
<div class="mb-10 flex flex-col gap-6 sm:flex-row md:mb-14 lg:mb-16">
<img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image-small.svg"
alt="Relume placeholder avatar"
class="size-24 rounded-full object-cover"
/>
<div class="grow">
<h2 class="mb-2 text-xl font-bold md:text-2xl">Name Surname</h2>
<p class="mb-3 md:mb-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros
elementum tristique.
</p>
<div class="flex flex-wrap gap-3">
<a href="#"
><svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
class="size-8"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.001 2.002c-5.522 0-9.999 4.477-9.999 9.999 0 4.99 3.656 9.126 8.437 9.879v-6.988h-2.54v-2.891h2.54V9.798c0-2.508 1.493-3.891 3.776-3.891 1.094 0 2.24.195 2.24.195v2.459h-1.264c-1.24 0-1.628.772-1.628 1.563v1.875h2.771l-.443 2.891h-2.328v6.988C18.344 21.129 22 16.992 22 12.001c0-5.522-4.477-9.999-9.999-9.999z"
></path></svg></a
><a href="#"
><svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
class="size-8"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.999 7.377a4.623 4.623 0 1 0 0 9.248 4.623 4.623 0 0 0 0-9.248zm0 7.627a3.004 3.004 0 1 1 0-6.008 3.004 3.004 0 0 1 0 6.008z"
></path>
<circle cx="16.806" cy="7.207" r="1.078"></circle>
<path
d="M20.533 6.111A4.605 4.605 0 0 0 17.9 3.479a6.606 6.606 0 0 0-2.186-.42c-.963-.042-1.268-.054-3.71-.054s-2.755 0-3.71.054a6.554 6.554 0 0 0-2.184.42 4.6 4.6 0 0 0-2.633 2.632 6.585 6.585 0 0 0-.419 2.186c-.043.962-.056 1.267-.056 3.71 0 2.442 0 2.753.056 3.71.015.748.156 1.486.419 2.187a4.61 4.61 0 0 0 2.634 2.632 6.584 6.584 0 0 0 2.185.45c.963.042 1.268.055 3.71.055s2.755 0 3.71-.055a6.615 6.615 0 0 0 2.186-.419 4.613 4.613 0 0 0 2.633-2.633c.263-.7.404-1.438.419-2.186.043-.962.056-1.267.056-3.71s0-2.753-.056-3.71a6.581 6.581 0 0 0-.421-2.217zm-1.218 9.532a5.043 5.043 0 0 1-.311 1.688 2.987 2.987 0 0 1-1.712 1.711 4.985 4.985 0 0 1-1.67.311c-.95.044-1.218.055-3.654.055-2.438 0-2.687 0-3.655-.055a4.96 4.96 0 0 1-1.669-.311 2.985 2.985 0 0 1-1.719-1.711 5.08 5.08 0 0 1-.311-1.669c-.043-.95-.053-1.218-.053-3.654 0-2.437 0-2.686.053-3.655a5.038 5.038 0 0 1 .311-1.687c.305-.789.93-1.41 1.719-1.712a5.01 5.01 0 0 1 1.669-.311c.951-.043 1.218-.055 3.655-.055s2.687 0 3.654.055a4.96 4.96 0 0 1 1.67.311 2.991 2.991 0 0 1 1.712 1.712 5.08 5.08 0 0 1 .311 1.669c.043.951.054 1.218.054 3.655 0 2.436 0 2.698-.043 3.654h-.011z"
></path></svg></a
><a href="#"
><svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 512 512"
class="size-8"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"
></path></svg></a
><a href="#"
><svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
class="size-8"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20 3H4a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zM8.339 18.337H5.667v-8.59h2.672v8.59zM7.003 8.574a1.548 1.548 0 1 1 0-3.096 1.548 1.548 0 0 1 0 3.096zm11.335 9.763h-2.669V14.16c0-.996-.018-2.277-1.388-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248h-2.667v-8.59h2.56v1.174h.037c.355-.675 1.227-1.387 2.524-1.387 2.704 0 3.203 1.778 3.203 4.092v4.71z"
></path></svg></a
><a href="#"
><svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
class="size-8"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M21.593 7.203a2.506 2.506 0 0 0-1.762-1.766C18.265 5.007 12 5 12 5s-6.264-.007-7.831.404a2.56 2.56 0 0 0-1.766 1.778c-.413 1.566-.417 4.814-.417 4.814s-.004 3.264.406 4.814c.23.857.905 1.534 1.763 1.765 1.582.43 7.83.437 7.83.437s6.265.007 7.831-.403a2.515 2.515 0 0 0 1.767-1.763c.414-1.565.417-4.812.417-4.812s.02-3.265-.407-4.831zM9.996 15.005l.005-6 5.207 3.005-5.212 2.995z"
></path></svg
></a>
</div>
</div>
</div>
<div class="space-y-8">
<div class="flex flex-col gap-4 md:text-center">
<a href="#" class="flex items-center gap-x-4 border border-border-primary p-2"
><div>
<img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image-small.svg"
alt="Relume placeholder image"
class="size-16 object-cover"
/>
</div>
<p>Link one</p></a
>
</div>
<div class="flex flex-col gap-4 md:text-center">
<h3 class="text-md font-bold leading-[1.4] md:text-xl">Category name</h3>
<a href="#" class="flex items-center gap-x-4 border border-border-primary p-2"
><div>
<img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image-small.svg"
alt="Relume placeholder image"
class="size-16 object-cover"
/>
</div>
<p>Link two</p></a
><a href="#" class="flex items-center gap-x-4 border border-border-primary p-2"
><div>
<img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image-small.svg"
alt="Relume placeholder image"
class="size-16 object-cover"
/>
</div>
<p>Link three</p></a
><a href="#" class="flex items-center gap-x-4 border border-border-primary p-2"
><div>
<img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image-small.svg"
alt="Relume placeholder image"
class="size-16 object-cover"
/>
</div>
<p>Link four</p></a
>
</div>
<div class="flex flex-col gap-4 md:text-center">
<h3 class="text-md font-bold leading-[1.4] md:text-xl">Category name</h3>
<a href="#" class="flex items-center gap-x-4 border border-border-primary p-2"
><div>
<img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image-small.svg"
alt="Relume placeholder image"
class="size-16 object-cover"
/>
</div>
<p>Link five</p></a
><a href="#" class="flex items-center gap-x-4 border border-border-primary p-2"
><div>
<img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image-small.svg"
alt="Relume placeholder image"
class="size-16 object-cover"
/>
</div>
<p>Link six</p></a
>
</div>
<button
class="focus-visible:ring-border-primary inline-flex items-center justify-center 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 text-text-primary bg-background-primary w-full gap-4 whitespace-normal border border-border-primary p-4 text-left"
type="button"
aria-haspopup="dialog"
aria-expanded="false"
aria-controls="radix-:Ra:"
data-state="closed"
>
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
class="size-8 shrink-0"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20 4H4c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm0 2v.511l-8 6.223-8-6.222V6h16zM4 18V9.044l7.386 5.745a.994.994 0 0 0 1.228 0L20 9.044 20.002 18H4z"
></path></svg
><span class="flex grow flex-col items-start"
><span class="font-semibold md:text-md">Join our newsletter</span
><span class="text-sm"
>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span
></span
>
</button>
</div>
</div>
</section>
import React, { useState } from "react";
import { Button, Dialog, DialogContent, DialogTrigger, Input } from "@relume_io/relume-ui";
import type { ButtonProps } from "@relume_io/relume-ui";
import { FaXTwitter } from "react-icons/fa6";
import {
BiEnvelope,
BiLogoFacebookCircle,
BiLogoInstagram,
BiLogoLinkedinSquare,
BiLogoYoutube,
} from "react-icons/bi";
type ImageProps = {
src: string;
alt?: string;
};
type AuthorDetailsProps = {
avatar: ImageProps;
fullName: string;
position: string;
};
type CategoryLinkProps = {
url: string;
title: string;
image: ImageProps;
};
type CategoryProps = {
heading?: string;
links: CategoryLinkProps[];
};
type SocialLinkProps = {
href: string;
icon: React.ReactNode;
};
type NewsletterProps = {
heading: string;
description: string;
inputPlaceholder?: string;
submitButton: ButtonProps;
termsAndConditions: string;
};
type Props = {
author: AuthorDetailsProps;
categories: CategoryProps[];
button: ButtonProps;
newsLetter: NewsletterProps;
socialLinks: SocialLinkProps[];
};
export type Links15Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
export const Links15 = (props: Links15Props) => {
const { author, categories, button, newsLetter, socialLinks } = {
...Links15Defaults,
...props,
};
const [emailInput, setEmailInput] = useState<string>("");
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
console.log({
emailInput,
});
};
return (
<section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28">
<div className="container max-w-md">
<div className="mb-10 flex flex-col gap-6 sm:flex-row md:mb-14 lg:mb-16">
<img
src={author.avatar.src}
alt={author.avatar.alt}
className="size-24 rounded-full object-cover"
/>
<div className="grow">
<h2 className="mb-2 text-xl font-bold md:text-2xl">{author.fullName}</h2>
<p className="mb-3 md:mb-4">{author.position}</p>
<div className="flex flex-wrap gap-3">
{socialLinks.map((link, index) => (
<a key={index} href={link.href}>
{link.icon}
</a>
))}
</div>
</div>
</div>
<div className="space-y-8">
{categories.map((category, index) => (
<Category key={index} {...category} />
))}
<Dialog>
<DialogTrigger asChild>
<Button
className="w-full gap-4 whitespace-normal border border-border-primary p-4 text-left"
{...button}
/>
</DialogTrigger>
<DialogContent
closeIconPosition="inside"
overlayClassName="bg-black/25"
className="flex size-full flex-col justify-center bg-white px-[5%] pb-28 pt-12 md:size-auto md:w-[90%] md:px-12 md:py-12 lg:max-w-sm"
>
<div className="mb-8 text-center md:mb-12">
<h2 className="mb-3 text-4xl font-bold leading-[1.2] md:mb-4 md:text-5xl lg:text-6xl">
{newsLetter.heading}
</h2>
<p>{newsLetter.description}</p>
</div>
<form className="mb-4 flex flex-col gap-y-4" onSubmit={handleSubmit}>
<Input
id="email"
type="email"
placeholder={newsLetter.inputPlaceholder}
value={emailInput}
onChange={(e) => setEmailInput(e.target.value)}
/>
<Button {...newsLetter.submitButton}>{newsLetter.submitButton.title}</Button>
</form>
<div dangerouslySetInnerHTML={{ __html: newsLetter.termsAndConditions }} />
</DialogContent>
</Dialog>
</div>
</div>
</section>
);
};
const Category = (category: CategoryProps) => {
return (
<div className="flex flex-col gap-4 md:text-center">
{category.heading && (
<h3 className="text-md font-bold leading-[1.4] md:text-xl">{category.heading}</h3>
)}
{category.links.map((link, index) => (
<a
href={link.url}
key={index}
className="flex items-center gap-x-4 border border-border-primary p-2"
>
<div>
<img src={link.image.src} alt={link.image.alt} className="size-16 object-cover" />
</div>
<p>{link.title}</p>
</a>
))}
</div>
);
};
export const Links15Defaults: Props = {
author: {
avatar: {
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-small.svg",
alt: "Relume placeholder avatar",
},
fullName: "Name Surname",
position:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
},
categories: [
{
links: [
{
url: "#",
title: "Link one",
image: {
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-small.svg",
alt: "Relume placeholder image",
},
},
],
},
{
heading: "Category name",
links: [
{
url: "#",
title: "Link two",
image: {
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-small.svg",
alt: "Relume placeholder image",
},
},
{
url: "#",
title: "Link three",
image: {
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-small.svg",
alt: "Relume placeholder image",
},
},
{
url: "#",
title: "Link four",
image: {
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-small.svg",
alt: "Relume placeholder image",
},
},
],
},
{
heading: "Category name",
links: [
{
url: "#",
title: "Link five",
image: {
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-small.svg",
alt: "Relume placeholder image",
},
},
{
url: "#",
title: "Link six",
image: {
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-small.svg",
alt: "Relume placeholder image",
},
},
],
},
],
button: {
variant: "secondary",
children: (
<>
<BiEnvelope className="size-8 shrink-0" />
<span className="flex grow flex-col items-start">
<span className="font-semibold md:text-md">Join our newsletter</span>
<span className="text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</span>
</>
),
},
newsLetter: {
heading: "Join our newsletter",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
inputPlaceholder: "Enter your email",
submitButton: {
title: "Subscribe",
},
termsAndConditions: `
<p class='text-xs'>
By subscribing you agree to with our
<a href='#' class='underline'>Privacy Policy</a> and provide consent to receive updates from our company.
</p>
`,
},
socialLinks: [
{ href: "#", icon: <BiLogoFacebookCircle className="size-8" /> },
{ href: "#", icon: <BiLogoInstagram className="size-8" /> },
{ href: "#", icon: <FaXTwitter className="size-8" /> },
{ href: "#", icon: <BiLogoLinkedinSquare className="size-8" /> },
{ href: "#", icon: <BiLogoYoutube className="size-8" /> },
],
};
.svg)
.svg)
Need help?
For installation guidelines and API information, visit the docs.
Examples
No items found.
.avif)
.avif)
.avif)
.webp)
.webp)
.webp)
