Merge pull request #85 from shuvadeepmondal/shuvadeep

Closes #83

apps/frontend/src/App.tsx

@@ -14,6 +14,8 @@ import Contact from "./components/ui/Contact";
 import { useAuthContext } from "./hooks/useAuthContext";
 import VerifiedPage from "./components/auth/VerifiedPage";
 import Offer from "./components/offer request/Offer-request";
+import Hiring from "./components/hiring/Hired";
+
 
 function App() {
   const { state } = useAuthContext();
@@ -34,6 +36,7 @@ function App() {
           <Route path="/feeds" element={isProfileComplete ? <Feed /> : <Navigate to="/profile" />} />
           <Route path="/contact" element={isProfileComplete ? <Contact /> : <Navigate to="/profile" />} />
           <Route path="/offer-request" element={isProfileComplete ? <Offer /> : <Navigate to="/profile" />} />
+          <Route path="/hiring" element={<Hiring/>} />
         </Routes>
       </ThemeProvider>
       <Footer />

apps/frontend/src/components/hiring/Appoitment.tsx

@@ -0,0 +1,7 @@
+export default function Appoitment() {
+  return (
+    <div>
+
+    </div>
+  )
+}

apps/frontend/src/components/hiring/Hired.tsx

@@ -0,0 +1,21 @@
+import Searchbar from "./Search"
+// import Appoitment from "./Appoitment"
+
+
+export default function hired() {
+  return (
+    <div className=" pt-14 mt-[100px] lg:mt-0 lg:pt-32 bg-[url('https://pagedone.io/asset/uploads/1691055810.png')] dark:bg-slate-900  bg-cover">
+        <div className="">
+            <Searchbar/>
+        </div>
+        <div>
+
+        </div>
+    </div>
+  )
+}
+
+
+
+
+

apps/frontend/src/components/hiring/Search.tsx

@@ -0,0 +1,63 @@
+import Card from "./card"
+
+export default function Search() {
+  return (
+    <div className="h-[1000px] mt-[3vh]">
+      <div className="max-w-screen-xl flex flex-wrap items-center justify-center mx-auto ">
+      <div className="text-center mb-8 ">
+        <h1 className="text-5xl text-slate-800 font-bold mb-2">Hire a Skilled<span className="text-blue-500"> Member </span></h1>
+        <p className="text-gray-600 mt-5">
+          Search for workers by name, specialty, or condition
+          from our comprehensive list of experts.
+        </p>
+      </div>
+      <div className="mt-10 bg-blue-400 text-white px-8 py-5 rounded-3xl shadow-2xl w-full max-w-4xl ">
+        <div className="flex flex-col md:flex-row items-center md:space-x-4">
+          <div className="flex-1 mb-4 md:mb-0">
+            <label className="block mb-2">Select Area</label>
+            <select className="w-full p-2 rounded-2xl bg-white text-gray-800">
+              <option>Golapbag</option>
+              <option>Kanchannagar</option>
+              <option>BadamTala</option>
+              <option>Borehat</option>
+            </select>
+          </div>
+          <div className="flex-1 mb-4 md:mb-0">
+            <label className="block mb-2">Select Date</label>
+            <input
+              type="date"
+              className="w-full p-2 rounded-2xl bg-white text-gray-800"
+            />
+          </div>
+          <div className="flex-1 mb-4 md:mb-0">
+            <label className="block mb-2">Search Worker by</label>
+            <input
+              type="text"
+              placeholder="Type of Worker You Need"
+              className="w-full p-2 rounded-2xl bg-white text-gray-800"
+            />
+          </div>
+          <button className=" mt-6 w-[100px] active:scale-[.98] active:duration-75 hover:scale-[1.01] ease-in-out transition-all p-2.5 rounded-3xl bg-gradient-to-r from-blue-700 to-blue-500 text-white text-lg font-semibold">
+            Search
+          </button>
+        </div>
+      </div>
+
+      </div>
+
+      <div className="max-w-screen-xl flex flex-wrap items-center justify-center mx-auto mt-[20vh]">
+        <h1 className="text-5xl text-slate-900 font-bold ">Expert <span className="text-blue-600">Members</span> Nationwide</h1>
+        <p className="text-gray-600 mt-10">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora ipsa fuga aperiam laboriosam maxime a maiores sapiente nostrum cumque sit voluptas illum, quis deleniti nobis, ducimus cum tempore quasi repellendus.</p>
+        <div className="max-w-screen-xl flex gap-5 justify-between mx-auto mt-[10vh] ">
+        <Card/>
+        <Card/>
+        <Card/>
+        <Card/>
+        <Card/>
+      </div>
+
+      </div>
+
+    </div>
+  )
+}

apps/frontend/src/components/hiring/card.tsx

@@ -0,0 +1,36 @@
+// src/components/CancerCareCard.js
+
+import { useState } from 'react';
+
+const CancerCareCard = () => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  return (
+    <div
+      className={`p-6 rounded-lg shadow-md transform transition-all duration-300 ${
+        isHovered ? 'bg-gradient-to-r from-blue-700 to-blue-500 text-white' : 'bg-white text-blue-600'
+      }`}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <div className="flex flex-col items-center">
+        <div className=" w-12 h-12 mb-4">
+        </div>
+        <h2 className="text-2xl font-bold mb-4">Carpentor</h2>
+        <p className={`text-center ${isHovered ? 'text-white' : 'text-gray-700'}`}>
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eum ipsum voluptate fuga dolore dolor distinctio molestiae tenetur quisquam incidunt ex?
+        </p>
+        <a
+          href="#"
+          className={`mt-4 inline-block text-sm font-semibold underline ${
+            isHovered ? 'text-white' : 'text-blue-600'
+          }`}
+        >
+          Read More →
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default CancerCareCard;