updated

Redme.md

@@ -0,0 +1,124 @@
+# Project Introduction
+
+- Everything you can do as a user on this website
+
+  - You can open an account.
+  - You can add products to the cart
+  - You can save favorite products in wishlist.
+  - If you click on a product, you can see its details.
+  - Account can be updated.
+  - You can view the profile.
+  - You can change the password.
+  - You can see all your orders.
+  - Any order can be trucked.
+  - You can add your address (in 3 variants)
+  - You can checkout.
+  - You can order new.
+  - You can logout.
+  - You can forget the password.
+
+</br>
+
+- As a seller you can do everything on this website
+
+  - Can open seller account.
+  - Can update seller documents.
+  - You can post new products.
+  - You can see all the product list of your shop.
+  - Can create new events.
+  - You can see all the events you have created.
+  - You can change customer order status.
+  - There is a system to withdraw money.
+  - There is an option to add coupon code.
+  - User has option to change order saters.
+
+</br>
+
+# Projects all packages
+
+```
+npm i @material-ui/core
+```
+
+```
+npm i @material-ui/data-grid
+```
+
+```
+npm i @reduxjs/toolkit
+```
+
+```
+npm i country-state-city
+```
+
+```
+npm i framer-motion
+```
+
+```
+npm i react-icons
+```
+
+```
+npm i react-image-magnify
+```
+
+```
+npm i react-lottie
+```
+
+```
+npm i react-redux
+```
+
+```
+npm i react-router-dom
+```
+
+```
+npm i react-toastify
+```
+
+```
+npm i uuid
+```
+
+# Tailwind CSS install process
+
+```
+npm install -D tailwindcss postcss autoprefixer
+```
+
+```
+npx tailwindcss init -p
+```
+
+## add this lines on your tailwind.config.js file
+
+> /\*_ @type {import('tailwindcss').Config} _/
+> export default {
+> content: [
+> "./index.html",
+
+    "./src/**/*.{js,ts,jsx,tsx}",
+
+],
+theme: {
+extend: {},
+},
+plugins: [],
+}
+
+</br>
+
+## add this classes on your index.css file
+
+```
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+> any doubt please contact me!
+> asfakahmed680@gmail.com

src/Components/Layout/Checkout page/CheckoutSteps.jsx

@@ -6,7 +6,7 @@ import { motion } from "framer-motion";
 const CheckoutSteps = ({ active }) => {
   return (
     <div className="w-full flex justify-center">
-      <div className="w-full justify-center flex items-center ">
+      <div className="w-full justify-center flex items-center flex-wrap">
         <motion.div
           initial={{ opacity: 0, x: -50 }}
           animate={{ opacity: 1, x: 0 }}