feat: Refresh homepage with project artwork and card layouts

- Add project emblem artwork to preview cards
- Refresh homepage hero and current work sections

Author: hapwi

public/project-emblems/mmf-golden-gate-fixer.webp

@@ -1,8 +1,33 @@
-import { ArrowUpRight, Github } from 'lucide-react'
+import { ArrowRight, Github } from 'lucide-react'
 
 import { InstallCommand, ProjectLink } from '@/components/catalog-row'
 import { Button } from '@/components/ui/button'
 import type { CatalogProject } from '@/data/projects'
+import { formatRelativeTime } from '@/lib/format'
+
+const projectArtwork = {
+  'period-space': '/project-emblems/period-space.webp',
+  pastebridge: '/project-emblems/pastebridge.webp',
+  'mmf-golden-gate-fixer': '/project-emblems/mmf-golden-gate-fixer.webp',
+} as const
+
+function ProjectArtwork({ id }: { id: string }) {
+  const src =
+    projectArtwork[id as keyof typeof projectArtwork] ??
+    projectArtwork['period-space']
+
+  return (
+    <img
+      src={src}
+      alt=""
+      width="800"
+      height="800"
+      loading="lazy"
+      decoding="async"
+      className="h-full w-full object-cover"
+    />
+  )
+}
 
 export function ProjectPreviewCard({ project }: { project: CatalogProject }) {
   const githubUrl = project.githubUrl ?? project.href
@@ -11,44 +36,63 @@ export function ProjectPreviewCard({ project }: { project: CatalogProject }) {
   )
 
   return (
-    <article className="flex min-h-64 flex-col justify-between overflow-hidden rounded-3xl border bg-card p-6 shadow-sm sm:p-8">
-      <div>
-        <h3 className="max-w-3xl font-display text-3xl font-semibold tracking-[-0.035em] text-balance sm:text-4xl">
+    <article className="group flex min-h-full flex-col overflow-hidden rounded-[1.75rem] border border-black/[0.06] bg-card shadow-[0_1px_2px_rgba(0,0,0,0.03)] transition-[transform,box-shadow] duration-500 ease-out hover:-translate-y-1 hover:shadow-[0_24px_60px_-30px_rgba(15,23,42,0.35)] motion-reduce:transform-none motion-reduce:transition-none dark:border-white/[0.08] dark:shadow-none dark:hover:shadow-[0_24px_60px_-30px_rgba(0,0,0,0.8)]">
+      <div className="relative h-56 overflow-hidden bg-muted sm:h-64">
+        <div className="absolute inset-0 transition-transform duration-700 ease-out group-hover:scale-[1.025] motion-reduce:transform-none">
+          <ProjectArtwork id={project.id} />
+        </div>
+      </div>
+
+      <div className="flex flex-1 flex-col p-6 sm:p-7">
+        <div className="mb-5 flex min-h-5 items-center gap-2 text-xs text-muted-foreground">
+          {project.language ? <span>{project.language}</span> : null}
+          {project.language && project.updatedAt ? (
+            <span aria-hidden="true">·</span>
+          ) : null}
+          {project.updatedAt ? (
+            <span>Updated {formatRelativeTime(project.updatedAt)}</span>
+          ) : null}
+        </div>
+
+        <h3 className="font-display text-2xl font-semibold tracking-[-0.035em] text-balance sm:text-[1.75rem]">
           {project.name}
         </h3>
-        <p className="mt-3 max-w-2xl text-base leading-relaxed text-muted-foreground sm:text-lg">
+        <p className="mt-3 text-[0.9375rem] leading-6 text-muted-foreground sm:text-base">
           {project.description}
         </p>
-      </div>
 
-      <div className="mt-8 flex flex-col gap-5 lg:flex-row lg:items-end lg:justify-between">
         {project.installCommand ? (
-          <div className="min-w-0 max-w-2xl flex-1">
+          <div className="mt-6 min-w-0">
             <InstallCommand command={project.installCommand} />
           </div>
         ) : null}
 
-        <div className="flex shrink-0 flex-wrap items-center gap-2">
+        <div className="mt-auto flex flex-wrap items-center gap-2 pt-7">
           {hasProjectView ? (
-            <Button asChild>
+            <Button asChild className="rounded-full px-5">
               {project.homepageUrl && !project.to ? (
                 <a href={project.homepageUrl} target="_blank" rel="noreferrer">
-                  View project
-                  <ArrowUpRight data-icon="inline-end" />
+                  Explore project
+                  <ArrowRight data-icon="inline-end" />
                 </a>
               ) : (
                 <ProjectLink project={project}>
-                  View project
-                  <ArrowUpRight data-icon="inline-end" />
+                  Explore project
+                  <ArrowRight data-icon="inline-end" />
                 </ProjectLink>
               )}
             </Button>
           ) : null}
           {githubUrl ? (
-            <Button asChild variant="outline">
+            <Button
+              asChild
+              variant="ghost"
+              size="icon"
+              className="rounded-full"
+            >
               <a href={githubUrl} target="_blank" rel="noreferrer">
-                <Github data-icon="inline-start" />
-                Source
+                <Github />
+                <span className="sr-only">View {project.name} source</span>
               </a>
             </Button>
           ) : null}

public/project-emblems/pastebridge.webp

@@ -26,7 +26,7 @@ function HomeRoute() {
     <PageLayout className="py-0 sm:py-0 lg:py-0">
       <PageContent className="gap-0">
         {error ? (
-          <Alert className="my-4">
+          <Alert className="mt-4">
             <AlertCircle />
             <AlertTitle>GitHub is rate-limited or unreachable</AlertTitle>
             <AlertDescription>
@@ -36,9 +36,46 @@ function HomeRoute() {
           </Alert>
         ) : null}
 
-        <section aria-label="Projects">
+        <header className="flex min-h-[31rem] flex-col justify-center border-b border-border/60 py-20 sm:min-h-[36rem] sm:py-24 lg:min-h-[39rem]">
+          <h1 className="max-w-5xl font-display text-5xl font-semibold leading-[0.98] tracking-[-0.06em] text-balance sm:text-7xl lg:text-[5.75rem]">
+            Software for the spaces between systems.
+          </h1>
+          <div className="mt-8 grid gap-6 sm:mt-10 sm:grid-cols-[minmax(0,38rem)_auto] sm:items-end sm:justify-between">
+            <p className="max-w-2xl text-lg leading-8 text-muted-foreground sm:text-xl">
+              A small collection of focused, open-source tools for making Linux,
+              macOS, and the devices between them work better together.
+            </p>
+            <p className="text-sm leading-6 text-muted-foreground sm:text-right">
+              Built in public
+              <br />
+              Designed for daily use
+            </p>
+          </div>
+        </header>
+
+        <section className="py-14 sm:py-20" aria-labelledby="work-heading">
+          <div className="mb-8 flex items-end justify-between gap-4 sm:mb-10">
+            <div>
+              <h2
+                id="work-heading"
+                className="font-display text-3xl font-semibold tracking-[-0.04em] sm:text-4xl"
+              >
+                Current work
+              </h2>
+              <p className="mt-2 text-muted-foreground">
+                Practical projects, actively shaped and maintained.
+              </p>
+            </div>
+            {workProjects.length > 0 ? (
+              <p className="hidden text-sm text-muted-foreground sm:block">
+                {workProjects.length}{' '}
+                {workProjects.length === 1 ? 'project' : 'projects'}
+              </p>
+            ) : null}
+          </div>
+
           {workProjects.length > 0 ? (
-            <div className="grid gap-5 py-5">
+            <div className="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
               {workProjects.map((project) => (
                 <ProjectPreviewCard key={project.id} project={project} />
               ))}