Design Footer Component for Shopping Cart React Application - Part 7
Creating an appealing and functional footer is essential for providing a seamless user experience in your Shopping Cart React Application. In this seventh part of our series, we will focus on designing the footer component. A well-designed footer not only enhances the visual appeal of your application but also ensures easy navigation for users.
Demo Application
Output - Design Footer Component for Shopping Cart React Application - Clue Mediator
In the footer component, we'll add the major three sections: Categories, Help section and Get in Touch and Newsletter section
Design Footer Component
1. Categories
- The footer includes categorized links for easy navigation, such as Women, Men, Shoes, and Watches.
- Utilizing the NavLink component from React Router ensures smooth transitions between different sections.
2. Help Section
- The Help section provides essential links like Track Order, Returns, Shipping, and FAQs.
- Each link is crafted using the NavLink component, maintaining consistency in navigation throughout the application.
3. Get in Touch and Newsletter
- A visually appealing grid layout presents two important sections: Get in Touch and Newsletter.
- Get in Touch offers contact information and invites users to reach out with any questions or concerns.
- The Newsletter section allows users to subscribe by entering their email address and hitting the Subscribe button.
4. Footer Component Code
/components/Footer.jsx
import { NavLink } from "react-router-dom";
function Footer() {
const categories = [
{ name: "Women", href: "/" },
{ name: "Men", href: "/" },
{ name: "Shoes", href: "/" },
{ name: "Watches", href: "/" },
];
const help = [
{ name: "Track Order", href: "/" },
{ name: "Returns", href: "/" },
{ name: "Shipping", href: "/" },
{ name: "FAQs", href: "/" },
];
return (
<div class="bg-gray-900 text-gray-300 pt-16 pb-8">
<div class="block mx-auto max-w-7xl">
<div class="grid grid-cols-4 mb-8 gap-4">
<div>
<div class="uppercase font-bold text-white mb-4">
Categories
</div>
<ul class="mt-8">
{categories.map((cat, index) => {
return (
<li key={index} class="my-4 text-sm">
<navlink to="/">{cat.name}</navlink>
</li>
);
})}
</ul>
</div>
<div>
<div class="uppercase font-bold text-white mb-4">Help</div>
<ul class="mt-8">
{help.map((cat, index) => {
return (
<li key={index} class="my-4 text-sm">
<navlink to="/">{cat.name}</navlink>
</li>
);
})}
</ul>
</div>
<div class="col-span-2 grid grid-cols-2 gap-8">
<div>
<div class="uppercase font-bold text-white mb-6">
Get in Touch
</div>
<p>
Any questions?
<br>
Let us know in store at Clue Mediator or call us on (+1) 99 999
9999
</p>
</div>
<div>
<div class="uppercase font-bold text-white mb-6">
Newsletter
</div>
<div>
<input type="email" placeholder="Enter email address" class="block w-full bg-transparent outline-none border-b border-b-gray-500 py-2 focus-visible:border-b-gray-300">
<button class="mt-4 btn-v1">Subscribe</button>
</div>
</div>
</div>
</div>
<div class="text-xs text-center text-gray-400 border-t border-t-gray-800 pt-8">
Copyright ©2023 All rights reserved
</div>
</div>
</div>
);
}
export default Footer;
index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
.btn-v1 {
@apply tracking-wider bg-indigo-500 px-8 py-3 rounded-full uppercase text-sm font-semibold hover:bg-white hover:text-indigo-500;
}
}
Conclusion
Designing an effective footer is crucial for enhancing user experience and creating a well-rounded Shopping Cart React Application. With clear categorization, easy navigation, and interactive features like the newsletter subscription, your footer becomes a valuable component that adds both style and functionality to your application.
Implement these footer design tips to bring an enhanced visual appeal and user-friendly navigation to your Shopping Cart React Application. Happy coding, and stay tuned for more exciting components in our series!