SOURCE CODE

1. Home.js
import React from "react";
import Banner from "../../components/Banner/Banner";
import BannerBo om from "../../components/Banner/BannerBo om";
import BestSellers from
"../../components/home/BestSellers/BestSellers";
import NewArrivals from
"../../components/home/NewArrivals/NewArrivals";
import Sale from "../../components/home/Sale/Sale";
import SpecialOffers from
"../../components/home/SpecialOffers/SpecialOffers";
import YearProduct from
"../../components/home/YearProduct/YearProduct";

const Home = () => {

return (
<div className="w-full mx-auto">
<Banner />
<BannerBo om />
<div className="max-w-container mx-auto px-4">
<Sale />
<NewArrivals />
<BestSellers />
<YearProduct />
<SpecialOffers />
</div>
</div>
);
};

export default Home;

2 Shop.js
import React, { useState } from "react";
import Breadcrumbs from "../../components/pageProps/Breadcrumbs";
import Pagina on from "../../components/pageProps/shopPage/Pagina on";
import ProductBanner from
"../../components/pageProps/shopPage/ProductBanner";
import ShopSideNav from "../../components/pageProps/shopPage/ShopSideNav";

const Shop = () => {

const [itemsPerPage, setItemsPerPage] = useState(12);
const itemsPerPageFromBanner = (itemsPerPage) => {
setItemsPerPage(itemsPerPage);
};

return (

<div className="max-w-container mx-auto px-4">

<Breadcrumbs tle="Products" />
{/* ================= Products Start here =================== */}
<div className="w-full h-full flex pb-20 gap-10">
<div className="w-[20%] lgl:w-[25%] hidden mdl:inline-flex h-full">
<ShopSideNav />
</div>
<div className="w-full mdl:w-[80%] lgl:w-[75%] h-full flex flex-col gap-10">
<ProductBanner itemsPerPageFromBanner={itemsPerPageFromBanner} />
<Pagina on itemsPerPage={itemsPerPage} />
</div>
</div>
{/* ================= Products End here ===================== */}
</div>
);
};

export default Shop;

3.Sign up
import React, { useState } from "react";
import { BsCheckCircleFill } from "react-icons/bs";
import { Link } from "react-router-dom";
import { logoLight } from "../../assets/images";

