various changes

src/app/dsas/page.tsx

@@ -46,7 +46,7 @@ const DSAPage: React.FC = () => {
   };
 
   return (
-    <div className="min-h-screen bg-gray-100 dark:bg-gray-900">
+    <div className="min-h-screen">
       <div className="container mx-auto px-4 py-12">
         <h1 className="text-4xl font-bold mb-8 text-center text-gray-800 dark:text-white">
           Data Structures in Rust
@@ -72,7 +72,7 @@ const DSAPage: React.FC = () => {
           {filteredDSAs.map((dsa, index) => (
             <div
               key={index}
-              className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg transition duration-300 hover:shadow-xl hover:scale-105"
+              className="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-lg transition duration-300 hover:shadow-xl hover:scale-105"
             >
               <div className="flex flex-col items-center text-center">
                 <h3 className="text-2xl font-semibold mb-3 text-gray-800 dark:text-white">

src/app/page.tsx

@@ -48,24 +48,6 @@ export default function Home() {
           Preorder the Rust Book Now!
         </a>
       </div>
-      <div id='books' className='min-h-dvh'>
-        <Books />
-      </div>
-      <div id='dev_tools' className='min-h-dvh'>
-        <DevToolsSection />
-      </div>
-      <div id='lessons' className='min-h-dvh'>
-        <LessonSection />
-      </div>
-      <div id='people' className='min-h-dvh'>
-        <PeopleSection />
-      </div>
-      <div id='dsas' className='min-h-dvh'>
-        <DSAToolSection />
-      </div>
-      <div id='projects' className='min-h-dvh'>
-        <ProjectsSection />
-      </div>
     </main>
   );
 }

src/app/people/page.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import React, { useState } from "react";
+import { Search } from "lucide-react";
+import { people } from "@/data/people";
+import Image from "next/image";
+import Link from "next/link";
+import { FaGithub } from "react-icons/fa";
+
+export default function People() {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [filteredPeople, setFilteredPeople] = useState(people);
+
+  const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const term = event.target.value.toLowerCase();
+    setSearchTerm(term);
+    const filtered = people.filter(
+      (people) =>
+        people.name.toLowerCase().includes(term) ||
+        people.description.toLowerCase().includes(term),
+    );
+    setFilteredPeople(filtered);
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-100 dark:bg-black">
+      <div className="container mx-auto px-4 py-12">
+        <h1 className="text-4xl font-bold mb-8 text-center text-gray-800 dark:text-white">
+          People's
+        </h1>
+
+        <div className="mb-8 max-w-md mx-auto">
+          <div className="relative">
+            <input
+              type="text"
+              placeholder="Search people..."
+              value={searchTerm}
+              onChange={handleSearch}
+              className="w-full p-3 pl-10 rounded-full border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-red-500"
+            />
+            <Search
+              className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
+              size={20}
+            />
+          </div>
+        </div>
+
+        <div className="flex flex-wrap justify-evenly gap-8">
+          {filteredPeople.map((p, index) => (
+            <div
+              key={index}
+              className="dark:bg-gray-900 bg-gray-200 p-6 rounded-lg shadow-lg transition duration-300 hover:shadow-xl hover:scale-105 w-full sm:w-1/2 md:w-1/4"
+            >
+              <div className="flex flex-col items-center text-center">
+                <Image
+                  src={p.profileIcon}
+                  alt={p.name}
+                  width={144}
+                  height={144}
+                  className="rounded-full mb-4 w-20 h-20 p-2 object-contain"
+                />
+                <h3 className="text-2xl font-semibold mb-2 text-current">
+                  {p.name}
+                </h3>
+                <h4 className="text-blue-600 mb-2">{p.role}</h4>
+                <p className="dark:text-gray-400 text-gray-600 mb-4">
+                  {p.description}
+                </p>
+                <Link
+                  href={p.github}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-xl"
+                >
+                  <FaGithub />
+                </Link>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {filteredPeople.length === 0 && (
+          <p className="text-center text-gray-600 dark:text-gray-400 mt-8">
+            No one found matching your search.
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}

src/app/projects/page.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import React, { useState } from "react";
+import { Search } from "lucide-react";
+import { tools } from "@/data/tools";
+import Card from "@/components/Card";
+
+export default function Projects() {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [filteredProjects, setFilteredProjects] = useState(tools);
+
+  const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const term = event.target.value.toLowerCase();
+    setSearchTerm(term);
+    const filtered = tools.filter(
+      (project) =>
+        project.name.toLowerCase().includes(term) ||
+        project.description.toLowerCase().includes(term),
+    );
+    setFilteredProjects(filtered);
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-100 dark:bg-black">
+      <div className="container mx-auto px-4 py-12">
+        <h1 className="text-4xl font-bold mb-8 text-center text-gray-800 dark:text-white">
+          Rust Projects
+        </h1>
+
+        <div className="mb-8 max-w-md mx-auto">
+          <div className="relative">
+            <input
+              type="text"
+              placeholder="Search project..."
+              value={searchTerm}
+              onChange={handleSearch}
+              className="w-full p-3 pl-10 rounded-full border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-red-500"
+            />
+            <Search
+              className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
+              size={20}
+            />
+          </div>
+        </div>
+
+        <div className="grid md:grid-cols-3 w-full gap-5">
+          {filteredProjects.map((project, index) => (
+            <Card item={project} key={index} />
+          ))}
+        </div>
+
+        {filteredProjects.length === 0 && (
+          <p className="text-center text-gray-600 dark:text-gray-400 mt-8">
+            No tools found matching your search.
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/navbar/MobileNav.tsx

@@ -11,12 +11,12 @@ interface menuObject {
 
 export const menuItems: menuObject[] = [
   { items: 'Home', link: '/' },
-  { items: 'Books', link: '/#books' },
-  { items: 'Projects', link: '/#projects' },
-  { items: 'Dev Tools', link: '/#dev_tools' },
-  { items: 'Lesson', link: '/#lessons' },
-  { items: 'People', link: '/#people' },
-  { items: 'DSA', link: '/#dsas' }
+  { items: 'Books', link: '/books' },
+  { items: 'Projects', link: '/projects' },
+  { items: 'Dev Tools', link: '/dev_tools' },
+  { items: 'Lesson', link: '/lesson' },
+  { items: 'People', link: '/people' },
+  { items: 'DSA', link: '/dsa' }
 ];
 
 const MobileNav: React.FC = () => {

src/components/navbar/Navbar.tsx

@@ -7,12 +7,12 @@ interface MenuObject {
 }
 
 const menuItems = [
-  { items: "Books", link: "/#books" },
-  { items: "Projects", link: "/#projects" },
-  { items: "Lessons", link: "/#lessons" },
-  { items: "Dev Tools", link: "/#dev_tools" },
-  { items: "DSA Example", link: "/#dsas" },
-  { items: "People", link: "/#people" },
+  { items: "Books", link: "/books" },
+  { items: "Projects", link: "/projects" },
+  { items: "Lessons", link: "/lessons" },
+  { items: "Dev Tools", link: "/devtools" },
+  { items: "DSA Example", link: "/dsas" },
+  { items: "People", link: "/people" },
 ];
 
 

src/data/people.ts

@@ -7,12 +7,28 @@ export interface People {
 }
 
 export const people: Array<People> = [
+  {
+    name: "aFrancesco Ciulla",
+    role: "Founder",
+    description:
+      "A passionate Software Engineer from Italy - Currently focused on Rust and Docker content on YouTube",
+    profileIcon: "https://github.com/FrancescoXX.png",
+    github: "https://github.com/FrancescoXX",
+  },
   {
     name: "Francesco Ciulla",
     role: "Founder",
     description:
       "A passionate Software Engineer from Italy - Currently focused on Rust and Docker content on YouTube",
     profileIcon: "https://github.com/FrancescoXX.png",
     github: "https://github.com/FrancescoXX",
-  }
+  },
+  {
+    name: "Sakib Ahmed",
+    role: "Frontend Eng",
+    description:
+      "A passionate Software Engineer from Bangladesh - Currently focused on Sleeping, Eating and writing code",
+    profileIcon: "https://github.com/devvsakib.png",
+    github: "https://github.com/devvsakib",
+  },
 ];