*/}
+
+
+ Help | Order Status
+
+
+ Free Shipping: On All US Orders Above $100
+
+
+ 123 456 7890
+
+
+
+
+
+
+
+
+
+
AutoParts.Com
+
+
+
+
+
+
+
My Account
+
+
Garage
+
+
+
+ {/*
Wishlist
+
Cart */}
+
+
+
+ Exterior
+
+ Interior
+
+ Performance
+
+ Wheels & Tires
+
+ Body Parts
+
+ Repair Parts
+
+ Electronics
+
+ Tools & Garage
+
+
+
+
+ );
+}
+
+export default Navbar;
diff --git a/autoparts/src/components/Offer.css b/autoparts/src/components/Offer.css
new file mode 100644
index 0000000..15a4179
--- /dev/null
+++ b/autoparts/src/components/Offer.css
@@ -0,0 +1,42 @@
+.app {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ background: linear-gradient(to bottom, yellow 50%, white 50%);
+ height: 80vh;
+ padding-top: 50px;
+ margin-bottom: 50px;
+ }
+
+ .heading {
+ text-align: center;
+ margin-bottom: 20px;
+ }
+
+ .section-container-O {
+ display: flex;
+ justify-content: space-around;
+ width: 100%;
+ max-width: 80%;
+ margin-top: 20px;
+ }
+
+ .section-O {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 30%;
+ }
+
+ .section-image-O {
+ width: 500px;
+ height: 350px;
+ object-fit: cover;
+ margin-bottom: 10px;
+ }
+
+ h2,
+ p {
+ margin: 5px;
+ }
+
\ No newline at end of file
diff --git a/autoparts/src/components/Offers.js b/autoparts/src/components/Offers.js
new file mode 100644
index 0000000..803d643
--- /dev/null
+++ b/autoparts/src/components/Offers.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import './Offer.css';
+import repair from '../Images/repair.jpg'
+import body from '../Images/body-parts.jpg'
+import { Link } from 'react-router-dom';
+
+
+const Offer = () => {
+ return (
+
+
OUR OFFERS
+
+
+
+
+
+
LIMITED OFFER
+
Learn More
+
+
+
+
+
+
BODY PARTS
+
Learn More
+
+
+
+ );
+};
+
+export default Offer;
diff --git a/autoparts/src/components/home.jsx b/autoparts/src/components/home.jsx
new file mode 100644
index 0000000..382e20e
--- /dev/null
+++ b/autoparts/src/components/home.jsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import Blog from './Blog'
+import Mainbody from './Mainbody'
+import Models from './Models'
+import Offers from './Offers'
+
+export default function Home() {
+ return (
+<>
+
+
+
+
+
+ )
+}
diff --git a/autoparts/src/components/login.jsx b/autoparts/src/components/login.jsx
new file mode 100644
index 0000000..0a44c91
--- /dev/null
+++ b/autoparts/src/components/login.jsx
@@ -0,0 +1,95 @@
+import React, { useState ,useEffect} from 'react';
+import { useNavigate } from 'react-router-dom';
+import { auth} from '../firebase';
+import {db} from '../firebase'
+import { FcGoogle } from 'react-icons/fc';
+import {
+ Box,
+ Heading,
+ Input,
+ Button,
+ FormControl,
+ Text,
+ FormLabel,
+ Center
+} from '@chakra-ui/react';
+import { signInWithEmailAndPassword } from 'firebase/auth';
+
+export default function Login() {
+ const navigate = useNavigate();
+ const [user, setUser] = useState({
+ email: "",
+ password: ""
+ });
+
+
+
+ const handleSignIn = async (e) => {
+ e.preventDefault();
+
+ try {
+ await signInWithEmailAndPassword(auth, user.email, user.password);
+ navigate('/');
+ } catch (error) {
+ alert("Error");
+ }
+ };
+
+
+ return (
+
+
+
+ Login
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/autoparts/src/components/payment.jsx b/autoparts/src/components/payment.jsx
new file mode 100644
index 0000000..21e67b1
--- /dev/null
+++ b/autoparts/src/components/payment.jsx
@@ -0,0 +1,268 @@
+import { Box, Button, Divider, FormControl, FormLabel,Flex,Text, Heading, HStack, Input, Radio,Image, RadioGroup, Select, Stack } from "@chakra-ui/react";
+import React, { useState } from "react";
+import { useSelector } from "react-redux";
+import { Link } from "react-router-dom";
+
+const CheckoutPage = () => {
+ const [firstName, setFirstName] = useState("");
+ const [lastName, setLastName] = useState("");
+ const [address, setAddress] = useState("");
+ const [floorNumber, setFloorNumber] = useState("");
+ const [city, setCity] = useState("");
+ const [state, setState] = useState("");
+ const [pinCode, setPinCode] = useState("");
+ const [phone, setPhone] = useState("");
+ const [email, setEmail] = useState("");
+ const [shippingMethod, setShippingMethod] = useState("");
+ const [paymentMethod, setPaymentMethod] = useState("");
+
+ const data=useSelector((data)=>{
+ return data.checkoutPageData
+ })
+console.log(data)
+
+ const handleFirstNameChange = (event) => {
+ setFirstName(event.target.value);
+ };
+
+ const handleLastNameChange = (event) => {
+ setLastName(event.target.value);
+ };
+
+ const handleAddressChange = (event) => {
+ setAddress(event.target.value);
+ };
+
+ const handleFloorNumberChange = (event) => {
+ setFloorNumber(event.target.value);
+ };
+
+ const handleCityChange = (event) => {
+ setCity(event.target.value);
+ };
+
+ const handleStateChange = (event) => {
+ setState(event.target.value);
+ };
+
+ const handlePinCodeChange = (event) => {
+ setPinCode(event.target.value);
+ };
+
+ const handlePhoneChange = (event) => {
+ setPhone(event.target.value);
+ };
+
+ const handleEmailChange = (event) => {
+ setEmail(event.target.value);
+ };
+
+ const handleShippingMethodChange = (value) => {
+ setShippingMethod(value);
+ };
+
+ const handlePaymentMethodChange = (value) => {
+ setPaymentMethod(value);
+ };
+
+ const handleSubmit = () => {
+ // Handle form submission
+ };
+
+ return (
+
+
+ Checkout
+
+
+
+ {data.part_name}
+ Amount to Pay: $ {data.price}
+
+
+ Payment Method
+
+
+ Cash on Delivery
+ Card
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {paymentMethod === "card" && (
+ <>
+
+
+ Card Number
+
+
+
+
+
+ Expiry Date
+
+
+
+
+
+ Name on Card
+
+
+
+
+
+ CVV
+
+
+
+ )}
+
+
+
+
+
+
+ First Name
+
+
+
+ Last Name
+
+
+
+
+
+ Address
+
+
+
+
+
+ Floor Number
+
+
+
+ City
+
+
+
+
+
+ State
+
+ Select State
+ Andaman and Nicobar Islands
+ Andhra Pradesh
+ Arunachal Pradesh
+ Assam
+ Bihar
+ Chandigarh
+ Chhattisgarh
+ Dadra and Nagar Haveli
+ Daman and Diu
+ Delhi
+ Goa
+ Gujarat
+ Haryana
+ Himachal Pradesh
+ Jammu and Kashmir
+ Jharkhand
+ Karnataka
+ Kerala
+ Lakshadweep
+ Madhya Pradesh
+ Maharashtra
+ Manipur
+ Meghalaya
+ Mizoram
+ Nagaland
+ Odisha
+ Puducherry
+ Punjab
+ Rajasthan
+ Sikkim
+ Tamil Nadu
+ Telangana
+ Tripura
+ Uttar Pradesh
+ Uttarakhand
+ West Bengal
+
+
+
+
+
+
+ Pin Code
+
+
+
+ Phone
+
+
+
+
+
+ Email
+
+
+
+
+
+ Shipping Method
+
+
+ Standard Shipping
+ Express Shipping
+ Overnight Shipping
+
+
+
+
+
+
+ Place Order
+
+
+
+
+ );
+};
+
+export default CheckoutPage;
\ No newline at end of file
diff --git a/autoparts/src/components/signup.jsx b/autoparts/src/components/signup.jsx
new file mode 100644
index 0000000..03da58b
--- /dev/null
+++ b/autoparts/src/components/signup.jsx
@@ -0,0 +1,115 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { createUserWithEmailAndPassword, updateProfile } from 'firebase/auth';
+import { auth, db } from '../firebase';
+import { Box, Heading, Input, Button, FormControl, Text, FormLabel } from '@chakra-ui/react';
+import { addDoc, collection } from 'firebase/firestore';
+
+export default function Signup() {
+ const navigate = useNavigate();
+ const [user, setUser] = useState({
+ name: '',
+ email: '',
+ password: '',
+ });
+ const [button, setButton] = useState(false);
+
+ const handleSignup = (e) => {
+ e.preventDefault();
+ if (user.name === '' || user.email === '' || user.password === '') {
+ alert('Fill all fields');
+ return;
+ }
+ setButton(true);
+ createUserWithEmailAndPassword(auth, user.email, user.password)
+ .then(async (res) => {
+ const newUser = res.user;
+ await updateProfile(newUser, { displayName: user.name });
+ const initialCartValue = 0;
+ addDoc(collection(db, 'users'), {
+ username: user.name,
+ email: user.email,
+ password: user.password,
+ cart: initialCartValue,
+ uid: newUser.uid,
+ })
+ .then(() => {
+ alert('Signup successful');
+ setUser({
+ name: '',
+ email: '',
+ password: '',
+ });
+ navigate('/login');
+ })
+ .catch((err) => {
+ alert(err.message);
+ })
+ .finally(() => {
+ setButton(false);
+ });
+ })
+ .catch((err) => console.log(err));
+ };
+
+ return (
+
+
+
+ Sign Up
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/autoparts/src/components/success.jsx b/autoparts/src/components/success.jsx
new file mode 100644
index 0000000..9756fd4
--- /dev/null
+++ b/autoparts/src/components/success.jsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { Button } from '@chakra-ui/react'
+import { Link } from 'react-router-dom'
+
+
+export default function Success() {
+ return (
+
+
+
+
+
+
+
-: Payment Successful :-
+ Back to Home Page
+
+
+
+
+ )
+}
diff --git a/autoparts/src/firebase.js b/autoparts/src/firebase.js
new file mode 100644
index 0000000..6915de1
--- /dev/null
+++ b/autoparts/src/firebase.js
@@ -0,0 +1,28 @@
+// Import the functions you need from the SDKs you need
+
+import {initializeApp} from "firebase/app"
+import {getAuth} from "firebase/auth"
+import {getFirestore} from 'firebase/firestore'
+import {getStorage}from 'firebase/storage'
+// TODO: Add SDKs for Firebase products that you want to use
+// https://firebase.google.com/docs/web/setup#available-libraries
+
+// Your web app's Firebase configuration
+const firebaseConfig = {
+ apiKey: "AIzaSyBnwyDcT1gXlSfIOVjOjaIPr8dH75rBsew",
+ authDomain: "openbooktech-871a4.firebaseapp.com",
+ projectId: "openbooktech-871a4",
+ storageBucket: "openbooktech-871a4.appspot.com",
+ messagingSenderId: "824647282741",
+ appId: "1:824647282741:web:0169b2cc1ed30778b5417c"
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+const auth=getAuth();
+const storage=getStorage(app)
+const db=getFirestore(app)
+export {auth,app,storage,db};
+
+
+//storeage locations
\ No newline at end of file
diff --git a/autoparts/src/index.css b/autoparts/src/index.css
index ec2585e..1e528ed 100644
--- a/autoparts/src/index.css
+++ b/autoparts/src/index.css
@@ -11,3 +11,8 @@ code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
+
+ @tailwind base;
+@tailwind components;
+@tailwind utilities;
+
diff --git a/autoparts/src/index.js b/autoparts/src/index.js
index 831070b..6f1b6f1 100644
--- a/autoparts/src/index.js
+++ b/autoparts/src/index.js
@@ -3,13 +3,21 @@ import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
+import { Provider } from 'react-redux';
+import {store} from './Redux/store'
+import { ChakraProvider } from '@chakra-ui/react'
+import { BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
-
+
+
+
+
+
);
// If you want to start measuring performance in your app, pass a function
diff --git a/autoparts/src/product.jsx b/autoparts/src/product.jsx
new file mode 100644
index 0000000..623a7c8
--- /dev/null
+++ b/autoparts/src/product.jsx
@@ -0,0 +1,343 @@
+import React from 'react'
+import axios from 'axios'
+import{Select,Button,Text, Box,InputGroup,InputLeftElement,
+ Input,Spinner,useDisclosure,Drawer,DrawerCloseButton,StackItem,Stack,
+ DrawerContent,FormLabel,Textarea,InputLeftAddon,InputRightAddon, Heading, } from '@chakra-ui/react'
+import { useState,useEffect } from 'react'
+import './products.css'
+import { StarIcon,SunIcon,MoonIcon, Search2Icon,AddIcon,ArrowRightIcon } from '@chakra-ui/icons'
+import { getCartDataFun } from './Redux/action'
+import { getDetailsData } from './Redux/action'
+import { useDispatch } from 'react-redux'
+import { useSelector } from 'react-redux'
+import { Link } from 'react-router-dom'
+
+
+
+
+export default function Product() {
+
+ const[productData,setProductData]=useState([])
+ const[productShow,setProductShow]=useState([])
+ const[secondPage,setSecondPage]=useState([])
+
+
+ const { isOpen, onOpen, onClose } = useDisclosure()
+ const firstField = React.useRef()
+
+ const[theme,setTheme]=useState("light")
+ const dispatch=useDispatch()
+ const data=useSelector((data)=>{
+ return data
+ })
+
+ useEffect(()=>{
+axios.get(`https://run.mocky.io/v3/eac7838d-7591-45b2-b003-ef664bb87693`)
+.then((res)=>{
+ console.log(res.data)
+ setProductData(res.data)
+ setProductShow(res.data)
+})
+ },[])
+
+ useEffect(()=>{
+axios.get(`https://run.mocky.io/v3/dd3bfab8-dce9-4748-84c6-7cd9bbc1ccca`)
+.then((res)=>{
+ console.log(res.data)
+ setSecondPage(res.data)
+
+ // let arr1=[...productShow]
+ // let arr2=[...secondPage]
+ // let arr=arr1.concat(arr2)
+
+ // settotal(arr)
+})
+ },[])
+
+
+
+
+
+
+
+
+
+ function handleSelect(value){
+
+ if(value=="LOW_TO_HIGH"){
+
+ const numAscending = [...productData].sort((a, b) => a.price - b.price)
+ console.log(numAscending)
+ setProductData(numAscending)
+ }else if(value=="HIGH_TO_LOW"){
+ const numDescending = [...productData].sort((a, b) => b.price - a.price)
+ console.log(numDescending)
+ setProductData(numDescending)
+ }else if(value==""){
+ const numAscending = [...productData].sort((a, b) => a.id - b.id)
+ console.log(numAscending)
+ setProductData(numAscending)
+ }
+
+ }
+
+ function handleFilterMan (value){
+ if(value==""){
+ setProductData(productShow)
+}else{
+
+ let newarr=[...productShow].filter(function(ele,idx){
+ return ele.manufacturer==value
+ })
+ setProductData(newarr)
+}
+ }
+
+
+ function handleFilterVeh (value){
+ if(value==""){
+ setProductData(productShow)
+}else{
+
+ let newarr=[...productShow].filter(function(ele,idx){
+ return ele.vehicle==value
+ })
+ setProductData(newarr)
+}
+ }
+
+function addToCart(elem){
+ let ele={...elem,quantity:1}
+ dispatch(getCartDataFun(ele))
+ console.log("abcd")
+}
+
+function getDetails(ele){
+dispatch(getDetailsData(ele))
+}
+console.log(data)
+
+function handleSearch(value){
+
+let arr=productShow.filter(function(ele,idx){
+ if(value===""){
+ return productShow
+ }
+ return ele.part_name.toLowerCase().includes(value.toLowerCase())
+})
+console.log(productShow)
+console.log(arr)
+setProductData(arr)
+}
+
+
+
+ return (
+
+
+ <>
+
+
+
+ {setTheme("dark")}}>
+ {setTheme("light")}}>
+
+
+ {/*
+ Order Customised Products
+
+
+
+
+
+ Name
+
+
+
+ Your Email
+
+
+ .com
+
+
+
+
+ Select Manufacturer
+
+ TATA
+ Ford
+ Maruti
+
+
+
+ Select Vehicle
+
+ Car
+ Bike
+
+
+
+
+
+ Description
+
+
+
+
+
+
+
+ Cancel
+
+ Order Now
+
+ Customer Reviews
+
+
+ #Spark Plugs:
+
+ Customer: John D.
+Rating: ⭐⭐⭐⭐⭐
+Review: "I purchased these spark plugs for my car, and they have exceeded my expectations. The engine runs smoother, and I've noticed a significant improvement in fuel efficiency. Highly recommended!"
+
+
+ #Brake Pads:
+
+ Customer: Emily S.
+Rating: ⭐⭐⭐⭐
+Review: "I recently installed these brake pads on my vehicle, and they have greatly enhanced my braking performance. The stopping power is exceptional, and they have reduced noise and vibration. I feel confident and safe on the road. Fantastic brake pads!"
+
+
+ #Air Filters:
+
+ Customer: David M.
+Rating: ⭐⭐⭐⭐
+Review: "I upgraded to these high-flow air filters, and I can feel the difference in my car's performance. The engine breathes better, and I've noticed improved throttle response. Installation was a breeze, and the quality is top-notch. Great value for the price!"
+
+
+ #Suspension Kit:
+
+Customer: Sarah L.
+Rating: ⭐⭐⭐⭐
+Review: "This suspension kit has completely transformed my driving experience. The handling and stability of my car have vastly improved, especially during sharp turns. The kit was easy to install, and the instructions were clear. I'm extremely satisfied with this purchase!"
+
+
+ #Radiator:
+
+Customer: Michael B.
+Rating: ⭐⭐⭐⭐
+Review: "I replaced my old radiator with this high-quality one, and I'm impressed with its performance. It fits perfectly, and my engine temperature remains stable, even in hot weather conditions. It's a reliable radiator option that provides peace of mind on long drives."
+
+
+
+
+
+
+
+
+
+
+
+
+
DEAL OF THE WEEK
+
+
+ {handleSelect(e.target.value)}}>
+ DEFAULT
+ HIGH TO LOW
+ LOW TO HIGH
+
+
+ {handleFilterMan(e.target.value)}}>
+ DEFAULT
+ MARUTI
+ FORD
+ TATA
+
+
+
+ {handleFilterVeh(e.target.value)}}>
+ DEFAULT
+ CAR
+ BIKE
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {setProductData(productShow)}}>Previous
+ {setProductData(secondPage)}}>Next
+
+
+
+
+
+
+ {
+ productData.length>0 ? productData.map(function(ele,idx){
+ return
+
+
+ {getDetails(ele)}}>
+ < img src={ele.image} className="images"/>
+
+
+
+
+ {ele.part_name}
+
+
+ {ele.manufacturer}
+
+ ${ele.price}
+
+
+ {addToCart(ele)}} bg='#e9e9e0;'>Add To Cart
+
+
+ }):
+ }
+
+
+
+
+ AutoParts.com – #1 Online Marketplace to Sell or Buy AutoParts
+ Using your own car gives you independence from external circumstances and the opportunity to plan your day exactly how you want. No rush to miss urban transport and even be late for work, because of outside factors. With your own car, you feel free and have the ability to address business and pleasure travel, as you want. All these reasons have a huge influence on the number of vehicles, on the road. Among them are passenger cars, lorries, buses, etc. Bringing this into focus: in 1986 there were only 500 million cars in the whole world. And in 2010 the number increased to 1 billion vehicles. Researchers with the International Energy Agency suggest that by the year 2035 nearly 25 percent of the world population will own a car. According to research, the current number is going to increase to 1,7 billion. That's why auto car spare parts are in demand among car owners. boodmo.com is a car parts marketplace in India, which pursues the aim to organize the replacement parts market and make the shopping process easier and more convenient.
+
+
+
+ )
+}
diff --git a/autoparts/src/productdetails.css b/autoparts/src/productdetails.css
new file mode 100644
index 0000000..fd1d7ed
--- /dev/null
+++ b/autoparts/src/productdetails.css
@@ -0,0 +1,14 @@
+*{
+ font-family: 'Times New Roman', Times, serif;
+ font-weight: bold;
+}
+.dark{
+ background-color: black;
+}
+.text{
+ text-align: initial;
+ font-weight: bold;
+ /* width: 80%; */
+ /* margin: auto; */
+ margin-top: 60px;
+ }
\ No newline at end of file
diff --git a/autoparts/src/productdetails.jsx b/autoparts/src/productdetails.jsx
new file mode 100644
index 0000000..6f6a6f4
--- /dev/null
+++ b/autoparts/src/productdetails.jsx
@@ -0,0 +1,94 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+import {Card,Image,Stack,CardBody,Heading,Text,CardFooter,Button} from '@chakra-ui/react'
+import { MoonIcon,SunIcon } from '@chakra-ui/icons'
+import './productdetails.css'
+import { getCartDataFun } from './Redux/action'
+import { useDispatch } from 'react-redux'
+import { useState } from 'react'
+import { color } from 'framer-motion'
+import { Link } from 'react-router-dom'
+
+export default function Productdetails() {
+ const dispatch=useDispatch()
+ const[theme,setTheme]=useState("light")
+ const detailsData=useSelector((data)=>{
+ return data.detailsPageData
+ })
+ console.log(detailsData)
+
+ function addToCart(elem){
+ let ele={...elem,quantity:1}
+ dispatch(getCartDataFun(ele))
+ console.log("abcd")
+ }
+
+ return (
+
+
+
+
+ {setTheme("dark")}}>
+ {setTheme("light")}}>
+
+
+
+
+
+ {detailsData.part_name}
+
+
+ Manufactured By: {detailsData.manufacturer}
+
+
+
+
+ Cost:$ {detailsData.price}
+
+
+ Description:
+ This is one of the best quality {detailsData.part_name} present in current market at an affordable cost.
+ Lorem ipsum dolor sit amet consectetur adipisicing elit.
+ Repudiandae quae commodi veritatis vero incidunt nostrum sunt perspiciatis ipsum sequi eos minima itaque,
+ cum eveniet corporis, enim ducimus dolore dolorem ullam.
+
+ Buy this {detailsData.part_name} with a warranty of 3 years.
+
+
+
+ {addToCart(detailsData)}}>
+ Add To Cart
+
+
+
+ Go To Cart
+
+
+
+
+
+
+
+ AutoParts.com – #1 Online Marketplace to Sell or Buy AutoParts
+ Using your own car gives you independence from external circumstances and the opportunity to plan your day exactly how you want. No rush to miss urban transport and even be late for work, because of outside factors. With your own car, you feel free and have the ability to address business and pleasure travel, as you want. All these reasons have a huge influence on the number of vehicles, on the road. Among them are passenger cars, lorries, buses, etc. Bringing this into focus: in 1986 there were only 500 million cars in the whole world. And in 2010 the number increased to 1 billion vehicles. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, consectetur? Autem a laboriosam cum iusto delectus consequuntur enim nisi aliquid fugit dolorem! Researchers with the International Energy Agency suggest that by the year 2035 nearly 25 percent of the world population will own a car. According to research, the current number is going to increase to 1,7 billion. That's why auto car spare parts are in demand among car owners. boodmo.com is a car parts marketplace in India, which pursues the aim to organize the replacement parts market and make the shopping process easier and more convenient.
+
+
+
+ )
+}
diff --git a/autoparts/src/products.css b/autoparts/src/products.css
new file mode 100644
index 0000000..bb3ec14
--- /dev/null
+++ b/autoparts/src/products.css
@@ -0,0 +1,158 @@
+*{
+ font-family:'Times New Roman', Times, serif;
+
+}
+.images{
+ width: 100%;
+ height: 150px;
+}
+.parentbox{
+ display: grid;
+grid-template-columns: repeat(5,180px);
+text-align: center;
+justify-content: space-around;
+
+/* margin: auto; */
+margin-bottom: 50px;
+gap: 10px;
+
+}
+
+button:hover {
+ /* background-color: #ffd700;
+ transition: 0.2s;
+ */
+ }
+ button{
+ /* border-radius: 5px;
+ border-color:black;
+ width: 60%;
+ height: 30px;
+ background-color: black; */
+
+ }
+ .selectContainer {
+ display: flex;
+ margin-bottom: 50px;
+ margin-top: 20px;
+ gap: 10px;
+
+ }
+ .selectContainer select {
+ /* height: 30px;
+ font-weight: bolder; */
+ }
+
+ .HeaderOfProductPage{
+ color: black;
+ font-size: 35px;
+ font-family:'Times New Roman', Times, serif;
+
+
+ }
+ .itembox{
+ box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+ margin-top: 10px;
+ /* padding: auto; */
+ /* background-color:#aaaaa3; */
+ background-color:#f5f5f0;
+ padding-bottom: px;
+
+ }
+ .star{
+ padding-left:35px;
+ }
+ .upperMostBox{
+ width: 70%;
+ margin: auto;
+ margin-top: 2%;
+
+ }
+ .price{
+ font-weight: bolder;
+ }
+ .name{
+ color: #7c7c77;
+ font-weight: bold;
+ }
+ .text{
+ text-align: initial;
+ font-weight: bold;
+ }
+ .dark{
+ background-color: black;
+ display: flex;
+ }
+ .light{
+ display: flex;
+ }
+ .themecontainer{
+ margin-bottom: 10px;
+ }
+ .sidebar{
+ width: 25%;
+ margin-top: 7%;
+ padding: auto;
+ }
+
+ @media (min-width: 900px) and (max-width: 1060px) {
+ /* CSS rules for medium screens */
+
+ .sidebar{
+ display: none;
+ }
+ }
+ @media (min-width: 601px) and (max-width: 900px) {
+ /* CSS rules for medium screens */
+ .parentbox{
+ display: grid;
+ grid-template-columns: repeat(3,180px);
+ text-align: center;
+ justify-content: space-around;
+
+ /* margin: auto; */
+ margin-bottom: 50px;
+ gap: 10px;
+
+ }
+ .sidebar{
+ display: none;
+ }
+ }
+ @media (min-width: 412px) and (max-width: 653px) {
+ /* CSS rules for medium screens */
+ .parentbox{
+ display: grid;
+ grid-template-columns: repeat(2,180px);
+ text-align: center;
+ justify-content: space-around;
+
+ /* margin: auto; */
+ margin-bottom: 50px;
+ gap: 10px;
+
+ }
+ .sidebar{
+ display: none;
+ }
+ }
+ @media (min-width: 20px) and (max-width: 411px) {
+ /* CSS rules for medium screens */
+ .parentbox{
+ display: grid;
+ grid-template-columns: repeat(1,180px);
+ text-align: center;
+ justify-content: space-around;
+
+ /* margin: auto; */
+ margin-bottom: 50px;
+ gap: 10px;
+
+ }
+ .sidebar{
+ display: none;
+ }
+ }
+
+
+
\ No newline at end of file
diff --git a/autoparts/tailwind.config.js b/autoparts/tailwind.config.js
new file mode 100644
index 0000000..9a4a5d9
--- /dev/null
+++ b/autoparts/tailwind.config.js
@@ -0,0 +1,12 @@
+
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: [
+ "./src/**/*.{html,js,jsx}",
+ ],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+}
\ No newline at end of file