const SignUp = () => {

// ============= Ini al State Start here =============
const [clientName, setClientName] = useState("");
const [email, setEmail] = useState("");
const [phone, setPhone] = useState("");
const [password, setPassword] = useState("");
const [address, setAddress] = useState("");
const [city, setCity] = useState("");
const [country, setCountry] = useState("");
const [zip, setZip] = useState("");
const [checked, setChecked] = useState(false);
// ============= Ini al State End here ===============
// ============= Error Msg Start here =================
const [errClientName, setErrClientName] = useState("");
const [errEmail, setErrEmail] = useState("");
const [errPhone, setErrPhone] = useState("");
const [errPassword, setErrPassword] = useState("");
const [errAddress, setErrAddress] = useState("");
const [errCity, setErrCity] = useState("");
const [errCountry, setErrCountry] = useState("");
const [errZip, setErrZip] = useState("");
// ============= Error Msg End here ===================
const [successMsg, setSuccessMsg] = useState("");
// ============= Event Handler Start here =============
const handleName = (e) => {
setClientName(e.target.value);
setErrClientName("");
};
const handleEmail = (e) => {
setEmail(e.target.value);
setErrEmail("");
};
const handlePhone = (e) => {
setPhone(e.target.value);
setErrPhone("");
};
const handlePassword = (e) => {
setPassword(e.target.value);
 setErrPassword("");
};
const handleAddress = (e) => {
setAddress(e.target.value);
setErrAddress("");
};
const handleCity = (e) => {
setCity(e.target.value);
setErrCity("");
};
const handleCountry = (e) => {
setCountry(e.target.value);
setErrCountry("");
};
const handleZip = (e) => {
setZip(e.target.value);
setErrZip("");
};
// ============= Event Handler End here ===============
// ================= Email Valida on start here =============
const EmailValida on = (email) => {
return String(email)
.toLowerCase()
.match(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i);
};
// ================= Email Valida on End here ===============

const handleSignUp = (e) => {

e.preventDefault();
if (checked) {
if (!clientName) {
setErrClientName("Enter your name");
}
if (!email) {
setErrEmail("Enter your email");
} else {
if (!EmailValida on(email)) {
setErrEmail("Enter a Valid email");
}
}
if (!phone) {
setErrPhone("Enter your phone number");
}
if (!password) {
 setErrPassword("Create a password");
} else {
if (password.length < 6) {
setErrPassword("Passwords must be at least 6 characters");
}
}
if (!address) {
setErrAddress("Enter your address");
}
if (!city) {
setErrCity("Enter your city name");
}
if (!country) {
setErrCountry("Enter the country you are residing");
}
if (!zip) {
setErrZip("Enter the zip code of your area");
}
// ============== Ge ng the value ==============
if (
clientName &&
email &&
EmailValida on(email) &&
password &&
password.length >= 6 &&
address &&
city &&
country &&
zip
){
setSuccessMsg(
Hello dear ${clientName}, Welcome you to OREBI Admin panel. We received
your Sign up request. We are processing to validate your access. Till then stay
connected and addi onal assistance will be sent to you by your mail at ${email}
);
setClientName("");
setEmail("");
setPhone("");
setPassword("");
setAddress("");
setCity("");
setCountry("");
setZip("");
}
 }
};
return (
<div className="w-full h-screen flex items-center jus fy-start">
<div className="w-1/2 hidden lgl:inline-flex h-full text-white">
<div className="w-[450px] h-full bg-primeColor px-10 flex flex-col gap-6 jus fy-
center">
<Link to="/">
<img src={logoLight} alt="logoImg" className="w-28" />
</Link>
<div className="flex flex-col gap-1 -mt-1">
<h1 className="font- tleFont text-xl font-medium">
Get started for free
</h1>
<p className="text-base">Create your account to access more</p>
</div>
<div className="w-[300px] flex items-start gap-3">
<span className="text-green-500 mt-1">
<BsCheckCircleFill />
</span>
<p className="text-base text-gray-300">
<span className="text-white font-semibold font- tleFont">
Get started fast with Fashion World
</span>
<br />

</p>
</div>
<div className="w-[300px] flex items-start gap-3">
<span className="text-green-500 mt-1">
<BsCheckCircleFill />
</span>
<p className="text-base text-gray-300">
<span className="text-white font-semibold font- tleFont">
Access all Fashion World services
</span>
<br />

</p>
</div>
<div className="w-[300px] flex items-start gap-3">
<span className="text-green-500 mt-1">
<BsCheckCircleFill />
</span>
 <p className="text-base text-gray-300">
<span className="text-white font-semibold font- tleFont">
Trusted by online Shoppers
</span>
<br />

</p>
</div>
<div className="flex items-center jus fy-between mt-10">
<p className="text-sm font- tleFont font-semibold text-gray-300 hover:text-
white cursor-pointer dura on-300">
© Fashion World
</p>
<p className="text-sm font- tleFont font-semibold text-gray-300 hover:text-
white cursor-pointer dura on-300">
Terms
</p>
<p className="text-sm font- tleFont font-semibold text-gray-300 hover:text-
white cursor-pointer dura on-300">
Privacy
</p>
<p className="text-sm font- tleFont font-semibold text-gray-300 hover:text-
white cursor-pointer dura on-300">
Security
</p>
</div>
</div>
</div>
<div className="w-full lgl:w-[500px] h-full flex flex-col jus fy-center">
{successMsg ? (
<div className="w-[500px]">
<p className="w-full px-4 py-10 text-green-500 font-medium font- tleFont">
{successMsg}
</p>
<Link to="/signin">
<bu on
className="w-full h-10 bg-primeColor rounded-md text-gray-200 text-base
font- tleFont font-semibold
tracking-wide hover:bg-black hover:text-white dura on-300"
>
Sign in
</bu on>
</Link>
</div>
 ):(
<form className="w-full lgl:w-[500px] h-screen flex items-center jus fy-
center">
<div className="px-6 py-4 w-full h-[96%] flex flex-col jus fy-start overflow-y-
scroll scrollbar-thin scrollbar-thumb-primeColor">
<h1 className="font- tleFont underline underline-offset-4 decora on-[1px]
font-semibold text-2xl mdl:text-3xl mb-4">
Create your account
</h1>
<div className="flex flex-col gap-3">
{/* client name */}
<div className="flex flex-col gap-.5">
<p className="font- tleFont text-base font-semibold text-gray-600">
Full Name
</p>
<input
onChange={handleName}
value={clientName}
className="w-full h-8 placeholder:text-sm placeholder:tracking-wide px-
4 text-base font-medium placeholder:font-normal rounded-md border-[1px] border-
gray-400 outline-none"
type="text"
placeholder="eg. pinku"
/>
{errClientName && (
<p className="text-sm text-red-500 font- tleFont font-semibold px-4">
<span className="font-bold italic mr-1">!</span>
{errClientName}
</p>
)}
</div>
{/* Email */}
<div className="flex flex-col gap-.5">
<p className="font- tleFont text-base font-semibold text-gray-600">
Work Email
</p>
<input
onChange={handleEmail}
value={email}
className="w-full h-8 placeholder:text-sm placeholder:tracking-wide px-
4 text-base font-medium placeholder:font-normal rounded-md border-[1px] border-
gray-400 outline-none"
type="email"
placeholder="[email protected]"
 />
{errEmail && (
<p className="text-sm text-red-500 font- tleFont font-semibold px-4">
<span className="font-bold italic mr-1">!</span>
{errEmail}
</p>
)}
</div>
{/* Phone Number */}
<div className="flex flex-col gap-.5">
<p className="font- tleFont text-base font-semibold text-gray-600">
Phone Number
</p>
<input
onChange={handlePhone}
value={phone}
className="w-full h-8 placeholder:text-sm placeholder:tracking-wide px-
4 text-base font-medium placeholder:font-normal rounded-md border-[1px] border-
gray-400 outline-none"
type="text"
placeholder="+919999999999"
/>
{errPhone && (
<p className="text-sm text-red-500 font- tleFont font-semibold px-4">
<span className="font-bold italic mr-1">!</span>
{errPhone}
</p>
)}
</div>
{/* Password */}
<div className="flex flex-col gap-.5">
<p className="font- tleFont text-base font-semibold text-gray-600">
Password
</p>
<input
onChange={handlePassword}
value={password}
className="w-full h-8 placeholder:text-sm placeholder:tracking-wide px-
4 text-base font-medium placeholder:font-normal rounded-md border-[1px] border-
gray-400 outline-none"
type="password"
placeholder="Create password"
/>
{errPassword && (
 <p className="text-sm text-red-500 font- tleFont font-semibold px-4">
<span className="font-bold italic mr-1">!</span>
{errPassword}
</p>
)}
</div>
{/* Address */}
<div className="flex flex-col gap-.5">
<p className="font- tleFont text-base font-semibold text-gray-600">
Address
</p>
<input
onChange={handleAddress}
value={address}
className="w-full h-8 placeholder:text-sm placeholder:tracking-wide px-
4 text-base font-medium placeholder:font-normal rounded-md border-[1px] border-
gray-400 outline-none"
type="text"
placeholder="haveli wala"
/>
{errAddress && (
<p className="text-sm text-red-500 font- tleFont font-semibold px-4">
<span className="font-bold italic mr-1">!</span>
{errAddress}
</p>
)}
</div>
{/* City */}
<div className="flex flex-col gap-.5">
<p className="font- tleFont text-base font-semibold text-gray-600">
City
</p>
<input
onChange={handleCity}
value={city}
className="w-full h-8 placeholder:text-sm placeholder:tracking-wide px-
4 text-base font-medium placeholder:font-normal rounded-md border-[1px] border-
gray-400 outline-none"
type="text"
placeholder="Your city"
/>
{errCity && (
<p className="text-sm text-red-500 font- tleFont font-semibold px-4">
<span className="font-bold italic mr-1">!</span>
 {errCity}
</p>
)}
</div>
{/* Country */}
<div className="flex flex-col gap-.5">
<p className="font- tleFont text-base font-semibold text-gray-600">
Country
</p>
<input
onChange={handleCountry}
value={country}
className="w-full h-8 placeholder:text-sm placeholder:tracking-wide px-
4 text-base font-medium placeholder:font-normal rounded-md border-[1px] border-
gray-400 outline-none"
type="text"
placeholder="Your country"
/>
{errCountry && (
<p className="text-sm text-red-500 font- tleFont font-semibold px-4">
<span className="font-bold italic mr-1">!</span>
{errCountry}
</p>
)}
</div>
{/* Zip code */}
<div className="flex flex-col gap-.5">
<p className="font- tleFont text-base font-semibold text-gray-600">
Zip/Postal code
</p>
<input
onChange={handleZip}
value={zip}
className="w-full h-8 placeholder:text-sm placeholder:tracking-wide px-
4 text-base font-medium placeholder:font-normal rounded-md border-[1px] border-
gray-400 outline-none"
type="text"
placeholder="Your country"
/>
{errZip && (
<p className="text-sm text-red-500 font- tleFont font-semibold px-4">
<span className="font-bold italic mr-1">!</span>
{errZip}
</p>
 )}
</div>
{/* Checkbox */}
<div className="flex items-start mdl:items-center gap-2">
<input
onChange={() => setChecked(!checked)}
className="w-4 h-4 mt-1 mdl:mt-0 cursor-pointer"
type="checkbox"
/>
<p className="text-sm text-primeColor">
I agree to the Fashion World{" "}
<span className="text-blue-500">Terms of Service </span>and{" "}
<span className="text-blue-500">Privacy Policy</span>.
</p>
</div>
<bu on
onClick={handleSignUp}
className={`${
checked
? "bg-primeColor hover:bg-black hover:text-white cursor-pointer"
: "bg-gray-500 hover:bg-gray-500 hover:text-gray-200 cursor-none"
} w-full text-gray-200 text-base font-medium h-10 rounded-md hover:text-
white dura on-300`}
>
Create Account
</bu on>
<p className="text-sm text-center font- tleFont font-medium">
Don't have an Account?{" "}
<Link to="/signin">
<span className="hover:text-blue-600 dura on-300">
Sign in
</span>
</Link>
</p>
</div>
</div>
</form>
)}
</div>
</div>
);
};

