feat:project page cards implemented

src/App.jsx

@@ -3,7 +3,7 @@ import { Route,Routes } from "react-router-dom";
 import { Footer } from "./components/Footer";
 import Header from "./components/Header";
 import Home from "./routes/Home";
-import Projects from "./routes/Projects";
+import Projects from "./components/Projects";
 
 const App = () => {
   return (

src/components/ProjectCard.jsx

@@ -0,0 +1,68 @@
+import React from "react";
+
+const ProjectCard = () => {
+  return (
+    <div className="card w-80 sm:w-96 h-fit flex flex-col border-1 rounded-lg overflow-hidden px-2 py-4 hover:scale-105 transition duration-300 bg-gradient-to-t from-[#654b0e] via-[#947511] to-[#ebd812] shadow-xl">
+      <a href="https://hacktoberfestprojectshub.netlify.app/" target="_blank">
+        <div className="header flex flex-row gap-2 items-center px-2 pb-2 w-full border-b-2">
+          <div className="relative border rounded-full w-16 h-16 p-1 flex items-center justify-center overflow-hidden">
+            <img
+              src="/card_logo.png"
+              alt="logo"
+              className="relative rounded-full w-16 h-16 object-cover p-1"
+            />
+          </div>
+          <p className="relative font-semibold text-xl hover:text-white transition duration-300 hover:underline">
+            hack-it-up
+          </p>
+        </div>
+      </a>
+
+      <div className="description w-full text-left px-2 my-1 mt-4 text-lg">
+        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quibusdam
+        itaque a laudantium enim repudiandae iste.
+      </div>
+
+      <div className="tech-stack flex flex-row flex-wrap gap-2 px-2 w-full mt-4 mb-8">
+        <div className="relative bg-sky-600 rounded-2xl px-3 py-1 text-white cursor-pointer">
+          hacktoberfest
+        </div>
+        <div className="relative bg-sky-600 rounded-2xl px-3 py-1 text-white cursor-pointer">
+          http-client
+        </div>
+        <div className="relative bg-sky-600 rounded-2xl px-3 py-1 text-white cursor-pointer">
+          javascript
+        </div>
+        <div className="relative bg-sky-600 rounded-2xl px-3 py-1 text-white cursor-pointer">
+          nodejs
+        </div>
+        <div className="relative bg-sky-600 rounded-2xl px-3 py-1 text-white cursor-pointer">
+          promise
+        </div>
+      </div>
+
+      <div className="card-footer flex flex-row justify-center items-center gap-10 mt-2">
+        <div className="border rounded-lg w-5/12 h-20 flex flex-row gap-1 items-center px-2">
+          <div className="logo w-1/4 rounded-full">
+            <img src="/star2.png" alt="star" className="relative" />
+          </div>
+          <div className="w-1/2">
+            <p className="font-semibold text-xl">10000</p>
+            <p>stars</p>
+          </div>
+        </div>
+        <div className="border rounded-lg w-5/12 h-20 flex flex-row gap-1 items-center px-2">
+          <div className="logo w-1/4 rounded-full">
+            <img src="/radio2.png" alt="issue" className="relative" />
+          </div>
+          <div className="w-1/2">
+            <p className="font-semibold text-xl">560</p>
+            <p>issues</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProjectCard;

src/components/Projects.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import ProjectCard from "./ProjectCard";
+
+const Projects = () => {
+  return (
+    <section className="py-28 px-4 sm:px-36 text-center">
+      {/* search bar */}
+
+      {/* add your project */}
+
+      {/* Project card */}
+      <div className="card__container py-4 grid lg:grid-cols-3 gap-10 place-items-center">
+        <ProjectCard />
+        <ProjectCard />
+        <ProjectCard />
+        <ProjectCard />
+        <ProjectCard />
+      </div>
+
+      {/* back to top */}
+    </section>
+  );
+};
+
+export default Projects;

src/routes/Projects.jsx

@@ -1,7 +1,5 @@
-import React from 'react'
+import React from "react";
 
 export default function Projects() {
-  return (
-    <div className='py-28 text-center text-4xl'>Projects</div>
-  )
+  return <div className="py-28 text-center text-4xl">Projects</div>;
 }