feat: update app pages and styles

app/projects/[slug]/page.tsx

@@ -1,11 +1,11 @@
 import type { Metadata } from "next";
-import Image from "next/image";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import { IconArrowNarrowLeft, IconExternalLink } from "@tabler/icons-react";
 import Hero from "@/components/content/Hero";
 import SectionLabel from "@/components/layout/SectionLabel";
 import { colors, projects } from "@/constants";
+import ProjectCarousel from "@/components/content/ProjectCarousel";
 
 export function generateStaticParams() {
   return projects.map((project) => ({ slug: project.slug }));
@@ -48,7 +48,7 @@ export default async function ProjectPage({
       </Link>
 
       <Hero label={project.title} subtitle={project.description}>
-        <div className="space-y-5">
+        <div className="space-y-3">
           <p className="text-md text-neutral-400">
             {project.year} — {project.stack.join(" · ")}
           </p>
@@ -68,31 +68,22 @@ export default async function ProjectPage({
 
       {/* Screenshots */}
       {project.screenshots.length > 0 && (
-        <section className="space-y-4">
-          {project.screenshots.map((shot) => (
-            <div
-              key={shot.src}
-              className="overflow-hidden rounded-xl border border-neutral-800"
-            >
-              <Image
-                src={shot.src}
-                alt={shot.alt}
-                width={1200}
-                height={750}
-                className="h-auto w-full"
-              />
-            </div>
-          ))}
-        </section>
+        <ProjectCarousel screenshots={project.screenshots} />
       )}
 
       {/* Overview */}
       <section className="space-y-4">
         <SectionLabel label="Overview" />
-        <div className="space-y-4 text-[17px] leading-[1.65] text-neutral-200">
-          {project.overview.map((paragraph) => (
-            <p key={paragraph}>{paragraph}</p>
-          ))}
+        <div className="text-[17px] leading-[1.65] text-neutral-200">
+          {project.overview[0]}
+        </div>
+      </section>
+
+      {/* Problem Solved */}
+      <section className="space-y-4">
+        <SectionLabel label="Problem Solved" />
+        <div className="text-[17px] leading-[1.65] text-neutral-200">
+          {project.overview[1]}
         </div>
       </section>