Menu
Footer 5
<footer id="relume" class="px-[5%] py-12 md:py-18 lg:py-20">
<div class="container">
<div class="rb-12 mb-12 block items-start justify-between md:mb-18 lg:mb-20 lg:flex">
<div class="rb-6 mb-6 lg:mb-0">
<h1 class="font-semibold md:text-md">Join our newsletter</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="max-w-md lg:min-w-[25rem]">
<form
class="mb-3 grid grid-cols-1 gap-x-4 gap-y-3 sm:grid-cols-[1fr_max-content] sm:gap-y-4 md:gap-4"
>
<div class="relative flex w-full items-center">
<input
type="email"
class="flex size-full min-h-11 border border-border-primary bg-background-primary py-2 align-middle file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-neutral focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 px-3"
id="email"
placeholder="Enter your email"
value=""
/>
</div>
<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-5 py-2"
title="Subscribe"
>
Subscribe
</button>
</form>
<div>
<p class="text-xs">
By subscribing you agree to with our
<a href="#" class="underline">Privacy Policy</a>.
</p>
</div>
</div>
</div>
<div
class="rb-12 mb-12 grid grid-cols-1 items-start gap-x-8 gap-y-10 sm:grid-cols-3 md:mb-18 md:gap-y-12 lg:mb-20 lg:grid-cols-6"
>
<a
href="#"
class="sm:col-start-1 sm:col-end-4 sm:row-start-1 sm:row-end-2 lg:col-start-auto lg:col-end-auto lg:row-start-auto lg:row-end-auto"
><img src="https://d22po4pjz3o32e.cloudfront.net/logo-image.svg" alt="Logo image"
/></a>
<div class="flex flex-col items-start justify-start">
<h2 class="mb-3 font-semibold md:mb-4">Column One</h2>
<ul>
<li class="py-2 text-sm"><a href="#" class="flex items-center gap-3">Link One</a></li>
<li class="py-2 text-sm"><a href="#" class="flex items-center gap-3">Link Two</a></li>
<li class="py-2 text-sm"><a href="#" class="flex items-center gap-3">Link Three</a></li>
<li class="py-2 text-sm"><a href="#" class="flex items-center gap-3">Link Four</a></li>
<li class="py-2 text-sm"><a href="#" class="flex items-center gap-3">Link Five</a></li>
</ul>
</div>
<div class="flex flex-col items-start justify-start">
<h2 class="mb-3 font-semibold md:mb-4">Column Two</h2>
<ul>
<li class="py-2 text-sm"><a href="#" class="flex items-center gap-3">Link Six</a></li>
<li class="py-2 text-sm"><a href="#" class="flex items-center gap-3">Link Seven</a></li>
<li class="py-2 text-sm"><a href="#" class="flex items-center gap-3">Link Eight</a></li>
<li class="py-2 text-sm"><a href="#" class="flex items-center gap-3">Link Nine</a></li>
<li class="py-2 text-sm"><a href="#" class="flex items-center gap-3">Link Ten</a></li>
</ul>
</div>
<div class="flex flex-col items-start justify-start">
<h2 class="mb-3 font-semibold md:mb-4">Column Three</h2>
<ul>
<li class="py-2 text-sm"><a href="#" class="flex items-center gap-3">Link Eleven</a></li>
<li class="py-2 text-sm"><a href="#" class="flex items-center gap-3">Link Twelve</a></li>
<li class="py-2 text-sm">
<a href="#" class="flex items-center gap-3">Link Thirteen</a>
</li>
<li class="py-2 text-sm">
<a href="#" class="flex items-center gap-3">Link Fourteen</a>
</li>
<li class="py-2 text-sm"><a href="#" class="flex items-center gap-3">Link Fifteen</a></li>
</ul>
</div>
<div class="flex flex-col items-start justify-start">
<h2 class="mb-3 font-semibold md:mb-4">Column Four</h2>
<ul>
<li class="py-2 text-sm"><a href="#" class="flex items-center gap-3">Link Sixteen</a></li>
<li class="py-2 text-sm">
<a href="#" class="flex items-center gap-3">Link Seventeen</a>
</li>
<li class="py-2 text-sm">
<a href="#" class="flex items-center gap-3">Link Eighteen</a>
</li>
<li class="py-2 text-sm">
<a href="#" class="flex items-center gap-3">Link Nineteen</a>
</li>
<li class="py-2 text-sm"><a href="#" class="flex items-center gap-3">Link Twenty</a></li>
</ul>
</div>
<div class="flex flex-col items-start justify-start">
<h2 class="mb-3 font-semibold md:mb-4">Column Five</h2>
<ul>
<li class="py-2 text-sm">
<a href="#" class="flex items-center gap-3">Link Twenty One</a>
</li>
<li class="py-2 text-sm">
<a href="#" class="flex items-center gap-3">Link Twenty Two</a>
</li>
<li class="py-2 text-sm">
<a href="#" class="flex items-center gap-3">Link Twenty Three</a>
</li>
<li class="py-2 text-sm">
<a href="#" class="flex items-center gap-3">Link Twenty Four</a>
</li>
<li class="py-2 text-sm">
<a href="#" class="flex items-center gap-3">Link Twenty Five</a>
</li>
</ul>
</div>
</div>
<div class="h-px w-full bg-black"></div>
<div
class="flex flex-col-reverse items-start pb-4 pt-6 text-sm md:justify-start md:pb-0 md:pt-8 lg:flex-row lg:items-center lg:justify-between"
>
<div class="flex flex-col-reverse items-start md:flex-row md:gap-6 lg:items-center">
<p class="mt-8 md:mt-0">© 2024 Relume. All rights reserved.</p>
<div
class="grid grid-flow-row grid-cols-[max-content] justify-center gap-y-4 md:grid-flow-col md:justify-center md:gap-x-6 md:gap-y-0 lg:text-left"
>
<p class="underline"><a href="#">Privacy Policy</a></p>
<p class="underline"><a href="#">Terms of Service</a></p>
<p class="underline"><a href="#">Cookies Settings</a></p>
</div>
</div>
<div class="mb-8 flex items-center justify-center gap-3 lg:mb-0">
<a href="#"
><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="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-6"
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-6 p-0.5"
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-6"
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-6"
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>
</footer>
"use client";
import { Button, Input } from "@relume_io/relume-ui";
import type { ButtonProps } from "@relume_io/relume-ui";
import { FaXTwitter } from "react-icons/fa6";
import {
BiLogoFacebookCircle,
BiLogoInstagram,
BiLogoLinkedinSquare,
BiLogoYoutube,
} from "react-icons/bi";
import { useState } from "react";
type ImageProps = {
url?: string;
src: string;
alt?: string;
};
type Links = {
title: string;
url: string;
};
type ColumnLinks = {
title: string;
links: Links[];
};
type SocialMediaLinks = {
url: string;
icon: React.ReactNode;
};
type FooterLink = {
title: string;
url: string;
};
type Props = {
logo: ImageProps;
newsletterHeading: string;
newsletterDescription: string;
inputPlaceholder?: string;
button: ButtonProps;
termsAndConditions: string;
columnLinks: ColumnLinks[];
socialMediaLinks: SocialMediaLinks[];
footerText?: string;
footerLinks: FooterLink[];
};
export type Footer5Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
export const Footer5 = (props: Footer5Props) => {
const {
logo,
newsletterHeading,
newsletterDescription,
inputPlaceholder,
button,
termsAndConditions,
columnLinks,
socialMediaLinks,
footerText,
footerLinks,
} = {
...Footer5Defaults,
...props,
};
const [emailInput, setEmailInput] = useState<string>("");
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
console.log({
emailInput,
});
};
return (
<footer id="relume" className="px-[5%] py-12 md:py-18 lg:py-20">
<div className="container">
<div className="rb-12 mb-12 block items-start justify-between md:mb-18 lg:mb-20 lg:flex">
<div className="rb-6 mb-6 lg:mb-0">
<h1 className="font-semibold md:text-md">{newsletterHeading}</h1>
<p>{newsletterDescription}</p>
</div>
<div className="max-w-md lg:min-w-[25rem]">
<form
className="mb-3 grid grid-cols-1 gap-x-4 gap-y-3 sm:grid-cols-[1fr_max-content] sm:gap-y-4 md:gap-4"
onSubmit={handleSubmit}
>
<Input
id="email"
type="email"
placeholder={inputPlaceholder}
value={emailInput}
onChange={(e) => setEmailInput(e.target.value)}
/>
<Button {...button}>{button.title}</Button>
</form>
<div dangerouslySetInnerHTML={{ __html: termsAndConditions }} />
</div>
</div>
<div className="rb-12 mb-12 grid grid-cols-1 items-start gap-x-8 gap-y-10 sm:grid-cols-3 md:mb-18 md:gap-y-12 lg:mb-20 lg:grid-cols-6">
<a
href={logo.url}
className="sm:col-start-1 sm:col-end-4 sm:row-start-1 sm:row-end-2 lg:col-start-auto lg:col-end-auto lg:row-start-auto lg:row-end-auto"
>
<img src={logo.src} alt={logo.alt} />
</a>
{columnLinks.map((column, index) => (
<div key={index} className="flex flex-col items-start justify-start">
<h2 className="mb-3 font-semibold md:mb-4">{column.title}</h2>
<ul>
{column.links.map((link, linkIndex) => (
<li key={linkIndex} className="py-2 text-sm">
<a href={link.url} className="flex items-center gap-3">
{link.title}
</a>
</li>
))}
</ul>
</div>
))}
</div>
<div className="h-px w-full bg-black" />
<div className="flex flex-col-reverse items-start pb-4 pt-6 text-sm md:justify-start md:pb-0 md:pt-8 lg:flex-row lg:items-center lg:justify-between">
<div className="flex flex-col-reverse items-start md:flex-row md:gap-6 lg:items-center">
<p className="mt-8 md:mt-0">{footerText}</p>
<div className="grid grid-flow-row grid-cols-[max-content] justify-center gap-y-4 md:grid-flow-col md:justify-center md:gap-x-6 md:gap-y-0 lg:text-left">
{footerLinks.map((link, index) => (
<p key={index} className="underline">
<a href={link.url}>{link.title}</a>
</p>
))}
</div>
</div>
<div className="mb-8 flex items-center justify-center gap-3 lg:mb-0">
{socialMediaLinks.map((link, index) => (
<a key={index} href={link.url}>
{link.icon}
</a>
))}
</div>
</div>
</div>
</footer>
);
};
export const Footer5Defaults: Props = {
logo: {
url: "#",
src: "https://d22po4pjz3o32e.cloudfront.net/logo-image.svg",
alt: "Logo image",
},
newsletterHeading: "Join our newsletter",
newsletterDescription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
inputPlaceholder: "Enter your email",
button: {
title: "Subscribe",
variant: "secondary",
size: "sm",
},
termsAndConditions: `
<p class='text-xs'>
By subscribing you agree to with our
<a href='#' class='underline'>Privacy Policy</a>.
</p>
`,
columnLinks: [
{
title: "Column One",
links: [
{ title: "Link One", url: "#" },
{ title: "Link Two", url: "#" },
{ title: "Link Three", url: "#" },
{ title: "Link Four", url: "#" },
{ title: "Link Five", url: "#" },
],
},
{
title: "Column Two",
links: [
{ title: "Link Six", url: "#" },
{ title: "Link Seven", url: "#" },
{ title: "Link Eight", url: "#" },
{ title: "Link Nine", url: "#" },
{ title: "Link Ten", url: "#" },
],
},
{
title: "Column Three",
links: [
{ title: "Link Eleven", url: "#" },
{ title: "Link Twelve", url: "#" },
{ title: "Link Thirteen", url: "#" },
{ title: "Link Fourteen", url: "#" },
{ title: "Link Fifteen", url: "#" },
],
},
{
title: "Column Four",
links: [
{ title: "Link Sixteen", url: "#" },
{ title: "Link Seventeen", url: "#" },
{ title: "Link Eighteen", url: "#" },
{ title: "Link Nineteen", url: "#" },
{ title: "Link Twenty", url: "#" },
],
},
{
title: "Column Five",
links: [
{ title: "Link Twenty One", url: "#" },
{ title: "Link Twenty Two", url: "#" },
{ title: "Link Twenty Three", url: "#" },
{ title: "Link Twenty Four", url: "#" },
{ title: "Link Twenty Five", url: "#" },
],
},
],
socialMediaLinks: [
{ url: "#", icon: <BiLogoFacebookCircle className="size-6" /> },
{ url: "#", icon: <BiLogoInstagram className="size-6" /> },
{ url: "#", icon: <FaXTwitter className="size-6 p-0.5" /> },
{ url: "#", icon: <BiLogoLinkedinSquare className="size-6" /> },
{ url: "#", icon: <BiLogoYoutube className="size-6" /> },
],
footerText: "© 2024 Relume. All rights reserved.",
footerLinks: [
{ title: "Privacy Policy", url: "#" },
{ title: "Terms of Service", url: "#" },
{ title: "Cookies Settings", url: "#" },
],
};
.svg)
.svg)
Need help?
For installation guidelines and API information, visit the docs.
Examples
No items found.
.avif)
.avif)
.avif)
.webp)
.webp)
.webp)
