refactor: update header and hero components for improved styling and layout

app/components/Projects.tsx

@@ -2,50 +2,50 @@
 "use client";
 
 import Link from "next/link";
-import { useEffect, useState } from "react";
+import {useEffect, useState} from "react";
 
 interface Project {
-  id: string;
-  title: string;
-  description: string;
-  link: string;
+    id: string;
+    title: string;
+    description: string;
+    link: string;
 }
 
 export default function Projects() {
-  const [projects, setProjects] = useState<Project[]>([]);
+    const [projects, setProjects] = useState<Project[]>([]);
 
-  useEffect(() => {
-    fetch("/data/projects.json")
-      .then((res) => res.json())
-      .then((data) => setProjects(data));
-  }, []);
+    useEffect(() => {
+        fetch("/data/projects.json")
+            .then((res) => res.json())
+            .then((data) => setProjects(data));
+    }, []);
 
-  return (
-    <section id="projects" className="p-10">
-      <h2 className="text-3xl font-bold text-center text-gray-800 dark:text-white">
-        Projects
-      </h2>
-      <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
-        {projects.map((project) => (
-          <div
-            key={project.id}
-            className="p-4 border rounded shadow-lg "
-          >
-            <h3 className="text-2xl font-bold text-gray-800 dark:text-white">
-              {project.title}
-            </h3>
-            <p className="mt-2 text-gray-600 dark:text-gray-300">
-              {project.description}
-            </p>
-            <Link
-              href={`/Projects/${project.title.toLowerCase().replace(" ", "-")}`}
-              className="mt-4 inline-block text-blue-500 hover:underline"
-            >
-              View Project
-            </Link>
-          </div>
-        ))}
-      </div>
-    </section>
-  );
+    return (
+        <section id="projects" className="p-10">
+            <h2 className="text-3xl font-bold text-center text-gray-800 dark:text-white">
+                Projects
+            </h2>
+            <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
+                {projects.map((project) => (
+                    <div
+                        key={project.id}
+                        className="p-4 border shadow-lg bg-white/45 rounded-2xl"
+                    >
+                        <h3 className="text-2xl font-bold text-gray-800">
+                            {project.title}
+                        </h3>
+                        <p className="mt-2 text-gray-500">
+                            {project.description}
+                        </p>
+                        <Link
+                            href={`/Projects/${project.title.toLowerCase().replace(" ", "-")}`}
+                            className="mt-4 inline-block text-blue-800 hover:underline"
+                        >
+                            View Project
+                        </Link>
+                    </div>
+                ))}
+            </div>
+        </section>
+    );
 }