Added HomePage, Header, Footer and Darkmode

car-ui-react/data/db.json

@@ -128,7 +128,48 @@
       }
   ],
   "featured_products": [
-    {}
+    {
+        "carId": 4371,
+        "brand": "Ford",
+        "model": "Contour",
+        "year": 1198,
+        "color": "Teal",
+        "mileage": 70.811136,
+        "price": 1500000,
+        "quantity": 100,
+        "tax": 1.4,
+        "timestamp": "2004-10-19 10: 23: 54",
+        "poster": "https://i.pinimg.com/736x/fa/be/08/fabe082d7ca96325961ddd6019583cb7--mystique-ford-contour.jpg",
+        "in_stock": true
+    },
+    {
+        "carId": 4548,
+        "brand": "Mahindra",
+        "model": "XUV 700",
+        "year": 1950,
+        "color": "Black",
+        "mileage": 13.5465,
+        "price": 2000000,
+        "quantity": 200,
+        "tax": 1.4,
+        "timestamp": "2004-10-19 10: 23: 54",
+        "poster": "https://www.cartoq.com/wp-content/uploads/2021/09/XUV700-Dark-Knight-edition-featured.jpg",
+        "in_stock": true
+      },
+      {
+        "carId": 1556,
+        "brand": "Mahindra",
+        "model": "Scorpio N",
+        "year": 1950,
+        "color": "Black",
+        "mileage": 13.5465,
+        "price": 15000000,
+        "quantity": 200,
+        "tax": 1.4,
+        "timestamp": "2004-10-19 10: 23: 54",
+        "poster": "https://static.autox.com/uploads/2022/06/Mahindra-Scorpio-N-exterior.png",
+        "in_stock": true
+      }
   ],
   "orders": [
     {}

car-ui-react/package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "bootstrap-icons": "^1.11.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.0",

car-ui-react/src/App.js

@@ -1,17 +1,14 @@
-import './App.css';
-import { BrowserRouter as Router } from 'react-router-dom'; // Import BrowserRouter
-
-import { ProductsList } from './pages/Products/ProductsList';
-import {AllRoutes} from "./routes/AllRoutes";
+import { AllRoutes } from './routes/AllRoutes';
+import { Footer, Header } from './components';
 
 function App() {
   return (
-      <Router>
-            <div className='App'>
-                <AllRoutes/>
-            </div>
-      </Router>
+    <div className="App dark:bg-dark">
+      <Header />
+      <AllRoutes />
+      <Footer />
+    </div>
   );
 }
 
-export default App;
+export default App;

car-ui-react/src/components/Elements/ProductCard.js

@@ -1,47 +1,48 @@
 import React from 'react';
+import carPicture from "../../assets/images/10001.avif"
 
-
-export const ProductCard = ({product}) => {
-    const {carId, brand, model, year, color, mileage, price, quantity, tax, poster, in_stock} = product;
-
-  return (
-    <div className="m-3 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700">
-        <a href="/" className="relative" >
-            {/* <span className="absolute top-4 left-2 px-2 bg-orange-500 bg-opacity-90 text-white rounded">Best Seller</span>  */}
-            <img className="rounded-t-lg w-full h-64" src={poster} alt="" />
+export const ProductCard = ({ product }) => {
+    if (!product) {
+      return null; // Or handle the case where product is undefined
+    }
+    const { carId, brand, model, year, color, mileage, price, quantity, tax, poster, in_stock } = product;
+
+    return (
+      <div className="m-3 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700">
+        <a href="/" className="relative">
+          {/* <span className="absolute top-4 left-2 px-2 bg-orange-500 bg-opacity-90 text-white rounded">Best Seller</span>  */}
+          <img className="rounded-t-lg w-full h-64" src={poster} alt="" />
         </a>
         <div className="p-5">
-            <a href="/">
-                <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">{brand} {model}</h5>
-            </a>
-            <p className="mb-3 font-normal text-gray-700 dark:text-gray-400">{color}</p>
-
-            <p className="mb-3 font-normal text-black dark:text-gray-400">
-                <span>mileage: </span><span>{mileage}</span>
-            </p>
-            <p className="mb-3 font-normal text-black dark:text-gray-400">
-                <span>quantity: </span><span>{quantity}</span>
-            </p>
-            <p className="mb-3 font-normal text-black dark:text-gray-400">
-                <span>tax: </span><span>{tax}</span>
-            </p>
-
-            <div className="flex items-center my-2">
-                <i className="text-lg bi bi-star-fill text-yellow-500 mr-1">{in_stock}</i>
-                <i className="text-lg bi bi-star-fill text-yellow-500 mr-1"></i>
-                <i className="text-lg bi bi-star-fill text-yellow-500 mr-1"></i>
-                <i className="text-lg bi bi-star-fill text-yellow-500 mr-1"></i>
-                <i className="text-lg bi bi-star-fill text-yellow-500 mr-1"></i>
-            </div>
-
-            <p className="flex justify-between items-center">
-                <span className="text-2xl dark:text-gray-200">
-                    <span>INR </span><span>{price}</span>
-                </span>
-                {/* <button className="inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800"/> */}
-                <button className='inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800'>Add To Cart +</button>
-            </p>
+          <a href="/">
+            <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">{brand} {model}</h5>
+          </a>
+          <p className="mb-3 font-normal text-gray-700 dark:text-gray-400">{color}</p>
+
+          <p className="mb-3 font-normal text-black dark:text-gray-400">
+            <span>Year: </span><span>{year}</span>
+          </p>
+          <p className="mb-3 font-normal text-black dark:text-gray-400">
+            <span>Mileage: </span><span>{mileage}</span>
+          </p>
+          <p className="mb-3 font-normal text-black dark:text-gray-400">
+            <span>Quantity: </span><span>{quantity}</span>
+          </p>
+          <p className="mb-3 font-normal text-black dark:text-gray-400">
+            <span>Tax: </span><span>{tax}</span>
+          </p>
+
+          <div className="flex items-center my-2">
+            <i className="text-lg bi bi-star-fill text-yellow-500 mr-1">{in_stock}</i>
+          </div>
+
+          <p className="flex justify-between items-center">
+            <span className="text-2xl dark:text-gray-200">
+              <span>INR </span><span>{price}</span>
+            </span>
+            <button className='inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800'>Add To Cart +</button>
+          </p>
         </div>
-    </div>
-  )
-}
+      </div>
+    );
+  };

car-ui-react/src/components/Layout/Header.js

@@ -0,0 +1,40 @@
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import Logo from "../../assets/logo.png";
+
+export const Header = () => {
+  const [darkMode, setDarkMode] = useState(JSON.parse(localStorage.getItem("darkMode")) || false);
+
+  useEffect(() => {
+    localStorage.setItem("darkMode", JSON.stringify(darkMode));
+
+    if(darkMode){
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
+  }, [darkMode]);
+
+  return (
+    <header>      
+      <nav className="bg-white dark:bg-gray-900">
+          <div className="border-b border-slate-200 dark:border-b-0 flex flex-wrap justify-between items-center mx-auto max-w-screen-xl px-4 md:px-6 py-3">
+              <Link to="/" className="flex items-center">
+                  <img src={Logo} className="mr-3 h-10" alt="CodeBook Logo" />
+                  <span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">NashtechAutoMarket</span>
+              </Link>
+              <div className="flex items-center relative">
+                  <span onClick={() => setDarkMode(!darkMode)} className="cursor-pointer text-xl text-gray-700 dark:text-white mr-5 bi bi-gear-wide-connected"></span>
+                  <span className="cursor-pointer text-xl text-gray-700 dark:text-white mr-5 bi bi-search"></span>
+                  <Link to="/cart" className="text-gray-700 dark:text-white mr-5">
+                    <span className="text-2xl bi bi-cart-fill relative">
+                      <span className="text-white text-sm absolute -top-1 left-2.5 bg-rose-500 px-1 rounded-full ">0</span>
+                    </span>                    
+                  </Link>
+                  <span className="bi bi-person-circle cursor-pointer text-2xl text-gray-700 dark:text-white"></span>
+              </div>
+          </div>
+      </nav>
+    </header>
+  )
+}

car-ui-react/src/components/index.js

@@ -0,0 +1,3 @@
+export { Header } from "./Layout/Header"
+export { Footer } from "./Layout/Footer"
+export { ProductCard } from "./Elements/ProductCard"

car-ui-react/src/index.css

@@ -1,3 +1,16 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");
+
+* {
+    font-family: 'Roboto', sans-serif;
+}
+
+main {
+    min-height: 90vh;
+    max-width: 1280px;
+    margin: auto;
+    padding: 15px;
+}

car-ui-react/src/index.js

@@ -1,12 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { BrowserRouter as Router } from 'react-router-dom';
 import './index.css';
 import App from './App';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <Router>
+      <App />
+    </Router>
   </React.StrictMode>
 );
 

car-ui-react/src/pages/Home/Components/Accordion.js

@@ -0,0 +1,25 @@
+import { useState } from "react";
+
+export const Accordion = ({faq}) => {
+    const {question, answer} = faq;
+    const [show, setShow] = useState(false);
+
+    return (
+        <div>
+            <h2 id="accordion-flush-heading-1">
+                <button onClick={() => setShow(!show)} type="button" className="text-lg flex items-center justify-between w-full py-5 font-medium text-left text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400" data-accordion-target="#accordion-flush-body-1" aria-expanded="true" aria-controls="accordion-flush-body-1">
+                    <span className="text-xl text-slate-900 dark:text-white">{question}</span>
+                    { !show && <svg data-accordion-icon className="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd"></path></svg> }
+                    { show && <svg data-accordion-icon className="rotate-180 w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd"></path></svg> } 
+                </button>
+            </h2>     
+            { show && (
+                <div id="accordion-flush-body-1" className="" aria-labelledby="accordion-flush-heading-1">
+                    <div className="py-5 border-b border-gray-200 dark:border-gray-700">
+                        <p className="text-lg mb-2 text-gray-500 dark:text-gray-400">{answer}</p>
+                    </div>
+                </div> 
+            ) }                           
+        </div>
+    )
+}

car-ui-react/src/pages/Home/Components/Faqs.js

@@ -0,0 +1,37 @@
+import { Accordion } from "./Accordion";
+
+export const Faq = () => {
+    const faqs = [
+        {
+          "id": 1,
+          "question": "Why should I use NashtechAutoMarket?",
+          "answer": "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus earum dicta nesciunt, nulla alias consequuntur cumque incidunt saepe mollitia esse! Magni praesentium delectus excepturi nostrum illo repellendus cum eius neque, aperiam dolores quaerat quis dolore magnam doloremque minus sint nemo qui necessitatibus at. Perspiciatis, corrupti cum labore quos odio porro!"
+        },
+        {
+          "id": 2,
+          "question": "Can I access my orders ?",
+          "answer": "Lorem ipsum dolor sit amet consectetur adipisicing elit. At accusamus nobis tempore perferendis qui, quam, atque reprehenderit vero quaerat, assumenda pariatur eveniet. Maxime eaque, neque corrupti ad minus repudiandae consectetur!"
+        },
+        {
+          "id": 3,
+          "question": "Do you offer refunds?",
+          "answer": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse iste dolor deserunt expedita quam fugit et inventore amet pariatur. Animi."
+        },
+        {
+          "id": 4,
+          "question": "Do you support Internation payments?",
+          "answer": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse iste dolor deserunt expedita quam fugit et inventore amet pariatur. Animi."
+        }
+    ];
+
+  return (
+    <section className="my-10 p-7 border rounded dark:border-slate-700 shadow-sm">        
+      <h1 className="text-2xl text-center font-semibold dark:text-slate-100 mb-3 underline underline-offset-8">Question in mind?</h1>    
+            <div className="" id="accordion-flush" data-accordion="collapse" data-active-classes="bg-white dark:bg-gray-900 text-gray-900 dark:text-white" data-inactive-classes="text-gray-500 dark:text-gray-400">
+              { faqs.map((faq) => (
+                <Accordion key={faq.id} faq={faq} /> 
+              )) }
+            </div>
+      </section>
+  )
+}