Revamp: Project Section page

Technodes/src/App.jsx

@@ -7,7 +7,7 @@ import Error from "./Pages/Error";
 import Navbar from "./components/Navbar";
 import Event from "./Pages/EventPage/Event"
 import Contact from "./Pages/Contact";
-
+import ProjectPage from "./Pages/ProjectPage/ProjectPage";
 export default function App() {
   return (
     <div className="scrollbar-w-0">
@@ -16,7 +16,7 @@ export default function App() {
         <div className="pt-5">
         <Routes>
           <Route path="/" element={<Home />}></Route>
-          <Route path="/Projects" element={<Projects />}></Route>
+          <Route path="/Projects" element={<ProjectPage />}></Route>
           <Route path="/Event" element={<Event />}></Route>
           <Route path="/Team" element={<Team />}></Route>
           <Route path="/Contact" element={<Contact />}></Route>

Technodes/src/Pages/EventPage/Event.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import HeroSection from '../../components/core/Eventpage/Herosection'
+import HeroSection from '../../components/core/Eventpage/HeroSection'
 import EventCards from '../../components/core/Eventpage/EventCards'
 import NewsLetter  from "../../components/NewsLetter"
 import Footer  from "../../components/Footer"

Technodes/src/Pages/ProjectPage/ProjectPage.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import HeroSection from '../../components/core/ProjectSection/HeroSection'
+import EventSection from '../../components/core/ProjectSection/ProjectCards'
+
+
+export default function ProjectPage() {
+  return (
+    <div>
+        <HeroSection/>
+        <EventSection/>
+    </div>
+  )
+}

Technodes/src/components/core/ProjectSection/HeroSection.jsx

@@ -0,0 +1,41 @@
+import React from "react";
+
+export default function HeroSection() {
+  return (
+    <div>
+      <section className="flex h-screen items-center justify-center text-center">
+        <div className="layout max-w-4xl">
+          <h1 className="heading">Projects </h1>
+          <h2 className="h3 my-5 font-medium text-content">
+          Looking for an open-source Projects and Want to Contribute in Open source ? You're just a click away. Find all the Projects right here!
+          </h2>
+          <div className="mt-5 flex items-center justify-center gap-x-6">
+            <a
+              href="#_"
+              className="relative inline-flex items-center px-12 py-3 overflow-hidden text-lg font-medium text-indigo-600 border-2 border-indigo-600 rounded-full hover:text-white group hover:bg-gray-50"
+            >
+              <span className="absolute left-0 block w-full h-0 transition-all bg-indigo-600 opacity-100 group-hover:h-full top-1/2 group-hover:top-0 duration-400 ease"></span>
+              <span className="absolute right-0 flex items-center justify-start w-10 h-10 duration-300 transform translate-x-full group-hover:translate-x-0 ease">
+                <svg
+                  className="w-5 h-5"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M14 5l7 7m0 0l-7 7m7-7H3"
+                  ></path>
+                </svg>
+              </span>
+              <span className="relative">Learn More </span>
+            </a>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}

Technodes/src/components/core/ProjectSection/ProjectCard.jsx

@@ -0,0 +1,45 @@
+import { FaGithub } from "react-icons/fa";
+import ProjectCards from "./ProjectCards";
+
+const ProjectCard = ({ image, title, description, url, btnText, git , deploylink}) => {
+  return (
+    <>
+      <div className="overflow-hidden rounded-2xl bg-content/5 p-4 bg-[#181a1e]">
+        <img
+          src={image}
+          className="aspect-video w-full rounded-lg object-cover object-center sm:mb-0"
+          alt={title + "banner"}
+        />
+        <div className="pt-6 pb-3">
+          <h3>{title}</h3>
+          <p className="mt-2">{description}</p>
+          <div className="mt-4 flex gap-2">
+            <a
+              href={url}
+              className="inline-flex items-center justify-center w-full px-6 py-3 mb-2 text-lg text-white bg-secondary rounded-md  sm:w-auto sm:mb-0"
+              data-primary="green-400"
+              data-rounded="rounded-2xl"
+              data-primary-reset="{}"
+            >
+              Get Started
+              <svg
+                className="w-4 h-4 ml-1"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+              >
+                <path
+                  fill-rule="evenodd"
+                  d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+                  clip-rule="evenodd"
+                ></path>
+              </svg>
+            </a>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default ProjectCard;

Technodes/src/components/core/ProjectSection/ProjectCards.jsx

@@ -0,0 +1,80 @@
+import React, { useState } from "react";
+import ProjectCard from "./ProjectCard";
+
+const eventsData2 = [
+  {
+    title: "ElectiveHub",
+    description:
+      "ElectiveHub is an Education Management System designed to simplify and enhance the management of student information and elective subject selection in educational institutions. It offers a suite of applications for students, teachers, and administrators, providing a user-friendly platform.",
+    image:
+      "https://images.unsplash.com/photo-1524578271613-d550eacf6090?auto=format&fit=crop&q=60&w=500&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTZ8fEJvb2tzfGVufDB8fDB8fHww",
+    url: "https://github.com/TechNodes2-0/ElectiveHub",
+    btnText: "Know more",
+  },
+  {
+    title: "BioDrop",
+    description:
+      "Connect to your audience with a single link. Showcase the content you create and your projects in one place. Make it easier for people to find, follow and subscribe.",
+    image:
+      "https://user-images.githubusercontent.com/624760/230707268-1f8f1487-6524-4c89-aae2-ab45f0e17f39.png",
+    url: "https://github.com/EddieHubCommunity/BioDrop",
+    btnText: "Know more",
+  },
+  // Add more project data here if needed
+];
+
+export default function ProjectCards() {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [sortOrder, setSortOrder] = useState("asc"); // You can use 'asc' or 'desc'
+
+  const filteredProjects = eventsData2.filter((project) =>
+    project.title.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const sortedProjects = filteredProjects.sort((a, b) => {
+    if (sortOrder === "asc") {
+      return a.title.localeCompare(b.title);
+    } else {
+      return b.title.localeCompare(a.title);
+    }
+  });
+
+  return (
+    <section id="events" className="bg-[#293140]">
+      <div className="layout py-20">
+        <h1 className="h1">Projects</h1>
+        <hr className="styled-hr my-6" />
+        <div className="mb-6 text-center">
+          <div className="relative mb-4 w-full flex flex-row items-stretch">
+            <input
+              type="search"
+              className="border rounded-l px-3 py-1 text-base text-black focus:outline-none w-full"
+              placeholder="Search"
+              aria-label="Search"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+            <button
+              className="rounded-r border-2 border-secondary px-6 py-2 text-white font-medium uppercase text-base transition duration-150 ease-in-out hover:bg-secondary hover:bg-opacity-75 focus:outline-none focus:ring-0"
+              type="button"
+              id="button-addon3"
+              data-te-ripple-init
+            >
+              Search
+            </button>
+          </div>
+        </div>
+        <div className="w-full space-y-6">
+          <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+            {sortedProjects.map((project) => (
+              <ProjectCard {...project} key={project.image} />
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+
+