added product page

autoparts/package.json

@@ -7,18 +7,28 @@
     "@chakra-ui/react": "^2.6.1",
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
+    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-brands-svg-icons": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.4.0",
+    "firebase": "^9.22.1",
+    "font-awesome": "^4.7.0",
     "framer-motion": "^10.12.14",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.9.0",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.11.2",
     "react-scripts": "5.0.1",
+    "react-slick": "^0.29.0",
     "redux": "^4.2.1",
     "redux-thunk": "^2.4.2",
+    "slick-carousel": "^1.8.1",
+    "swiper": "^9.3.2",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -44,5 +54,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.3.2"
   }
 }

autoparts/src/All Routes/Routes.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import {Routes,Route} from 'react-router-dom'
+import Productdetails from '../productdetails'
+import Product from '../product'
+import Home from '../components/home'
+import Login from '../components/login'
+import Signup from '../components/signup'
+import Cart from '../components/Cart'
+import CheckoutPage from '../components/payment'
+import Success from '../components/success'
+
+
+export default function AllRoutes() {
+  return (
+    <div>
+        <Routes>
+            <Route path="/" element={<Home/>}/>
+            <Route path="/product" element={<Product/>}/>
+            <Route path="/productdetails" element={<Productdetails/>}/>
+            <Route path='/login' element={<Login/>}/>
+            <Route path='/signup' element={<Signup/>}/>
+            <Route path='/cart' element={<Cart/>}/>
+            <Route path='/checkout' element={<CheckoutPage/>}/>
+            <Route path='/success' element={<Success/>}/>
+        </Routes>
+    </div>
+  )
+}

autoparts/src/App.js

@@ -1,23 +1,18 @@
 import logo from './logo.svg';
 import './App.css';
+import Navbar from './components/Navbar';
+import Footer from './components/Footer';
+import Signup from './components/signup';
+import Login from './components/login';
 
+import Product from './product';
+import AllRoutes from './All Routes/Routes';
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <Navbar/>
+     <AllRoutes/>
+     <Footer/>
     </div>
   );
 }

autoparts/src/Redux/action.js

@@ -0,0 +1,31 @@
+import { getCartData } from "./actionTypes";
+import { getDetailsPageData } from "./actionTypes";
+
+export const getCartDataFun=(ele)=>{
+    return{
+        type:getCartData,
+        payload:ele
+    }
+}
+
+export const getDetailsData=(ele)=>{
+    return{
+        type:getDetailsPageData,
+        payload:ele
+    }
+}
+export const clearCartData=(payload)=>{
+    return{
+        type:"CLEAR_CART",
+        payload
+
+    }
+}
+
+export const getCheckoutData=(ele)=>{
+    return{
+        type:"Get_CheckOut",
+        payload:ele
+    }
+}
+

autoparts/src/Redux/actionTypes.js

@@ -0,0 +1,2 @@
+export const getCartData="getCartData"
+export const getDetailsPageData="getDetailsPageData"

autoparts/src/Redux/reducer.js

@@ -1,8 +1,30 @@
 let initialdata={
-
+cartPageData:[],
+detailsPageData:{},
+checkoutPageData:{}
 }
 
 let reducer=(store = initialdata,action)=>{
+
+    if(action.type=="getCartData"){
+        console.log("huihuihui")
+        return{
+           ...store,cartPageData:[...store.cartPageData,action.payload]
+        }
+    }else if(action.type=="getDetailsPageData"){
+        return{
+            ...store,detailsPageData:action.payload
+        }
+    }else if(action.type=="CLEAR_CART"){
+        return{
+            ...store,cartPageData:action.payload
+        }
+    }else if(action.type=="Get_CheckOut"){
+        return{
+
+            ...store,checkoutPageData:action.payload
+        }
+    }
 
     return store;
 }

autoparts/src/Redux/store.js

@@ -1,5 +1,8 @@
 import {legacy_createStore} from 'redux'
+import { applyMiddleware } from 'redux'
+import thunk from 'redux-thunk';
 
 import {reducer} from '../Redux/reducer'
 
-let store =legacy_createStore(reducer)
+export const store =legacy_createStore(reducer)
+console.log(store.getState())

autoparts/src/components/Blog.css

@@ -0,0 +1,40 @@
+.app {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: linear-gradient(to bottom, yellow 50%, white 50%);
+  height: 80vh;
+  padding-top: 50px;
+}
+
+.heading {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.section-container {
+  display: flex;
+  justify-content: space-around;
+  width: 100%;
+  max-width: 100%;
+  margin-top: 15px;
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 30%;
+}
+
+.section-image {
+  width: 400px;
+  height: 250px;
+  object-fit: cover;
+  margin-bottom: 10px;
+}
+
+h2,
+p {
+  margin: 5px;
+}

autoparts/src/components/Blog.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import './Blog.css';
+import carImg6 from '../Images/car6.jpg'
+import tyreImg from '../Images/nascar-332136_1280.jpg'
+import interior from '../Images/interior.jpg'
+import { Link } from 'react-router-dom';
+
+
+const Blog = () => {
+	return (
+		<div className="app">
+			<h1 className="heading">OUR BLOG</h1>
+			<div className="section-container">
+				<div className="">
+				<Link to="/product">
+					<img src={carImg6} alt="Car" className="section-image" />
+					</Link>
+					<div className="flex bg-gray-200 translate-y-[-10px] p-3 items-start flex-col">
+						<h2 style={{color:"red"}}>Exterior</h2>
+						<p>Date: 02-06-2023</p>
+						<p> Exterior that make vehicles stand out on the road.</p>
+					</div>
+				</div>
+				<div className="">
+				<Link to="/product">
+					<img src={tyreImg} alt="Tyre" className="section-image" />
+					</Link>
+					<div className="flex bg-gray-200 translate-y-[-10px] p-3 items-start flex-col">
+						<h2 style={{color:"red"}}>Wheels and Tires</h2>
+						<p>Date: 02-06-2023</p>
+						<p>Choosing the right tires impact the performance.</p>
+					</div>
+				</div>
+				<div className="">
+				<Link to="/product">
+					<img src={interior} alt="Interior" className="section-image" />
+					</Link>
+					<div className="flex bg-gray-200 translate-y-[-10px] p-3 items-start flex-col">
+						<h2 style={{color:"red"}}>Interior</h2>
+						<p>Date: 02-06-2023</p>
+						<p>Interior Design that elevate the driving experience</p>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
+export default Blog;