refined design

app/research/page.tsx

@@ -1,51 +1,33 @@
-import { getSortedPostsData } from "@/lib/posts";
-import { ProjectCard } from "@/components/project-card";
-import { BlurFade } from "@/components/magicui/blur-fade";
+// NO "use client" here. This is a Server Component.
 
-const BLUR_FADE_DELAY = 0.04;
+import { getSortedPostsData, getAllTags } from "@/lib/posts";
+import { FilterableResearchGrid } from "@/components/filterable-research-list"; // Import the new client component
 
 export default function ResearchPage() {
-  const posts = getSortedPostsData("research");
+  // These functions run safely on the server because this is a Server Component.
+  const allPosts = getSortedPostsData("research");
+  const allTags = getAllTags(5, "research");
 
   return (
     <main className="flex flex-col min-h-[100dvh] space-y-10">
       <section id="research">
-        <div className="mx-auto w-full max-w-6xl space-y-8">
+        <div className="mx-auto w-full max-w-6xl space-y-8 px-4">
           <div className="space-y-2">
             <h1 className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none mt-12">
               Research
             </h1>
-            <p className="text-muted-foreground">
+            <p className="max-w-3xl text-muted-foreground">
               This section details my scientific publications, primarily focused
-              on advancing machine learning and deep neural networks.
-              My involvement has spanned, from conceptualizing the ideas 
-              and developing machine learning models, to providing support 
-              to my colleagues.
+              on advancing machine learning and deep neural networks. My
+              involvement has spanned, from conceptualizing the ideas and
+              developing machine learning models, to providing support to my
+              colleagues.
             </p>
           </div>
           <hr />
-          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-2">
-            {posts
-              .filter((post) => post.title)
-              .map((post, id) => (
-              <BlurFade
-                key={post.title}
-                delay={BLUR_FADE_DELAY * 2 + id * 0.005}
-              >
-                <ProjectCard
-                  href={post.href}
-                  key={post.title}
-                  title={post.title!}
-                  description={post.excerpt || ""}
-                  dates={post.date}
-                  tags={post.tags}
-                  image={post.image || ""}
-                  video={post.video}
-                  links={[]}
-                />
-              </BlurFade>
-            ))}
-          </div>
+
+          <FilterableResearchGrid posts={allPosts} tags={allTags} />
+
         </div>
       </section>
     </main>