Design Home Page for Shopping Cart React Application – Part 8
In the eighth part of our series on creating a Shopping Cart React Application, we’ll focus on designing an engaging home page. The home page serves as the gateway to your application, showcasing new arrivals, categories, and trending products. Let’s dive into the elements that make a captivating home page.
Demo Application
Design Home Page for Shopping Cart App
- Crafting a Striking Banner
- Showcasing Categories
- Highlighting Trending Products
- Home Page Component Code
1. Crafting a Striking Banner
- The banner introduces new arrivals with an eye-catching image.
- Utilizing the
backdrop-blureffect over the image adds a touch of elegance. - A clear call-to-action button encourages users to explore the latest offerings.
2. Showcasing Categories
- The home page features a grid layout for easy navigation across different categories.
- Each category is represented by an appealing image and name.
- The
CategoryBoxcomponent enhances visual appeal and maintains a consistent design.
3. Highlighting Trending Products
- The home page includes a section showcasing top-rated products.
- A grid layout displays product boxes with images, titles, prices, and ratings.
- The
ProductBoxcomponent ensures a uniform and appealing presentation of each product.
4. Home Page Component Code
/components/CategoryBox.jsx
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | import React from "react"; import { NavLink } from "react-router-dom"; const CategoryBox = (props) => { return ( <NavLink to={props.href}> <div className={`${ props.height || "h-96" } group rounded relative overflow-hidden border shadow`} > <img className="h-full rounded absolute object-cover group-hover:scale-105" src={props.img} /> <p className="relative rounded bg-gradient-to-t from-gray-950 text-white h-full text-xl font-semibold flex items-end justify-center pb-10"> {props.name} </p> </div> </NavLink> ); }; export default CategoryBox; |
/components/Footer.jsx
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 px-4"> <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; |
/components/Header.jsx
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 | import { NavLink } from "react-router-dom"; function Header() { const navigations = [ { name: "Home", href: "/" }, { name: "Products", href: "/products" }, { name: "About", href: "/about" }, { name: "Contact", href: "/contact" }, ]; return ( <div className="shadow bg-white"> <div className="mx-auto max-w-7xl px-4 flex justify-between"> <div className="flex items-center gap-4"> <NavLink to="/"> <img className="h-8 w-8" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Shopping Cart" /> </NavLink> {navigations.map((nav, index) => { return ( <NavLink key={index} to={nav.href} className={({ isActive }) => `text-gray-500 border-b hover:border-b-indigo-500 hover:text-indigo-500 px-4 py-4 h-full text-sm font-medium${ isActive ? " border-b-indigo-500 text-indigo-500" : "" }` } > {nav.name} </NavLink> ); })} </div> <div className="flex items-center"> <i className="bi bi-cart relative"> <span class="absolute -right-2 -top-1 rounded-full bg-red-600 w-4 h-4 p-0 m-0 text-white font-mono text-xs leading-tight text-center"> 1 </span> </i> </div> </div> </div> ); } export default Header; |
/components/Layout.jsx
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | import { Outlet } from "react-router-dom"; import Header from "./Header"; import Footer from "./Footer"; function Layout() { return ( <> <Header /> <div className="mx-auto max-w-7xl px-4"> <Outlet /> </div> <Footer /> </> ); } export default Layout; |
/components/ProductBox.jsx
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 | import React from "react"; import { NavLink } from "react-router-dom"; const ProductBox = (props) => { return ( <NavLink to={props.href}> <div className="group rounded relative shadow p-2 bg-white" title={props.title} > <img className={`${ props.imgHeight || "h-48" } w-full rounded object-contain p-4 group-hover:scale-105`} src={props.image} /> <p className="text-sm text-gray-500 mt-4 line-clamp-1">{props.title}</p> <p className="text-sm font-semibold mt-2 flex justify-between"> <span>${props.price}</span> <span>â{props.rating.rate}</span> </p> </div> </NavLink> ); }; export default ProductBox; |
/containers/Home.jsx
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 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 | import BannerImg from "./../assets/banner.jpg"; import ProductBox from "../components/ProductBox"; import CategoryBox from "../components/CategoryBox"; function Home() { const categories = [ { id: "electronics", name: "Electronics", href: "/", img: "electronics.jpg", }, { id: "jewelery", name: "Jewelery", href: "/", img: "jewelery.jpg" }, { id: "men's clothing", name: "Men's Clothing", href: "/", img: "men's clothing.jpg", }, { id: "women's clothing", name: "Women's Clothing", href: "/", img: "women's clothing.jpg", }, ]; const topRatedProducts = [ { id: 1, title: "Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops", price: 109.95, description: "Your perfect pack for everyday use and walks in the forest. Stash your laptop (up to 15 inches) in the padded sleeve, your everyday", category: "men's clothing", image: "https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg", rating: { rate: 3.9, count: 120, }, }, { id: 2, title: "Mens Casual Premium Slim Fit T-Shirts ", price: 22.3, description: "Slim-fitting style, contrast raglan long sleeve, three-button henley placket, light weight & soft fabric for breathable and comfortable wearing. And Solid stitched shirts with round neck made for durability and a great fit for casual fashion wear and diehard baseball fans. The Henley style round neckline includes a three-button placket.", category: "men's clothing", image: "https://fakestoreapi.com/img/71-3HjGNDUL._AC_SY879._SX._UX._SY._UY_.jpg", rating: { rate: 4.1, count: 259, }, }, { id: 3, title: "Mens Cotton Jacket", price: 55.99, description: "great outerwear jackets for Spring/Autumn/Winter, suitable for many occasions, such as working, hiking, camping, mountain/rock climbing, cycling, traveling or other outdoors. Good gift choice for you or your family member. A warm hearted love to Father, husband or son in this thanksgiving or Christmas Day.", category: "men's clothing", image: "https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg", rating: { rate: 4.7, count: 500, }, }, { id: 4, title: "Mens Casual Slim Fit", price: 15.99, description: "The color could be slightly different between on the screen and in practice. / Please note that body builds vary by person, therefore, detailed size information should be reviewed below on the product description.", category: "men's clothing", image: "https://fakestoreapi.com/img/71YXzeOuslL._AC_UY879_.jpg", rating: { rate: 2.1, count: 430, }, }, { id: 5, title: "John Hardy Women's Legends Naga Gold & Silver Dragon Station Chain Bracelet", price: 695, description: "From our Legends Collection, the Naga was inspired by the mythical water dragon that protects the ocean's pearl. Wear facing inward to be bestowed with love and abundance, or outward for protection.", category: "jewelery", image: "https://fakestoreapi.com/img/71pWzhdJNwL._AC_UL640_QL65_ML3_.jpg", rating: { rate: 4.6, count: 400, }, }, { id: 6, title: "Solid Gold Petite Micropave ", price: 168, description: "Satisfaction Guaranteed. Return or exchange any order within 30 days.Designed and sold by Hafeez Center in the United States. Satisfaction Guaranteed. Return or exchange any order within 30 days.", category: "jewelery", image: "https://fakestoreapi.com/img/61sbMiUnoGL._AC_UL640_QL65_ML3_.jpg", rating: { rate: 3.9, count: 70, }, }, ]; return ( <div> <div className="relative h-[500px]"> <img src={BannerImg} className="absolute top-0 left-0 h-[500px] w-full object-cover" /> <div className="backdrop-blur-sm bg-white/40 h-full flex flex-col items-center justify-center text-center text-gray-800"> <h1 className="text-5xl font-bold">New arrivals are here</h1> <p className="text-lg w-8/12 mx-auto mt-2 font-semibold"> The new arrivals have, well, newly arrived. Check out the latest options from our summer small-batch release while they're still in stock. </p> <button className="btn mt-4">Shop New Arrivals</button> </div> </div> <div className="my-16"> <h2 className="text-xl font-bold uppercase">Shop by Category</h2> <div className="grid grid-cols-4 gap-8 mt-4"> {categories.map((cat, index) => { return <CategoryBox key={index} {...cat} />; })} </div> </div> <div className="my-16"> <h2 className="text-xl font-bold uppercase">Trending Products</h2> <div className="grid grid-cols-6 gap-4 mt-4"> {topRatedProducts.map((product, index) => { return <ProductBox key={index} {...product} />; })} </div> </div> </div> ); } export default Home; |
index.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | @tailwind base; @tailwind components; @tailwind utilities; @layer utilities { body { @apply bg-slate-100; } .btn { @apply tracking-wider bg-gray-900 text-white px-8 py-3 rounded-full uppercase text-sm font-semibold hover:bg-indigo-500; } .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; } } |
/tailwind.config.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | /** @type {import('tailwindcss').Config} */ export default { content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}", ], theme: { extend: { scale: { '105': '1.05', } }, }, plugins: [], } |
Conclusion
Designing an inviting home page is pivotal in creating a positive user experience for your Shopping Cart React Application. With striking banners, clear category displays, and featured products, users are encouraged to explore and engage with your platform.
Implement these design elements to create a visually appealing and user-friendly home page for your Shopping Cart React Application. Happy coding, and stay tuned for more exciting components in our series!
