import Link from "next/link"; import { getProject } from "@/lib/api"; export const dynamic = "force-dynamic"; type Project = { slug: string; title: string; summary?: string | null; tags?: string[] | null; type?: string | null; industry?: string | null; cover_image?: string | null; timeline?: string | null; stack?: string[] | null; roles?: string[] | null; links?: { label: string; href: string }[] | null; problem?: string | null; approach?: string | null; outcome?: string | null; metrics?: string[] | null; }; // --- Components --- function TagPill({ children }: { children: React.ReactNode }) { return ( {children} ); } // 1. Restored the "System Overview" SVG Placeholder you liked function PlaceholderCover() { return (
{/* Background Ambience */}
{/* Grid Pattern */}
{/* The Network Nodes SVG */}
system overview
); } function SpecRow({ label, value }: { label: string; value?: React.ReactNode }) { return (
{label}
{value ?? "—"}
); } // 2. New Card Component for Problem/Approach/Outcome function ContentCard({ title, children, icon, }: { title: string; children: React.ReactNode; icon?: React.ReactNode; }) { return (
{icon && (
{icon}
)}

{title}

{children}
); } export default async function WorkDetail({ params, }: { params: Promise<{ slug: string }>; }) { const { slug } = await params; const project = (await getProject(slug)) as Project | null; if (!project) { return (

Project not found

Back to work
); } const typeLabel = project.type === "concept_demo" ? "Concept Demo" : "Case Study"; const fallbackMetrics = [ "Reduced manual ops with automation", "Faster workflows with clear roles", "Better visibility with analytics", ]; return (
{/* ======= TOP BAR ======= */}
Back to work
{typeLabel}
{/* ======= HERO (Split Layout - Your Favorite) ======= */}
{/* Left: Text Info */}
Adblast IT · Work

{project.title}

{project.summary ?? "A production-grade system engineered for scale, security, and speed."}

{(project.tags ?? []).slice(0, 10).map((t) => ( {t} ))}
{/* Right: Visual / Placeholder */}
{project.cover_image ? (
{project.title}
) : ( )}
{/* ======= CONTENT ======= */}
{/* Main Narrative Area */}
{/* 3. Narrative Cards (Challenge, Approach, Outcome) */} {project.problem && ( } > {project.problem} )} {project.approach && ( } > {project.approach} )} {project.outcome && ( } > {project.outcome} )} {/* Key Outcomes Box (Dark Style for Contrast) */}

Measurable Impact

    {(project.metrics?.length ? project.metrics : fallbackMetrics) .slice(0, 4) .map((m) => (
  • {m}
    • ))}
{/* CTA */}
Want something similar?

We can scope it fast and propose a clean delivery plan.

Discuss a project
{/* Sidebar */}
{/* Footer */}
); }