From 57e08ae4bf8cb6ecb2a5fe506a072528d8325873 Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Sun, 19 Oct 2025 02:35:52 +0000
Subject: [PATCH] Refactor Projects page to use ShowcaseCard and enhance layout

cgen-6d27103e42424add958c1cd1c60cce67
---
 client/pages/Projects.tsx | 40 ++++-----------------------------------
 1 file changed, 4 insertions(+), 36 deletions(-)

diff --git a/client/pages/Projects.tsx b/client/pages/Projects.tsx
index b1655843..e0c53a82 100644
--- a/client/pages/Projects.tsx
+++ b/client/pages/Projects.tsx
@@ -2,6 +2,7 @@ import Layout from "@/components/Layout";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
+import ShowcaseCard from "@/components/showcase/ShowcaseCard";
 import { SHOWCASE } from "@/data/showcase";
 
 export default function Projects() {
@@ -13,47 +14,14 @@ export default function Projects() {
         <section className="container mx-auto max-w-6xl px-4">
           <Badge variant="outline" className="border-aethex-400/50 text-aethex-300">Showcase</Badge>
           <h1 className="mt-2 text-4xl font-extrabold text-gradient">Projects & Testimonials</h1>
-          <p className="text-muted-foreground max-w-2xl mt-1">Selected work, outcomes, and words from collaborators.</p>
+          <p className="text-muted-foreground max-w-2xl mt-1">Studio initiatives across AeThex Platform, Labs, and Studio.</p>
         </section>
 
         <section className="container mx-auto max-w-7xl px-4 mt-6">
           {hasProjects ? (
-            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+            <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
               {SHOWCASE.map((p) => (
-                <Card key={p.id} className="bg-card/60 border-border/40 backdrop-blur overflow-hidden group">
-                  {p.image && (
-                    <div className="relative h-40 w-full">
-                      <img src={p.image} alt={p.title} className="h-full w-full object-cover" loading="lazy" />
-                    </div>
-                  )}
-                  <CardHeader className="pb-2">
-                    <CardTitle className="text-base">{p.title}</CardTitle>
-                    <CardDescription>
-                      {[p.role, p.timeframe].filter(Boolean).join(" • ")}
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent className="space-y-3 pt-0 pb-4">
-                    {p.description && (
-                      <p className="text-sm text-muted-foreground">{p.description}</p>
-                    )}
-                    {p.tags && p.tags.length > 0 && (
-                      <div className="flex flex-wrap gap-2">
-                        {p.tags.map((t) => (
-                          <Badge key={t} variant="outline" className="text-xs">{t}</Badge>
-                        ))}
-                      </div>
-                    )}
-                    {p.links && p.links.length > 0 && (
-                      <div className="flex flex-wrap gap-2">
-                        {p.links.map((l) => (
-                          <Button key={l.href} asChild size="sm" variant="outline">
-                            <a href={l.href} target="_blank" rel="noreferrer noopener">{l.label}</a>
-                          </Button>
-                        ))}
-                      </div>
-                    )}
-                  </CardContent>
-                </Card>
+                <ShowcaseCard key={p.id} p={p} />
               ))}
             </div>
           ) : (