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

Output - Design Home Page for Shopping Cart React Application - Part 8 - Clue Mediator

Design Home Page for Shopping Cart App

1. Crafting a Striking Banner
2. Showcasing Categories
3. Highlighting Trending Products
4. Home Page Component Code

1. Crafting a Striking Banner

• The banner introduces new arrivals with an eye-catching image.
• Utilizing the backdrop-blur effect 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 CategoryBox component 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 ProductBox component ensures a uniform and appealing presentation of each product.

4. Home Page Component Code

/components/CategoryBox.jsx

import React from "react";
import { NavLink } from "react-router-dom";

const CategoryBox = (props) => {
  return (
    <navlink to={props.href}>
      <div class="{`${" props.height="" ||="" "h-96"="" }="" group="" rounded="" relative="" overflow-hidden="" border="" shadow`}="">
        <img class="h-full rounded absolute object-cover group-hover:scale-105" src={props.img}>
        <p class="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

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 px-4">
        <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;

/components/Header.jsx

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 class="shadow bg-white">
      <div class="mx-auto max-w-7xl px-4 flex justify-between">
        <div class="flex items-center gap-4">
          <navlink to="/">
            <img class="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} class="{({" 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 class="flex items-center">
          <i class="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

import { Outlet } from "react-router-dom";
import Header from "./Header";
import Footer from "./Footer";

function Layout() {
  return (
    <>
      <header>
      <div class="mx-auto max-w-7xl px-4">
        <outlet>
      </outlet></div>
      <footer>

  );
}

export default Layout;</footer></header>

/components/ProductBox.jsx

import React from "react";
import { NavLink } from "react-router-dom";

const ProductBox = (props) => {
  return (
    <navlink to={props.href}>
      <div class="group rounded relative shadow p-2 bg-white" title={props.title}>
        <img class="{`${" props.imgheight="" ||="" "h-48"="" }="" w-full="" rounded="" object-contain="" p-4="" group-hover:scale-105`}="" src={props.image}>
        <p class="text-sm text-gray-500 mt-4 line-clamp-1">{props.title}</p>
        <p class="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

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 class="relative h-[500px]">
        <img src={BannerImg} class="absolute top-0 left-0 h-[500px] w-full object-cover">
        <div class="backdrop-blur-sm bg-white/40 h-full flex flex-col items-center justify-center text-center text-gray-800">
          <h1 class="text-5xl font-bold">New arrivals are here</h1>
          <p class="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 class="btn mt-4">Shop New Arrivals</button>
        </div>
      </div>
      <div class="my-16">
        <h2 class="text-xl font-bold uppercase">Shop by Category</h2>
        <div class="grid grid-cols-4 gap-8 mt-4">
          {categories.map((cat, index) => {
            return <categorybox key={index} {...cat}="">;
          })}
        </categorybox></div>
      </div>
      <div class="my-16">
        <h2 class="text-xl font-bold uppercase">Trending Products</h2>
        <div class="grid grid-cols-6 gap-4 mt-4">
          {topRatedProducts.map((product, index) => {
            return <productbox key={index} {...product}="">;
          })}
        </productbox></div>
      </div>
    </div>
  );
}

export default Home;

index.css

@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

/** @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!

Demo & Source Code

GitHub Repository