React Laravel 12 Ecommerce App | Home & Shop Page UI Design (Part 2)

Welcome to Part 2 of the React Laravel 12 Ecommerce App Tutorial Series 🛒🚀

In this video, we’ll design the Home Page and Shop Page UI for our Ecommerce application using React JS frontend. This is the first step in building a user-friendly Ecommerce store, where users will be able to browse products easily.

🔥 What you’ll learn in this video:

✅ Design a modern Home page for Ecommerce App
✅ Create a Shop page layout with product grid
✅ Build responsive UI using React components
✅ Setup structure for showing dynamic product data later
✅ Prepare frontend for API integration with Laravel backend

Watch the video:

👉 Google Font:

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,
opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

👉 Global Variables:

$primary-font: "DM Sans", sans-serif;
$primary-white: #FFF;
$primary-color: #43c3D1;
$primary-black: #061123;
$secondary-color:#0284FF;
$tertiary-color:#2F4858;

👉 CSS:

body{
    font-family: $primary-font;
    font-size: 1em;
    color: $primary-black;
    font-weight: 500;
}

h1{
    font-size: 2.5em;
}

h2{
    font-size: 2em;
}

h3{
    font-size: 1.3em;
}

h4{
    font-size: 1em;
}

a{
    text-decoration: none;
    color: $primary-black;
    &::hover{
        color: $primary-color;
    }
}

.primary-text{
    color: $primary-color ;
}

.secondary-text{
    color: $secondary-color ;
}


ul{
    padding-left: 0;
    li{
        list-style: none;
    }
}

.container{
    max-width: 1540px;
}

.btn{
    &.btn-size{
        background-color: rgba($primary-black, 0.03);
        border-color: rgba($primary-black, 0.05);
        padding: 7px 15px;
        &.active{
            border-color:  rgba($primary-black, 0.20);;
        }
        &:hover{
            border-color:  rgba($primary-black, 0.20);;
            color: $primary-black;
        }
    }
    &.btn-primary{
        background-color: $primary-color;
        border-color: $primary-color;
        padding: 7px 25px;
        &:hover{
            background-color: $primary-black;
            border-color: $primary-black;
            color: $primary-white;
        }
    }

    &.btn-secondary{
        background-color: $primary-black;
        border-color: $primary-black;
        color: $primary-white;
        padding: 7px 25px;
        &:hover{
            background-color: $primary-color;
            border-color: $primary-color;
            color: $primary-white;
        }
    }
}

header{
   

    .navbar-expand-lg{
        .navbar-nav{
            .nav-link{
                padding: 10px 15px;
                font-size: 1.2em;
                font-weight: 500;
                color: $primary-black
            }
        }
    }
}

footer{
    background-color: $tertiary-color;
    h2{
        font-size: 1.5em;
    }
    ul{
        li{
            margin-bottom: 10px;
            a{
                font-size: 1.2em;
                color: $primary-white;
            }
        }
    }

    .spotlight{
        border-top: 1px solid rgba($primary-white, 0.10);
        border-bottom: 1px solid rgba($primary-white, 0.10);
    }
}

.section-1{
    .swiper{
        .swiper-wrapper{
            .swiper-slide{
                height: 650px;
                .content{
                    width: 100%;
                    height: 100%;
                    background-repeat: no-repeat;
                    background-size: cover;
                }
            }
        }
    }
}

.product{
    
    .card-img{
        overflow: hidden;
        border-radius: 10px;
        img{
            border-radius: 10px;
            transition: all 0.3s ease-out;
        }
    }
    &:hover{
        img{
            scale: 1.2;
        }
    }

    .card-body{
        padding: 0;
        a{
            font-size: 1.2em;
            &:hover{
                color: $primary-color;
            }
        }
        .price{
            font-size: 1.2em;
            padding-bottom: 20px;
            span{
                color: rgba($primary-black,0.5);
            }
        }
    }
}


@media (min-width: 200px) and (max-width: 768px){
    .section-1{
        .swiper{
            .swiper-wrapper{
                .swiper-slide{
                    height: 400px;
                }
            }
        }
    }

}

👉 Swiper Slider Main:

<Swiper
            spaceBetween={0}
            slidesPerView={1}          
            breakpoints={{
                1024: {
                    slidesPerView: 1,
                    spaceBetween: 0,
                }
                }}
            >               
                <SwiperSlide>
                    <div className="content" style={{ backgroundImage: `url(${SLiderOneImg})` }}>                        
                    </div>                   
                </SwiperSlide>
                <SwiperSlide>
                    <div className="content" style={{ backgroundImage: `url(${SLiderTwoImg})` }}>                        
                    </div>
                </SwiperSlide>                
            </Swiper>

👉 Account ICON SVG:

👉 Cart ICON SVG:

👉 Footer Icon 1:

👉 Footer Icon 2:

👉 Footer Icon 3:

🔔 Stay Connected
👉 Subscribe to my YouTube Channel for more tutorials.
👉 Follow the full playlist here: React Laravel 12 Ecommerce App
👉 Leave a comment if you face any issue — I’ll help you out 🙂

ExperTech

Search This Blog

React Laravel 12 Ecommerce App | Product, Cart & Checkout Page UI Design (Part 3)