export default SignUp;

4.cart.js
import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Link } from "react-router-dom";
import { mo on } from "framer-mo on";
import Breadcrumbs from "../../components/pageProps/Breadcrumbs";
import { resetCart } from "../../redux/orebiSlice";
import { emptyCart } from "../../assets/images/index";
import ItemCard from "./ItemCard";

const Cart = () => {

const dispatch = useDispatch();
const products = useSelector((state) => state.orebiReducer.products);
const [totalAmt, setTotalAmt] = useState("");
const [shippingCharge, setShippingCharge] = useState("");
useEffect(() => {
let price = 0;
products.map((item) => {
price += item.price * item.quan ty;
return price;
});
setTotalAmt(price);
}, [products]);
useEffect(() => {
if (totalAmt <= 200) {
setShippingCharge(30);
} else if (totalAmt <= 400) {
setShippingCharge(25);
} else if (totalAmt > 401) {
setShippingCharge(20);
}
}, [totalAmt]);
return (
<div className="max-w-container mx-auto px-4">
<Breadcrumbs tle="Cart" />
{products.length > 0 ? (
<div className="pb-20">
<div className="w-full h-20 bg-[#F5F7F7] text-primeColor hidden lgl:grid grid-
cols-5 place-content-center px-6 text-lg font- tleFont font-semibold">
<h2 className="col-span-2">Product</h2>
<h2>Price</h2>
<h2>Quan ty</h2>
<h2>Sub Total</h2>
</div>
 <div className="mt-5">
{products.map((item) => (
<div key={item._id}>
<ItemCard item={item} />
</div>
))}
</div>

<bu on
onClick={() => dispatch(resetCart())}
className="py-2 px-10 bg-red-500 text-white font-semibold uppercase mb-4
hover:bg-red-700 dura on-300"
>
Reset cart
</bu on>

<div className="flex flex-col mdl:flex-row jus fy-between border py-4 px-4

items-center gap-2 mdl:gap-0">
<div className="flex items-center gap-4">
<input
className="w-44 mdl:w-52 h-8 px-4 border text-primeColor text-sm
outline-none border-gray-400"
type="text"
placeholder="Coupon Number"
/>
<p className="text-sm mdl:text-base font-semibold">
Apply Coupon
</p>
</div>
<p className="text-lg font-semibold">Update Cart</p>
</div>
<div className="max-w-7xl gap-4 flex jus fy-end mt-4">
<div className="w-96 flex flex-col gap-4">
<h1 className="text-2xl font-semibold text-right">Cart totals</h1>
<div>
<p className="flex items-center jus fy-between border-[1px] border-gray-
400 border-b-0 py-1.5 text-lg px-4 font-medium">
Subtotal
<span className="font-semibold tracking-wide font- tleFont">
${totalAmt}
</span>
</p>
<p className="flex items-center jus fy-between border-[1px] border-gray-
400 border-b-0 py-1.5 text-lg px-4 font-medium">
 Shipping Charge
<span className="font-semibold tracking-wide font- tleFont">
${shippingCharge}
</span>
</p>
<p className="flex items-center jus fy-between border-[1px] border-gray-
400 py-1.5 text-lg px-4 font-medium">
Total
<span className="font-bold tracking-wide text-lg font- tleFont">
${totalAmt + shippingCharge}
</span>
</p>
</div>
<div className="flex jus fy-end">
<Link to="/paymentgateway">
<bu on className="w-52 h-10 bg-primeColor text-white hover:bg-black
dura on-300">
Proceed to Checkout
</bu on>
</Link>
</div>
</div>
</div>
</div>
):(
<mo on.div
ini al={{ y: 30, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transi on={{ dura on: 0.4 }}
className="flex flex-col mdl:flex-row jus fy-center items-center gap-4 pb-20"
>
<div>
<img
className="w-80 rounded-lg p-4 mx-auto"
src={emptyCart}
alt="emptyCart"
/>
</div>
<div className="max-w-[500px] p-4 py-8 bg-white flex gap-4 flex-col items-
center rounded-md shadow-lg">
<h1 className="font- tleFont text-xl font-bold uppercase">
Your Cart feels lonely.
</h1>
<p className="text-sm text-center px-10 -mt-2">
5.About us
import React, { useEffect, useState } from "react";
import { Link, useLoca on } from "react-router-dom";
import Breadcrumbs from "../../components/pageProps/Breadcrumbs";

const About = () => {

const loca on = useLoca on();
const [prevLoca on, setPrevLoca on] = useState("");
useEffect(() => {
setPrevLoca on(loca on.state.data);
}, [loca on]);
return (
<div className="max-w-container mx-auto px-4">
<Breadcrumbs tle="About" prevLoca on={prevLoca on} />
<div className="pb-10">
<h1 className="max-w-[600px] text-base text-lightText mb-2">
<span className="text-primeColor font-semibold text-lg">Fashion
World</span>{" "}
is one of the world's leading ecommerce brands and is interna onally
recognized for celebra ng the essence of classic Worldwide cool
looking style.
</h1>
<Link to="/shop">
<bu on className="w-52 h-10 bg-primeColor text-white hover:bg-black
dura on-300">
Con nue Shopping
</bu on>
</Link>
</div>
</div>
);
};

export default About;

6. Product Details
import React, { useEffect, useState } from "react";
import { useLoca on } from "react-router-dom";
import Breadcrumbs from "../../components/pageProps/Breadcrumbs";
import ProductInfo from "../../components/pageProps/productDetails/ProductInfo";
import ProductsOnSale from
"../../components/pageProps/productDetails/ProductsOnSale";

const ProductDetails = () => {

const loca on = useLoca on();
const [prevLoca on, setPrevLoca on] = useState("");
const [productInfo, setProductInfo] = useState([]);useEffect(() => {
setProductInfo(loca on.state.item);
setPrevLoca on(loca on.pathname);
}, [loca on, productInfo]); return (
<div className="w-full mx-auto border-b-[1px] border-b-gray-300">
<div className="max-w-container mx-auto px-4">
<div className="xl:-mt-10 -mt-7">
<Breadcrumbs tle="" prevLoca on={prevLoca on} />
</div>
<div className="w-full grid grid-cols-1 md:grid-cols-2 xl:grid-cols-6 gap-4 h-full -
mt-5 xl:-mt-8 pb-10 bg-gray-100 p-4">
<div className="h-full">
<ProductsOnSale />
</div>
<div className="h-full xl:col-span-2">
<img
className="w-full h-full object-cover"
src={productInfo.img}
alt={productInfo.img}
/>
</div>
<div className="h-full w-full md:col-span-2 xl:col-span-3 xl:p-14 flex flex-col
gap-6 jus fy-center">
<ProductInfo productInfo={productInfo} />
</div>
</div>
</div>
</div>
);
};

export default ProductDetails;

7.App.js
import {
createBrowserRouter,
RouterProvider,
Outlet,
createRoutesFromElements,
Route,
ScrollRestora on,
} from "react-router-dom";
import Footer from "./components/home/Footer/Footer";
import FooterBo om from "./components/home/Footer/FooterBo om";
import Header from "./components/home/Header/Header";
import HeaderBo om from "./components/home/Header/HeaderBo om";
import SpecialCase from "./components/SpecialCase/SpecialCase";
import About from "./pages/About/About";
import SignIn from "./pages/Account/SignIn";
import SignUp from "./pages/Account/SignUp";
import Cart from "./pages/Cart/Cart";
import Contact from "./pages/Contact/Contact";
import Home from "./pages/Home/Home";
import Journal from "./pages/Journal/Journal";
import Offer from "./pages/Offer/Offer";
import Payment from "./pages/payment/Payment";
import ProductDetails from "./pages/ProductDetails/ProductDetails";
import Shop from "./pages/Shop/Shop";

const Layout = () => {

return (
<div>
<Header />
<HeaderBo om />
<SpecialCase />
<ScrollRestora on />
<Outlet />
<Footer />
<FooterBo om />
</div>
);
};
const router = createBrowserRouter(
createRoutesFromElements(
<Route>
<Route path="/" element={<Layout />}>
 {/* ==================== Header Navlink Start here ===================
*/}
<Route index element={<Home />}></Route>
<Route path="/shop" element={<Shop />}></Route>
<Route path="/about" element={<About />}></Route>
<Route path="/contact" element={<Contact />}></Route>
<Route path="/journal" element={<Journal />}></Route>
{/* ==================== Header Navlink End here =====================
*/}
<Route path="/offer" element={<Offer />}></Route>
<Route path="/product/:_id" element={<ProductDetails />}></Route>
<Route path="/cart" element={<Cart />}></Route>
<Route path="/paymentgateway" element={<Payment />}></Route>
</Route>
<Route path="/signup" element={<SignUp />}></Route>
<Route path="/signin" element={<SignIn />}></Route>
</Route>
)
);

func on App() {
return (
<div className="font-bodyFont">
<RouterProvider router={router} />
</div>
);
}

export default App;

8. Package.json
{
"name": "Fashion World",
"version": "0.1.0",
"private": true,
"dependencies": {
"@reduxjs/toolkit": "^1.9.2",
"@tes ng-library/jest-dom": "^5.16.5",
"@tes ng-library/react": "^13.4.0",
"@tes ng-library/user-event": "^13.5.0",
"framer-mo on": "^8.0.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.7.1",
"react-paginate": "^8.1.4",
"react-redux": "^8.0.5",
"react-router-dom": "^6.6.0",
"react-scripts": "5.0.1",
"react-slick": "^0.29.0",
"redux-persist": "^6.0.0",
"slick-carousel": "^1.8.1",
"tailwind-scrollbar": "^2.1.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"produc on": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
 "last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"autoprefixer": "^10.4.13",
"postcss": "^8.4.20",
"tailwindcss": "^3.2.4"
}
}