Footer
Footers are a great way to provide additional navigation or contact information to your users.
Simple Footer
import React from "react";
const Footer = () => {
return (
<footer className="bg-white dark:bg-neutral-900 py-8 text-neutral-500 dark:text-neutral-400 border-t border-neutral-200 dark:border-neutral-800">
<div className="container mx-auto text-center">
<p className="text-sm font-normal tracking-wide">
© 2024 Your Company. All rights reserved.
</p>
</div>
</footer>
);
};
export default Footer;
Footer with Multiple Sections
import React from "react";
import { Instagram, Twitter } from "lucide-react";
const Footer = () => {
return (
<footer className="bg-white dark:bg-neutral-900 py-16 text-neutral-500 dark:text-neutral-400 border-t border-neutral-200 dark:border-neutral-800">
<div className="container mx-auto grid gap-16 px-6 sm:grid-cols-3">
<section className="space-y-6">
<h2 className="text-base font-semibold tracking-tight text-neutral-900 dark:text-white">
Your Company
</h2>
<address className="not-italic text-sm leading-relaxed">
123 Street, Cityville
<br />
<a
href="mailto:info@example.com"
className="transition-colors duration-300 hover:text-neutral-900 dark:hover:text-white"
>
info@example.com
</a>
</address>
</section>
<section className="space-y-6">
<h2 className="text-base font-semibold tracking-tight text-neutral-900 dark:text-white">
Company
</h2>
<ul className="space-y-4">
{["About Us", "Careers", "Press"].map((item) => (
<li key={item}>
<a
href="#"
className="text-sm transition-colors duration-300 hover:text-neutral-900 dark:hover:text-white"
>
{item}
</a>
</li>
))}
</ul>
</section>
<section className="space-y-6">
<h2 className="text-base font-semibold tracking-tight text-neutral-900 dark:text-white">
Follow Us
</h2>
<div className="flex space-x-8">
<a
href="#"
aria-label="Follow on Instagram"
className="text-neutral-400 transition-colors duration-300 hover:text-neutral-900 dark:hover:text-white"
>
<Instagram className="w-5 h-5" />
</a>
<a
href="#"
aria-label="Follow on Twitter"
className="text-neutral-400 transition-colors duration-300 hover:text-neutral-900 dark:hover:text-white"
>
<Twitter className="w-5 h-5" />
</a>
</div>
</section>
</div>
</footer>
);
};
export default Footer;
Footer with Newsletter
import React from "react";
const Footer = () => {
return (
<footer className="bg-white dark:bg-neutral-900 text-neutral-500 dark:text-neutral-400 border-t border-neutral-200 dark:border-neutral-800">
<div className="container mx-auto px-6 py-24">
<div className="flex flex-col items-center justify-between border-b border-neutral-200 dark:border-neutral-800 pb-16 md:flex-row">
<div className="mb-12 md:mb-0 md:w-1/2">
<h2 className="text-3xl font-medium tracking-tight text-neutral-900 dark:text-white">
Subscribe to our Newsletter
</h2>
<p className="mt-4 text-base font-normal">
Stay updated with the latest news and offers.
</p>
</div>
<form
className="w-full md:w-1/2"
aria-label="Newsletter Subscription"
>
<div className="flex">
<input
type="email"
id="newsletter-email"
placeholder="Enter your email"
className="w-full rounded-l-xl bg-neutral-50 p-4 text-neutral-900 dark:bg-neutral-800 focus:outline-none dark:text-white"
required
/>
<button
type="submit"
className="rounded-r-xl bg-neutral-900 px-8 py-4 text-sm font-medium text-white hover:bg-neutral-800 focus:outline-none dark:bg-white dark:text-neutral-900 dark:hover:bg-neutral-100"
>
Subscribe
</button>
</div>
</form>
</div>
<div className="mt-16 text-center text-sm font-normal">
<p>© 2024 Your Company. All rights reserved.</p>
</div>
</div>
</footer>
);
};
export default Footer;
Footer with CTA
import React from "react";
import { Facebook, Instagram, Linkedin, Sparkles, Twitter } from "lucide-react";
const Footer = () => {
return (
<footer className="bg-white dark:bg-neutral-900 py-24 text-center text-neutral-500 dark:text-neutral-400 border-t border-neutral-200 dark:border-neutral-800">
<div className="container mx-auto px-6">
<h2 className="text-4xl font-medium tracking-tight text-neutral-900 dark:text-white">
Join our community
</h2>
<p className="mt-6 text-lg font-normal">
Get updates on our latest products and promotions.
</p>
<button className="mt-12 rounded-full bg-neutral-900 px-12 py-4 text-sm font-medium text-white transition-all duration-300 hover:bg-neutral-800 focus:outline-none dark:bg-white dark:text-neutral-900 dark:hover:bg-neutral-100">
Join Now
</button>
<div className="my-16 flex items-center justify-center">
<div className="flex-grow border-t border-neutral-200 dark:border-neutral-800"></div>
<span className="mx-8">
<Sparkles className="h-6 w-6 text-neutral-900 dark:text-white" />
</span>
<div className="flex-grow border-t border-neutral-200 dark:border-neutral-800"></div>
</div>
<div className="grid gap-16 sm:grid-cols-3">
<div className="space-y-4">
<h3 className="text-base font-semibold tracking-tight text-neutral-900 dark:text-white">
Your Company
</h3>
<p className="text-sm font-normal">123 Street, Cityville</p>
<p className="text-sm font-normal">info@example.com</p>
</div>
<nav className="space-y-4">
<h3 className="text-base font-semibold tracking-tight text-neutral-900 dark:text-white">
Company
</h3>
<ul className="space-y-4">
{["About Us", "Careers", "Press"].map((item) => (
<li key={item}>
<a
href="#"
className="text-sm transition-colors duration-300 hover:text-neutral-900 dark:hover:text-white"
>
{item}
</a>
</li>
))}
</ul>
</nav>
<div className="space-y-6">
<h3 className="text-base font-semibold tracking-tight text-neutral-900 dark:text-white">
Follow Us
</h3>
<div className="flex justify-center space-x-8">
{[Facebook, Twitter, Instagram, Linkedin].map((Icon, index) => (
<a
key={index}
href="#"
className="text-neutral-400 transition-colors duration-300 hover:text-neutral-900 dark:hover:text-white"
aria-label={`Follow on ${Icon.name}`}
>
<Icon className="w-5 h-5" />
</a>
))}
</div>
</div>
</div>
</div>
</footer>
);
};
export default Footer;
Detailed Footer
import React from "react";
import { Facebook, Instagram, Linkedin, Twitter } from "lucide-react";
const Footer = () => {
return (
<footer className="bg-white dark:bg-neutral-900 py-24 text-neutral-500 dark:text-neutral-400 border-t border-neutral-200 dark:border-neutral-800">
<div className="container mx-auto px-6">
<div className="grid gap-16 sm:grid-cols-2 lg:grid-cols-4">
<div className="space-y-8">
<h2 className="text-base font-semibold tracking-tight text-neutral-900 dark:text-white">
Your Brand
</h2>
<p className="text-sm font-normal leading-relaxed">
We are a cutting-edge AI company dedicated to pushing the
boundaries of what's possible with technology.
</p>
<div className="flex space-x-8">
{[Facebook, Twitter, Instagram, Linkedin].map((Icon, index) => (
<a
key={index}
href="#"
className="text-neutral-400 transition-colors duration-300 hover:text-neutral-900 dark:hover:text-white"
aria-label={`Follow on ${Icon.name}`}
>
<Icon className="w-5 h-5" />
</a>
))}
</div>
</div>
{[
{
title: "Products",
items: ["AI Models", "APIs", "Platforms", "Solutions"],
},
{
title: "Resources",
items: ["Documentation", "Case Studies", "Blog", "Support"],
},
{
title: "Company",
items: ["About Us", "Careers", "Contact", "Press"],
},
].map((section) => (
<div key={section.title} className="space-y-8">
<h2 className="text-base font-semibold tracking-tight text-neutral-900 dark:text-white">
{section.title}
</h2>
<ul className="space-y-4">
{section.items.map((item) => (
<li key={item}>
<a
href="#"
className="text-sm transition-colors duration-300 hover:text-neutral-900 dark:hover:text-white"
>
{item}
</a>
</li>
))}
</ul>
</div>
))}
</div>
<div className="mt-24 border-t border-neutral-200 dark:border-neutral-800 pt-8 text-center">
<p className="text-sm font-normal">
© 2024 Your Company. All rights reserved.
</p>
</div>
</div>
</footer>
);
};
export default Footer;