Shop upgraded

package.json

@@ -13,6 +13,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@material-tailwind/react": "^2.1.5",
+    "jquery": "^3.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.20.1",
@@ -21,6 +22,7 @@
     "slick-carousel": "^1.8.1"
   },
   "devDependencies": {
+    "@types/jquery": "^3.5.29",
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
     "@vitejs/plugin-react": "^4.2.0",

src/Components/ERROR/Page404.css

@@ -0,0 +1,48 @@
+@keyframes el1Move {
+  0% {
+    top: 108px;
+    left: 102px;
+    opacity: 1;
+  }
+  100% {
+    top: -10px;
+    left: 22px;
+    opacity: 0;
+  }
+}
+@keyframes el2Move {
+  0% {
+    top: 92px;
+    left: 136px;
+    opacity: 1;
+  }
+  100% {
+    top: -10px;
+    left: 108px;
+    opacity: 0;
+  }
+}
+@keyframes el3Move {
+  0% {
+    top: 108px;
+    left: 180px;
+    opacity: 1;
+  }
+  100% {
+    top: 28px;
+    left: 276px;
+    opacity: 0;
+  }
+}
+
+.animate-el1 {
+  animation: el1Move 800ms linear infinite;
+}
+
+.animate-el2 {
+  animation: el2Move 800ms linear infinite;
+}
+
+.animate-el3 {
+  animation: el3Move 800ms linear infinite;
+}

src/Components/ERROR/Page404.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import './Page404.css'
+
+const Page404 = () => {
+  return (
+    <main className="bg-blue-900 py-8 flex flex-col items-center justify-center text-white font-sans font-Rubik">
+      <h1 className="text-3xl md:text-5xl mb-8 uppercase">Error 404. The page does not exist</h1>
+      <p className="max-w-lg mb-8">Sorry! The page you are looking for cannot be found. Perhaps the page you requested was moved or deleted. It is also possible that you made a small typo when entering the address. Go to the main page.</p>
+      <div className="relative w-full max-w-md flex justify-center items-center">
+        <img src="https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/404/bigBoom/cloud_warmcasino.png?raw=true" alt="cloud_warmcasino.png" className="w-2/3 " />
+        <div className="absolute top-12 left-16 animate-el1">
+          <img src="https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/404/bigBoom/404-1.png?raw=true" alt="404-1" className="w-24 h-32" />
+        </div>
+        <div className="absolute top-10 left-32 animate-el2">
+          <img src="https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/404/bigBoom/404-2.png?raw=true" alt="404-2" className="w-40 h-28" />
+        </div>
+        <div className="absolute top-12 left-44 animate-el3">
+          <img src="https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/404/bigBoom/404-3.png?raw=true" alt="404-3" className="w-52 h-32" />
+        </div>
+      </div>
+      <a href="/" className="bg-orange-500 text-white px-6 py-3 rounded-full text-md uppercase mt-8 hover:bg-orange-600 transition-colors duration-300 ease-in-out">Go Home</a>
+    </main>
+  );
+}
+
+export default Page404;

src/Components/HomeComponent/Navbar/DropdownIfLoggedIn.jsx

@@ -10,3 +10,4 @@ function DropdownIfLoggedIn() {
 }
 
 export default DropdownIfLoggedIn;
+

src/Components/Sell/FarmarInputForm.jsx

@@ -8,10 +8,11 @@ const FarmerInputForm = () => {
     const [price, setPrice] = useState("");
     const [image, setImage] = useState(null);
     const [block, setBlock] = useState("");
+    const [category, setCategory] = useState("");
     const [errorMessage, setErrorMessage] = useState("");
 
     const handleSubmit = (e) => {
-        e.preventDefault();
+        // e.preventDefault();
         if (!image) {
             setErrorMessage("Please select an image.");
             return;
@@ -69,6 +70,31 @@ const FarmerInputForm = () => {
                             required
                         />
                     </div>
+                    <div className="mb-4">
+                        <label
+                            className="block text-gray-700 text-sm font-bold mb-2"
+                            htmlFor="category"
+                        >
+                            Item category
+                        </label>
+                        <select
+                            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                            value={category}
+                            onChange={(e) => setCategory(e.target.value)}
+                            required
+                        >
+                            <option value="">Select Category</option>
+                            <option value="Rice">Rice</option>
+                            <option value="Wheat">Wheat</option>
+                            <option value="Nuts">Nuts</option>
+                            <option value="Suger">Suger</option>
+                            <option value="Spices">Spices</option>
+                            <option value="Fruits">Fruits</option>
+                            <option value="Vegetables">Vegetables</option>
+                            <option value="Pulses">Pulses</option>
+                        </select>
+
+                    </div>
                     <div className="mb-4">
                         <label
                             className="block text-gray-700 text-sm font-bold mb-2"

src/Components/Shop/FoodGrid.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import RiceImage from '../../assets/Rice.jpeg';
+import WheatImage from '../../assets/Wheat.jpeg';
+import NutsImage from '../../assets/Nuts.jpeg';
+import SugarImage from '../../assets/Suger.jpeg';
+import SpicesImage from '../../assets/Spices.jpg';
+import FruitsImage from '../../assets/Fruits.jpeg';
+import VegetablesImage from '../../assets/Vegitablee.jpeg';
+import PulsesImage from '../../assets/Pulses.jpeg';
+import { Link } from 'react-router-dom';
+
+
+const onClick = () => {
+    console.log('Image clicked!');
+};
+
+
+function CategoryCard({ backgroundImage, categoryName, to }) {
+    return (
+        <div className="relative hover:scale-105 cursor-pointer">
+            <Link to={to} onClick={onClick} className="block w-full h-full">
+                <div className="bg-cover bg-no-repeat rounded-lg overflow-hidden hover:shadow-xl" style={{ backgroundImage, width: '100%', height: '100%' }}>
+                    <div className="absolute inset-0 bg-black opacity-30 rounded-lg"></div>
+                    <p className="absolute bottom-0 left-0 px-4 py-2 font-medium text-white text-lg z-10">{categoryName}</p>
+
+                </div> 
+            </Link>
+        </div>
+    );
+}
+
+function FoodGrid() {
+    return (
+        <div className="flex flex-col w-full font-Rubik">
+            <div className="rounded-lg px-4 py-1 text-center text-[2.5rem]">
+                <p className="font-medium">Categories</p>
+            </div>
+            <div className="grid grid-cols-4 gap-4 p-4 min-h-[70vh]">
+                <CategoryCard backgroundImage={`url(${RiceImage})`} categoryName="Rice" to={'Rice'} />
+                <CategoryCard backgroundImage={`url(${WheatImage})`} categoryName="Wheat" to={'Wheat'} />
+                <CategoryCard backgroundImage={`url(${NutsImage})`} categoryName="Nuts" to={'Nuts'} />
+                <CategoryCard backgroundImage={`url(${SugarImage})`} categoryName="Sugar" to={'Sugar'} />
+                <CategoryCard backgroundImage={`url(${SpicesImage})`} categoryName="Spices" to={'Spices'} />
+                <CategoryCard backgroundImage={`url(${FruitsImage})`} categoryName="Fruits" to={'Rice'} />
+                <CategoryCard backgroundImage={`url(${VegetablesImage})`} categoryName="Vegetables" to={'Vegetables'} />
+                <CategoryCard backgroundImage={`url(${PulsesImage})`} categoryName="Pulses" to={'Pulses'} />
+            </div>
+        </div>
+    );
+}
+
+export default FoodGrid;

src/Components/Shop/Shop.jsx

@@ -1,8 +1,10 @@
 import React from 'react'
+import FoodGrid from './FoodGrid';
 
 function Shop() {
     return (
-        <div className='font-Rubik text-3xl font-bold min-h-screen flex items-center justify-center w-full'>UNDER CONSTRUCTION</div>
+        // <div className='font-Rubik text-3xl font-bold min-h-screen flex items-center justify-center w-full'>UNDER CONSTRUCTION</div>
+        <FoodGrid/>
     )
 }
 

src/main.jsx

@@ -8,18 +8,20 @@ import AboutUs from './Components/AboutUsComponent/AboutUs/AboutUs.jsx'
 import Sell from './Components/Sell/Sell.jsx'
 import Contact from './Components/Contactsomponent/Contact.jsx'
 import Shop from './Components/Shop/Shop.jsx'
+import Page404 from './Components/ERROR/Page404.jsx'
 
 
 
 const router = createBrowserRouter(
   createRoutesFromElements(
     <Route path='/' element={<App/>}>
-      <Route path='' element={<Home />}/>
+      <Route path='' element={<Home />}/> 
       <Route path='about-us' element={<AboutUs/>}/>
       <Route path='shop' element={<Shop/>}/>
       <Route path='sell' element={<Sell/>}/>
       <Route path='contact-us' element={<Contact/>}/>
-    </Route>
+      <Route path='*' element={<Page404/>}/>
+    </Route> 
   )
 )