Create search product page

client/src/App.jsx

@@ -3,11 +3,13 @@ import Home from "./pages/Home"
 import Layout from "./components/Layout"
 import Profile from "./pages/Profile"
 import TreePlantation, {action as treePlantationAction} from "./pages/TreePlantation"
+import SearchProduct from "./pages/SearchProduct"
 
 const router = createBrowserRouter(createRoutesFromElements(
   <Route path="/" element={<Layout />}>
     <Route index element={<Home />} />
     <Route path="/profile" element={<Profile />} />
+    <Route path="/search-product" element={<SearchProduct />} />
     <Route action={treePlantationAction} path="/tree-plantation" element={<TreePlantation />} />
   </Route>
 ))

client/src/components/home/Part2.jsx

@@ -1,4 +1,5 @@
 import rrr from '../../assets/RRR.png';
+import { Link } from "react-router-dom"
 
 const Part2 = () => {
   return (
@@ -12,9 +13,9 @@ const Part2 = () => {
               responsibly using the RRR (Reduce, Reuse, and Recycle) principles
             </p>
             <div className='flex justify-center'>
-              <a
+              <Link 
+                to="/search-product"
                 className='group relative inline-flex items-center overflow-hidden rounded bg-green-600 px-8 py-3 text-white focus:outline-none focus:ring active:bg-indigo-500'
-                href='/download'
               >
                 <span className='absolute -end-full transition-all group-hover:end-4'>
                   <svg
@@ -29,7 +30,7 @@ const Part2 = () => {
                 </span>
 
                 <span className='text-sm font-medium transition-all group-hover:me-4'>Explore</span>
-              </a>
+              </Link>
             </div>
           </div>
           <div className='lg:max-w-sm lg:w-full md:w-1/2 w-5/6'>

client/src/pages/SearchProduct.jsx

@@ -0,0 +1,53 @@
+import { useState } from "react"
+import searchImg from "../assets/searchProduct.webp"
+
+const SearchProduct = () => {
+    const [query, setQuery] = useState("")
+
+    function handleChange(e) {
+        setQuery(e.target.value)
+    }
+
+    function formatQuery() {
+        let tempQuery = query;
+        tempQuery = tempQuery.trim(); // Add more formatting as per requirement
+        setQuery(tempQuery)
+    }
+
+    function getResult() {
+        formatQuery()
+        // TODO
+    }
+
+    return (
+        <div
+            className="bg-slate-300 flex justify-center items-center flex-col min-h-screen"
+        >
+            <div
+                className=" flex justify-center items-center md:flex md:flex-col md:gap-4 md:items-start"
+            >
+                <input
+                    type="text"
+                    value={query}
+                    onChange={handleChange}
+                    placeholder="Enter Product Name"
+                    className="rrr_input p-5 text-3xl w-[90vw] max-w-[600px] rounded-3xl mr-5 md:p-3 md:w-[85vw] md:text-xl md:mr-0"
+                />
+                <button
+                    onClick={getResult}
+                    className=" p-5 text-3xl cursor-pointer rounded-xl font-semibold bg-blue-500 text-white border-none transition-transform duration-200 hover:opacity-60 active:scale-125 md:text-xl md:p-3 md:px-6"
+                >
+                    Search
+                </button>
+            </div>
+
+            <img
+                src={searchImg}
+                alt="search lens"
+                className="rrr_bg_img mt-16 w-72 opacity-60"
+            />
+        </div>
+    )
+}
+
+export default SearchProduct