Index

import React, { Fragment } from 'react';

import Header from './Header';
import Menu from './Menu';
import Footer from './Footer';
function Index() {
const addToCart = (product) => {
const storedCart = JSON.parse(localStorage.getItem('cart')) || [];
const updatedCart = [...storedCart, { ...product, quantity: 1 }];
console.log("Sản phẩm thêm vào giỏ:", updatedCart); // Log dữ liệu giỏ hàng
localStorage.setItem('cart', JSON.stringify(updatedCart));
alert("Sản phẩm đã được thêm vào giỏ hàng!");
};
return (
<Fragment>
<Header />
<Menu />
<div id="header-carousel" className="carousel slide" data-ride="carousel">
<div className="carousel-inner">
<div className="carousel-item active" style={{ height: "410px" }}>
<img className="assets/img-fluid" src="assets/img/carousel-1.jpg" alt="Image" />
<div className="carousel-caption d-flex flex-column align-items-center justify-
content-center">
<div className="p-3" style={{ maxWidth: "700px" }}>
<h4 className="text-light text-uppercase font-weight-medium mb-3">10% Off
Your First Order</h4>
<h3 className="display-4 text-white font-weight-semi-bold mb-4">Fashionable
Dress</h3>
<a href="/" className="btn btn-light py-2 px-3">Shop Now</a>
</div>
</div>
</div>
<div className="carousel-item" style={{ height: "410px" }}>
<img className="assets/img-fluid" src="assets/img/carousel-2.jpg" alt="Image" />
<div className="carousel-caption d-flex flex-column align-items-center justify-
content-center">
<div className="p-3" style={{ maxWidth: "700px" }}>
<h4 className="text-light text-uppercase font-weight-medium mb-3">10% Off
Your First Order</h4>
<h3 className="display-4 text-white font-weight-semi-bold mb-4">Reasonable
Price</h3>
<a href="/" className="btn btn-light py-2 px-3">Shop Now</a>
</div>
</div>
</div>
</div>
<a className="carousel-control-prev" href="#header-carousel" data-
slide="prev">
<div className="btn btn-dark" style={{ width: "45px", height: "45px" }}>
<span className="carousel-control-prev-icon mb-n2"></span>
</div>
</a>
<a className="carousel-control-next" href="#header-carousel" data-
slide="next">
<div className="btn btn-dark" style={{ width: "45px", height: "45px" }}>
<span className="carousel-control-next-icon mb-n2"></span>
</div>
</a>
</div> <div className="container-fluid pt-5">
<div className="text-center mb-4">
<h2 className="section-title px-5"><span className="px-2">Trandy
Products</span></h2>
</div>
<div className="col-lg-3 col-md-6 col-sm-12 pb-1">
<div className="card product-item border-0 mb-4">
<div className="card-header product-img position-relative overflow-hidden bg-
transparent border p-0">
<img className="assets/img-fluid w-100" src="assets/img/product-1.jpg" alt="" />
</div>
<div className="card-body border-left border-right text-center p-0 pt-4 pb-3">
<h6 className="text-truncate mb-3">Colorful Stylish Shirt</h6>
<div className="d-flex justify-content-center">
<h6>$123.00</h6><h6 className="text-muted
ml-2"><del>$123.00</del></h6>
</div>
</div>
<div className="card-footer d-flex justify-content-between bg-light border">
<a href="#" className="btn btn-sm text-dark p-0" onClick={() =>
addToCart({ name: "Colorful Stylish Shirt", price: 123.00, img: "assets/img/product-
1.jpg" })}>
<i className="fas fa-shopping-cart text-primary mr-1"></i>Thêm vào giỏ hàng
</a>
</div>
</div> <Footer />
</Fragment>
)
}
export default Index;
cart
import React, { useState } from "react";
import { Fragment } from "react";
import Header from "./Header";
import Footer from "./Footer";
function Car() {
// Dữ liệu giỏ hàng ban đầu
const initialItems = [
{ id: 1, name: "Colorful Stylish Shirt", price: 150, quantity: 1, image:
"./assets/img/product-1.jpg" },
{ id: 2, name: "Colorful Stylish Shirt", price: 150, quantity: 1, image:
"./assets/img/product-2.jpg" },
{ id: 3, name: "Colorful Stylish Shirt", price: 150, quantity: 1, image:
"./assets/img/product-3.jpg" },
{ id: 4, name: "Colorful Stylish Shirt", price: 150, quantity: 1, image:
"./assets/img/product-4.jpg" },
{ id: 5, name: "Colorful Stylish Shirt", price: 150, quantity: 1, image:
"./assets/img/product-5.jpg" }
];

const [items, setItems] = useState(initialItems);

const [coupon, setCoupon] = useState("");
const [shipping] = useState(10);

// Cập nhật số lượng sản phẩm

const updateQuantity = (id, delta) => {
setItems(items.map(item =>
item.id === id
? { ...item, quantity: Math.max(item.quantity + delta, 1) } // Không cho số
lượng nhỏ hơn 1
: item
));
};

// Xóa sản phẩm

const removeItem = (id) => {
setItems(items.filter(item => item.id !== id));
};

// Tính tổng giỏ hàng

const getSubtotal = () => {
return items.reduce((total, item) => total + item.price * item.quantity, 0);
};

const getTotal = () => {

return getSubtotal() + shipping;
};

return (
<Fragment>
<Header />
<div className="container-fluid pt-5">
<div className="row px-xl-5">
<div className="col-lg-8 table-responsive mb-5">
<table className="table table-bordered text-center mb-0">
<thead className="bg-secondary text-dark">
<tr>
<th>Products</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
<th>Remove</th>
</tr>
</thead>
<tbody className="align-middle">
{items.map((item) => (
<tr key={item.id}>
 <td className="align-middle">
<img src={item.image} alt="" style={{ width:
"50px" }} /> {item.name}
</td>
<td className="align-middle">${item.price}</td>
<td className="align-middle">
<div className="input-group quantity mx-auto"
style={{ width: "100px" }}>
<div className="input-group-btn">
<button
className="btn btn-sm btn-primary btn-minus"
onClick={() => updateQuantity(item.id, -1)}
>
<i className="fa fa-minus"></i>
</button>
</div>
<input
type="text"
className="form-control form-control-sm bg-
secondary text-center"
value={item.quantity}
readOnly
/>
<div className="input-group-btn">
<button
className="btn btn-sm btn-primary btn-plus"
onClick={() => updateQuantity(item.id, 1)}
>
<i className="fa fa-plus"></i>
</button>
</div>
 </div>
</td>
<td className="align-middle">${(item.price *
item.quantity).toFixed(2)}</td>
<td className="align-middle">
<button className="btn btn-sm btn-primary"
onClick={() => removeItem(item.id)}>
<i className="fa fa-times"></i>
</button>
</td>
</tr>
))}
</tbody>
</table>
</div>

<div className="col-lg-4">
<form className="mb-5" onSubmit={(e) => e.preventDefault()}>
<div className="input-group">
<input
type="text"
className="form-control p-4"
placeholder="Coupon Code"
value={coupon}
onChange={(e) => setCoupon(e.target.value)}
/>
<div className="input-group-append">
<button className="btn btn-primary">Apply
Coupon</button>
</div>
</div>
 </form>

<div className="card border-secondary mb-5">

<div className="card-header bg-secondary border-0">
<h4 className="font-weight-semi-bold m-0">Cart
Summary</h4>
</div>
<div className="card-body">
<div className="d-flex justify-content-between mb-3 pt-1">
<h6 className="font-weight-medium">Subtotal</h6>
<h6 className="font-weight-medium">$
{getSubtotal().toFixed(2)}</h6>
</div>
<div className="d-flex justify-content-between">
<h6 className="font-weight-medium">Shipping</h6>
<h6 className="font-weight-medium">${shipping}</h6>
</div>
</div>
<div className="card-footer border-secondary bg-transparent">
<div className="d-flex justify-content-between mt-2">
<h5 className="font-weight-bold">Total</h5>
<h5 className="font-weight-bold">$
{getTotal().toFixed(2)}</h5>
</div>
<button className="btn btn-block btn-primary my-3 py-
3">Proceed To Checkout</button>
</div>
</div>
</div>
</div>
</div>
 <Footer />
</Fragment>
);
}

export default Car;

import React, { Fragment } from 'react';

import Header from './Header';
import Menu from './Menu';
import Footer from './Footer';

function Index() {
const addToCart = (product) => {
const storedCart = JSON.parse(localStorage.getItem('cart')) || [];

// Kiểm tra xem sản phẩm đã có trong giỏ chưa

const existingProduct = storedCart.find(item => item.name ===
product.name);

if (existingProduct) {
// Nếu sản phẩm đã có trong giỏ, tăng số lượng lên
existingProduct.quantity += 1;
} else {
// Nếu sản phẩm chưa có, thêm mới vào giỏ
storedCart.push({ ...product, quantity: 1 });
}

// Lưu giỏ hàng mới vào localStorage

localStorage.setItem('cart', JSON.stringify(storedCart));
 console.log("Giỏ hàng cập nhật:", storedCart);
alert("Sản phẩm đã được thêm vào giỏ hàng!");
};

return (

<Fragment>
<Header />
<Menu />

<div id="header-carousel" className="carousel slide" data-

ride="carousel">
<div className="carousel-inner">
<div className="carousel-item active" style={{ height: "410px" }}>
<img className="assets/img-fluid" src="assets/img/carousel-1.jpg"
alt="Image" />
<div className="carousel-caption d-flex flex-column align-items-
center justify-content-center">
<div className="p-3" style={{ maxWidth: "700px" }}>
<h4 className="text-light text-uppercase font-weight-medium
mb-3">10% Off Your First Order</h4>
<h3 className="display-4 text-white font-weight-semi-bold
mb-4">Fashionable Dress</h3>
<a href="/" className="btn btn-light py-2 px-3">Shop
Now</a>
</div>
</div>
</div>
<div className="carousel-item" style={{ height: "410px" }}>
<img className="assets/img-fluid" src="assets/img/carousel-2.jpg"
alt="Image" />
 <div className="carousel-caption d-flex flex-column align-items-
center justify-content-center">
<div className="p-3" style={{ maxWidth: "700px" }}>
<h4 className="text-light text-uppercase font-weight-medium
mb-3">10% Off Your First Order</h4>
<h3 className="display-4 text-white font-weight-semi-bold
mb-4">Reasonable Price</h3>
<a href="/" className="btn btn-light py-2 px-3">Shop
Now</a>
</div>
</div>
</div>
</div>
<a className="carousel-control-prev" href="#header-carousel" data-
slide="prev">
<div className="btn btn-dark" style={{ width: "45px", height: "45px"
}}>
<span className="carousel-control-prev-icon mb-n2"></span>
</div>
</a>
<a className="carousel-control-next" href="#header-carousel" data-
slide="next">
<div className="btn btn-dark" style={{ width: "45px", height: "45px"
}}>
<span className="carousel-control-next-icon mb-n2"></span>
</div>
</a>
</div>

{/* <div className="container-fluid pt-5">

<div className="row px-xl-5 pb-3">
 <div className="col-lg-3 col-md-6 col-sm-12 pb-1">
<div className="d-flex align-items-center border mb-4"
style={{ padding: '30px' }}>
<h1 className="fa fa-check text-primary m-0 mr-3"></h1>
<h5 className="font-weight-semi-bold m-0">Quality
Product</h5>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-12 pb-1">
<div className="d-flex align-items-center border mb-4"
style={{ padding: '30px' }}>
<h1 className="fa fa-shipping-fast text-primary m-0
mr-2"></h1>
<h5 className="font-weight-semi-bold m-0">Free
Shipping</h5>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-12 pb-1">
<div className="d-flex align-items-center border mb-4"
style={{ padding: '30px' }}>
<h1 className="fas fa-exchange-alt text-primary m-0
mr-3"></h1>
<h5 className="font-weight-semi-bold m-0">14-Day
Return</h5>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-12 pb-1">
<div className="d-flex align-items-center border mb-4"
style={{ padding: '30px' }}>
<h1 className="fa fa-phone-volume text-primary m-0
mr-3"></h1>
<h5 className="font-weight-semi-bold m-0">24/7 Support</h5>
</div>
 </div>
</div>
</div> */}

{ /*<div className="container-fluid pt-5">

<div className="row px-xl-5 pb-3">
<div className="col-lg-4 col-md-6 pb-1">
<div className="cat-item d-flex flex-column border mb-4" style={{
padding: "30px" }}>
<p className="text-right">15 Products</p>
<a href="" className="cat-img position-relative overflow-hidden
mb-3">
<img className="assets/img-fluid" src="assets/img/cat-1.jpg"
alt="" />
</a>
<h5 className="font-weight-semi-bold m-0">Men's
dresses</h5>
</div>
</div>
<div className="col-lg-4 col-md-6 pb-1">
<div className="cat-item d-flex flex-column border mb-4" style={{
padding: "30px" }}>
<p className="text-right">15 Products</p>
<a href="" className="cat-img position-relative overflow-hidden
mb-3">
<img className="assets/img-fluid" src="assets/img/cat-2.jpg"
alt="" />
</a>
<h5 className="font-weight-semi-bold m-0">Women's
dresses</h5>
</div>
</div>
<div className="col-lg-4 col-md-6 pb-1">
 <div className="cat-item d-flex flex-column border mb-4" style={{
padding: "30px" }}>
<p className="text-right">15 Products</p>
<a href="" className="cat-img position-relative overflow-hidden
mb-3">
<img className="assets/img-fluid" src="assets/img/cat-3.jpg"
alt="" />
</a>
<h5 className="font-weight-semi-bold m-0">Baby's
dresses</h5>
</div>
</div>
<div className="col-lg-4 col-md-6 pb-1">
<div className="cat-item d-flex flex-column border mb-4" style={{
padding: "30px" }}>
<p className="text-right">15 Products</p>
<a href="" className="cat-img position-relative overflow-hidden
mb-3">
<img className="assets/img-fluid" src="assets/img/cat-4.jpg"
alt="" />
</a>
<h5 className="font-weight-semi-bold m-0">Accerssories</h5>
</div>
</div>
<div className="col-lg-4 col-md-6 pb-1">
<div className="cat-item d-flex flex-column border mb-4" style={{
padding: "30px" }}>
<p className="text-right">15 Products</p>
<a href="" className="cat-img position-relative overflow-hidden
mb-3">
<img className="assets/img-fluid" src="assets/img/cat-5.jpg"
alt="" />
</a>
 <h5 className="font-weight-semi-bold m-0">Bags</h5>
</div>
</div>
<div className="col-lg-4 col-md-6 pb-1">
<div className="cat-item d-flex flex-column border mb-4" style={{
padding: "30px" }}>
<p className="text-right">15 Products</p>
<a href="" className="cat-img position-relative overflow-hidden
mb-3">
<img className="assets/img-fluid" src="assets/img/cat-6.jpg"
alt="" />
</a>
<h5 className="font-weight-semi-bold m-0">Shoes</h5>
</div>
</div>
</div>
</div>*/}

{/* <div className="container-fluid offer pt-5">

<div className="row px-xl-5">
{['Spring Collection', 'Winter Collection'].map((collection, index) => (
<div className="col-md-6 pb-4" key={index}>
<div className="position-relative bg-secondary text-center text-
md-left text-white mb-2 py-5 px-5">
<img src={`assets/img/offer-${index + 1}.png`} alt={`$
{collection} offer`} className="assets/img-fluid" />
<div className="position-relative" style={{ zIndex: 1 }}>
<h5 className="text-uppercase text-primary mb-3">20%
off the all order</h5>
<h1 className="mb-4 font-weight-semi-
bold">{collection}</h1>
<a href="#" className="btn btn-outline-primary py-md-2
px-md-3">Shop Now</a>
 </div>
</div>
</div>
))}
</div>
</div> */}

<div className="container-fluid pt-5">

<div className="text-center mb-4">
<h2 className="section-title px-5"><span className="px-2">Trendy
Products</span></h2>
</div>
<div className="row">
<div className="col-lg-3 col-md-6 col-sm-12 pb-1">
<div className="card product-item border-0 mb-4">
<div className="card-header product-img position-relative
overflow-hidden bg-transparent border p-0">
<img className="/img/img-fluid w-100" src="/img/product-
1.jpg" alt="" />
</div>
<div className="card-body border-left border-right text-center p-
0 pt-4 pb-3">
<h6 className="text-truncate mb-3">Colorful Stylish
Shirt</h6>
<div className="d-flex justify-content-center">
<h6>$123.00</h6>
<h6 className="text-muted
ml-2"><del>$123.00</del></h6>

</div>
</div>
 <div className="card-footer d-flex justify-content-between bg-
light border">
<a href="#"
className="btn btn-sm text-dark p-0"
onClick={() => addToCart({
id: 1,
name: "Colorful Stylish Shirt",
price: 123.00,
img: "/img/product-1.jpg" ,
style: {width: "50px"}
})}>
<i className="fas fa-shopping-cart text-primary mr-1"></i>
Add to cart
</a>

{/* Nút "View Detail" */}

<a href="ShopDetail" className="btn btn-sm text-dark p-0">
<i className="fas fa-eye text-primary mr-1"></i> View
Detail
</a>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-12 pb-1">
<div className="card product-item border-0 mb-4">
<div className="card-header product-img position-relative
overflow-hidden bg-transparent border p-0">
<img className="assets/img-fluid w-100"
src="assets/img/product-2.jpg" alt="" />
</div>
<div className="card-body border-left border-right text-center p-
0 pt-4 pb-3">
 <h6 className="text-truncate mb-3">Colorful Stylish Shirt-
2</h6>
<div className="d-flex justify-content-center">
<h6>$123.00</h6><h6 className="text-muted ml-
2"><del>$123.00</del></h6>
</div>
</div>
<div className="card-footer d-flex justify-content-between bg-
light border">
<a href="#"
className="btn btn-sm text-dark p-0"
onClick={() => addToCart({
id: 2,
name: "Colorful Stylish Shirt-2",
price: 123.00,
img: "assets/img/product-2.jpg"
})}>
<i className="fas fa-shopping-cart text-primary mr-1"></i>
Add to cart
</a>

{/* Nút "View Detail" */}

<a href="ShopDetail" className="btn btn-sm text-dark p-0">
<i className="fas fa-eye text-primary mr-1"></i> View
Detail
</a>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-12 pb-1">
<div className="card product-item border-0 mb-4">
 <div className="card-header product-img position-relative
overflow-hidden bg-transparent border p-0">
<img className="assets/img-fluid w-100"
src="assets/img/product-3.jpg" alt="" />
</div>
<div className="card-body border-left border-right text-center p-
0 pt-4 pb-3">
<h6 className="text-truncate mb-3">Colorful Stylish Shirt-
3</h6>
<div className="d-flex justify-content-center">
<h6>$123.00</h6><h6 className="text-muted ml-
2"><del>$123.00</del></h6>
</div>
</div>
<div className="card-footer d-flex justify-content-between bg-
light border">
<a href="#"
className="btn btn-sm text-dark p-0"
onClick={() => addToCart({
id: 3,
name: "Colorful Stylish Shirt-3",
price: 123.00,
img: "assets/img/product-1.jpg"
})}>
<i className="fas fa-shopping-cart text-primary mr-1"></i>
Add to cart
</a>

{/* Nút "View Detail" */}

<a href="ShopDetail" className="btn btn-sm text-dark p-0">
<i className="fas fa-eye text-primary mr-1"></i> View
Detail
</a>
 </div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-12 pb-1">
<div className="card product-item border-0 mb-4">
<div className="card-header product-img position-relative
overflow-hidden bg-transparent border p-0">
<img className="assets/img-fluid w-100"
src="assets/img/product-4.jpg" alt="" />
</div>
<div className="card-body border-left border-right text-center p-
0 pt-4 pb-3">
<h6 className="text-truncate mb-3">Colorful Stylish Shirt-
4</h6>
<div className="d-flex justify-content-center">
<h6>$123.00</h6><h6 className="text-muted ml-
2"><del>$123.00</del></h6>
</div>
</div>
<div className="card-footer d-flex justify-content-between bg-
light border">
<a href="#"
className="btn btn-sm text-dark p-0"
onClick={() => addToCart({
id: 4,
name: "Colorful Stylish Shirt-4",
price: 123.00,
img: "assets/img/product-1.jpg"
})}>
<i className="fas fa-shopping-cart text-primary mr-1"></i>
Add to cart
</a>
 {/* Nút "View Detail" */}
<a href="ShopDetail" className="btn btn-sm text-dark p-0">
<i className="fas fa-eye text-primary mr-1"></i> View
Detail
</a>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-12 pb-1">
<div className="card product-item border-0 mb-4">
<div className="card-header product-img position-relative
overflow-hidden bg-transparent border p-0">
<img className="assets/img-fluid w-100"
src="assets/img/product-5.jpg" alt="" />
</div>
<div className="card-body border-left border-right text-center p-
0 pt-4 pb-3">
<h6 className="text-truncate mb-3">Colorful Stylish Shirt-
5</h6>
<div className="d-flex justify-content-center">
<h6>$123.00</h6><h6 className="text-muted ml-
2"><del>$123.00</del></h6>
</div>
</div>
<div className="card-footer d-flex justify-content-between bg-
light border">
<a href="#"
className="btn btn-sm text-dark p-0"
onClick={() => addToCart({
id: 5,
name: "Colorful Stylish Shirt-5",
 price: 123.00,
img: "assets/img/product-1.jpg"
})}>
<i className="fas fa-shopping-cart text-primary mr-1"></i>
Add to cart
</a>

{/* Nút "View Detail" */}

<a href="ShopDetail" className="btn btn-sm text-dark p-0">
<i className="fas fa-eye text-primary mr-1"></i> View
Detail
</a>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-12 pb-1">
<div className="card product-item border-0 mb-4">
<div className="card-header product-img position-relative
overflow-hidden bg-transparent border p-0">
<img className="assets/img-fluid w-100"
src="assets/img/product-6.jpg" alt="" />
</div>
<div className="card-body border-left border-right text-center p-
0 pt-4 pb-3">
<h6 className="text-truncate mb-3">Colorful Stylish Shirt-
6</h6>
<div className="d-flex justify-content-center">
<h6>$123.00</h6><h6 className="text-muted ml-
2"><del>$123.00</del></h6>
</div>
</div>
<div className="card-footer d-flex justify-content-between bg-
light border">
 <a href="#"
className="btn btn-sm text-dark p-0"
onClick={() => addToCart({
id: 6,
name: "Colorful Stylish Shirt-5",
price: 123.00,
img: "assets/img/product-1.jpg"
})}>
<i className="fas fa-shopping-cart text-primary mr-1"></i>
Add to cart
</a>

{/* Nút "View Detail" */}

<a href="ShopDetail" className="btn btn-sm text-dark p-0">
<i className="fas fa-eye text-primary mr-1"></i> View
Detail
</a>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-12 pb-1">
<div className="card product-item border-0 mb-4">
<div className="card-header product-img position-relative
overflow-hidden bg-transparent border p-0">
<img className="assets/img-fluid w-100"
src="assets/img/product-7.jpg" alt="" />
</div>
<div className="card-body border-left border-right text-center p-
0 pt-4 pb-3">
<h6 className="text-truncate mb-3">Colorful Stylish Shirt-
7</h6>
<div className="d-flex justify-content-center">
 <h6>$123.00</h6><h6 className="text-muted ml-
2"><del>$123.00</del></h6>
</div>
</div>
<div className="card-footer d-flex justify-content-between bg-
light border">
<a href="#"
className="btn btn-sm text-dark p-0"
onClick={() => addToCart({
id: 7,
name: "Colorful Stylish Shirt-6",
price: 123.00,
img: "assets/img/product-1.jpg"
})}>
<i className="fas fa-shopping-cart text-primary mr-1"></i>
Add to cart
</a>

{/* Nút "View Detail" */}

<a href="ShopDetail" className="btn btn-sm text-dark p-0">
<i className="fas fa-eye text-primary mr-1"></i> View
Detail
</a>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-12 pb-1">
<div className="card product-item border-0 mb-4">
<div className="card-header product-img position-relative
overflow-hidden bg-transparent border p-0">
<img className="assets/img-fluid w-100"
src="assets/img/product-8.jpg" alt="" />
 </div>
<div className="card-body border-left border-right text-center p-
0 pt-4 pb-3">
<h6 className="text-truncate mb-3">Colorful Stylish Shirt-
8</h6>
<div className="d-flex justify-content-center">
<h6>$123.00</h6><h6 className="text-muted ml-
2"><del>$123.00</del></h6>
</div>
</div>
<div className="card-footer d-flex justify-content-between bg-
light border">
<a href="#"
className="btn btn-sm text-dark p-0"
onClick={() => addToCart({
id: 8,
name: "Colorful Stylish Shirt-7",
price: 123.00,
img: "assets/img/product-1.jpg"
})}>
<i className="fas fa-shopping-cart text-primary mr-1"></i>
Add to cart
</a>

{/* Nút "View Detail" */}

<a href="ShopDetail" className="btn btn-sm text-dark p-0">
<i className="fas fa-eye text-primary mr-1"></i> View
Detail
</a>
</div>
</div>
</div>
 </div>
</div>

{/* <div className="container-fluid bg-secondary my-5">

<div className="row justify-content-md-center py-5 px-xl-5">
<div className="col-md-6 col-12 py-5">
<div className="text-center mb-2 pb-2">
<h2 className="section-title px-5 mb-3"><span
className="bg-secondary px-2">Stay Updated</span></h2>
<p>Amet lorem at rebum amet dolores. Elitr lorem dolor sed amet
diam labore at justo ipsum eirmod duo labore labore.</p>
</div>
<form action="">
<div className="input-group">
<input type="text" className="form-control border-white p-4"
placeholder="Email Goes Here" />
<div className="input-group-append">
<button className="btn btn-primary
px-4">Subscribe</button>
</div>
</div>
</form>
</div>
</div>
</div> */}

{/* <div className="container-fluid pt-5">

<div className="text-center mb-4">
<h2 className="section-title px-5"><span className="px-2">Just
Arrived</span></h2>
</div>
 <div className="row px-xl-5 pb-3">
<div className="col-lg-3 col-md-6 col-sm-12 pb-1">
<div className="card product-item border-0 mb-4">
<div className="card-header product-img position-relative
overflow-hidden bg-transparent border p-0">
<img className="assets/img-fluid w-100"
src="assets/img/product-1.jpg" alt="" />
</div>
<div className="card-body border-left border-right text-center p-
0 pt-4 pb-3">
<h6 className="text-truncate mb-3">Colorful Stylish
Shirt</h6>
<div className="d-flex justify-content-center">
<h6>$123.00</h6><h6 className="text-muted ml-
2"><del>$123.00</del></h6>
</div>
</div>
<div className="card-footer d-flex justify-content-between bg-
light border">
<a href="" className="btn btn-sm text-dark p-0"><i
className="fas fa-eye text-primary mr-1"></i>View Detail</a>
<a href="" className="btn btn-sm text-dark p-0"><i
className="fas fa-shopping-cart text-primary mr-1"></i>Add To Cart</a>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-12 pb-1">
<div className="card product-item border-0 mb-4">
<div className="card-header product-img position-relative
overflow-hidden bg-transparent border p-0">
<img className="assets/img-fluid w-100"
src="assets/img/product-2.jpg" alt="" />
</div>
 <div className="card-body border-left border-right text-center p-
0 pt-4 pb-3">
<h6 className="text-truncate mb-3">Colorful Stylish
Shirt</h6>
<div className="d-flex justify-content-center">
<h6>$123.00</h6><h6 className="text-muted ml-
2"><del>$123.00</del></h6>
</div>
</div>
<div className="card-footer d-flex justify-content-between bg-
light border">
<a href="" className="btn btn-sm text-dark p-0"><i
className="fas fa-eye text-primary mr-1"></i>View Detail</a>
<a href="" className="btn btn-sm text-dark p-0"><i
className="fas fa-shopping-cart text-primary mr-1"></i>Add To Cart</a>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-12 pb-1">
<div className="card product-item border-0 mb-4">
<div className="card-header product-img position-relative
overflow-hidden bg-transparent border p-0">
<img className="assets/img-fluid w-100"
src="assets/img/product-3.jpg" alt="" />
</div>
<div className="card-body border-left border-right text-center p-
0 pt-4 pb-3">
<h6 className="text-truncate mb-3">Colorful Stylish
Shirt</h6>
<div className="d-flex justify-content-center">
<h6>$123.00</h6><h6 className="text-muted ml-
2"><del>$123.00</del></h6>
</div>
</div>
 <div className="card-footer d-flex justify-content-between bg-
light border">
<a href="" className="btn btn-sm text-dark p-0"><i
className="fas fa-eye text-primary mr-1"></i>View Detail</a>
<a href="" className="btn btn-sm text-dark p-0"><i
className="fas fa-shopping-cart text-primary mr-1"></i>Add To Cart</a>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-12 pb-1">
<div className="card product-item border-0 mb-4">
<div className="card-header product-img position-relative
overflow-hidden bg-transparent border p-0">
<img className="assets/img-fluid w-100"
src="assets/img/product-4.jpg" alt="" />
</div>
<div className="card-body border-left border-right text-center p-
0 pt-4 pb-3">
<h6 className="text-truncate mb-3">Colorful Stylish
Shirt</h6>
<div className="d-flex justify-content-center">
<h6>$123.00</h6><h6 className="text-muted ml-
2"><del>$123.00</del></h6>
</div>
</div>
<div className="card-footer d-flex justify-content-between bg-
light border">
<a href="" className="btn btn-sm text-dark p-0"><i
className="fas fa-eye text-primary mr-1"></i>View Detail</a>
<a href="" className="btn btn-sm text-dark p-0"><i
className="fas fa-shopping-cart text-primary mr-1"></i>Add To Cart</a>
</div>
</div>
</div>
 <div className="col-lg-3 col-md-6 col-sm-12 pb-1">
<div className="card product-item border-0 mb-4">
<div className="card-header product-img position-relative
overflow-hidden bg-transparent border p-0">
<img className="assets/img-fluid w-100"
src="assets/img/product-5.jpg" alt="" />
</div>
<div className="card-body border-left border-right text-center p-
0 pt-4 pb-3">
<h6 className="text-truncate mb-3">Colorful Stylish
Shirt</h6>
<div className="d-flex justify-content-center">
<h6>$123.00</h6><h6 className="text-muted ml-
2"><del>$123.00</del></h6>
</div>
</div>
<div className="card-footer d-flex justify-content-between bg-
light border">
<a href="" className="btn btn-sm text-dark p-0"><i
className="fas fa-eye text-primary mr-1"></i>View Detail</a>
<a href="" className="btn btn-sm text-dark p-0"><i
className="fas fa-shopping-cart text-primary mr-1"></i>Add To Cart</a>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-12 pb-1">
<div className="card product-item border-0 mb-4">
<div className="card-header product-img position-relative
overflow-hidden bg-transparent border p-0">
<img className="assets/img-fluid w-100"
src="assets/img/product-6.jpg" alt="" />
</div>
<div className="card-body border-left border-right text-center p-
0 pt-4 pb-3">
 <h6 className="text-truncate mb-3">Colorful Stylish
Shirt</h6>
<div className="d-flex justify-content-center">
<h6>$123.00</h6><h6 className="text-muted ml-
2"><del>$123.00</del></h6>
</div>
</div>
<div className="card-footer d-flex justify-content-between bg-
light border">
<a href="" className="btn btn-sm text-dark p-0"><i
className="fas fa-eye text-primary mr-1"></i>View Detail</a>
<a href="" className="btn btn-sm text-dark p-0"><i
className="fas fa-shopping-cart text-primary mr-1"></i>Add To Cart</a>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-12 pb-1">
<div className="card product-item border-0 mb-4">
<div className="card-header product-img position-relative
overflow-hidden bg-transparent border p-0">
<img className="assets/img-fluid w-100"
src="assets/img/product-7.jpg" alt="" />
</div>
<div className="card-body border-left border-right text-center p-
0 pt-4 pb-3">
<h6 className="text-truncate mb-3">Colorful Stylish
Shirt</h6>
<div className="d-flex justify-content-center">
<h6>$123.00</h6><h6 className="text-muted ml-
2"><del>$123.00</del></h6>
</div>
</div>
<div className="card-footer d-flex justify-content-between bg-
light border">
 <a href="" className="btn btn-sm text-dark p-0"><i
className="fas fa-eye text-primary mr-1"></i>View Detail</a>
<a href="" className="btn btn-sm text-dark p-0"><i
className="fas fa-shopping-cart text-primary mr-1"></i>Add To Cart</a>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-12 pb-1">
<div className="card product-item border-0 mb-4">
<div className="card-header product-img position-relative
overflow-hidden bg-transparent border p-0">
<img className="assets/img-fluid w-100"
src="assets/img/product-8.jpg" alt="" />
</div>
<div className="card-body border-left border-right text-center p-
0 pt-4 pb-3">
<h6 className="text-truncate mb-3">Colorful Stylish
Shirt</h6>
<div className="d-flex justify-content-center">
<h6>$123.00</h6><h6 className="text-muted ml-
2"><del>$123.00</del></h6>
</div>
</div>
<div className="card-footer d-flex justify-content-between bg-
light border">
<a href="" className="btn btn-sm text-dark p-0"><i
className="fas fa-eye text-primary mr-1"></i>View Detail</a>
<a href="" className="btn btn-sm text-dark p-0"><i
className="fas fa-shopping-cart text-primary mr-1"></i>Add To Cart</a>
</div>
</div>
</div>
</div>
</div> */}

{/*<div className="container-fluid py-5">

<div className="row px-xl-5">
<div className="col">
<div className="owl-carousel vendor-carousel">
<div className="vendor-item border p-4">
<img src="assets/img/vendor-1.jpg" alt="" />
</div>
<div className="vendor-item border p-4">
<img src="assets/img/vendor-2.jpg" alt="" />
</div>
<div className="vendor-item border p-4">
<img src="assets/img/vendor-3.jpg" alt="" />
</div>
<div className="vendor-item border p-4">
<img src="assets/img/vendor-4.jpg" alt="" />
</div>
<div className="vendor-item border p-4">
<img src="assets/img/vendor-5.jpg" alt="" />
</div>
<div className="vendor-item border p-4">
<img src="assets/img/vendor-6.jpg" alt="" />
</div>
<div className="vendor-item border p-4">
<img src="assets/img/vendor-7.jpg" alt="" />
</div>
<div className="vendor-item border p-4">
<img src="assets/img/vendor-8.jpg" alt="" />
</div>
 </div>
</div>
</div>
</div> */}

<Footer />

</Fragment>
)
}
export default Index;