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
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | 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 className="bg-gray-900 text-gray-300 pt-16 pb-8"> <div className="block mx-auto max-w-7xl"> <div className="grid grid-cols-4 mb-8 gap-4"> <div> <div className="uppercase font-bold text-white mb-4"> Categories </div> <ul className="mt-8"> {categories.map((cat, index) => { return ( <li key={index} className="my-4 text-sm"> <NavLink to="/">{cat.name}</NavLink> </li> ); })} </ul> </div> <div> <div className="uppercase font-bold text-white mb-4">Help</div> <ul className="mt-8"> {help.map((cat, index) => { return ( <li key={index} className="my-4 text-sm"> <NavLink to="/">{cat.name}</NavLink> </li> ); })} </ul> </div> <div className="col-span-2 grid grid-cols-2 gap-8"> <div> <div className="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 className="uppercase font-bold text-white mb-6"> Newsletter </div> <div> <input type="email" placeholder="Enter email address" className="block w-full bg-transparent outline-none border-b border-b-gray-500 py-2 focus-visible:border-b-gray-300" /> <button className="mt-4 btn-v1">Subscribe</button> </div> </div> </div> </div> <div className="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; |
1 2 3 4 5 6 7 8 9 | @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!
