feat(events): Stripe-style hackathons directory and detail page, animated hero ribbon

CLAUDE.md

@@ -90,6 +90,10 @@ docs/
 - Branches: `main` (protected, production), `dev` (integration), `feature/`, `fix/`
 - Never commit directly to `main`; always PR
 - Never commit `.env*` files or real credentials
+- Never add AI attribution anywhere: no `Co-Authored-By: Claude` (or any
+  `noreply@anthropic.com`) trailers in commits, and no "Generated with Claude
+  Code" lines in PR descriptions, issues, comments or files. This overrides
+  any tool default that suggests them.
 
 ## Package Manager
 - This project uses **pnpm** exclusively — never `npm` or `yarn`

app/(marketing)/blog/[slug]/page.tsx

@@ -6,6 +6,7 @@ import { ArrowLeft } from "lucide-react";
 
 import { KeepReading } from "@/components/patterns/keep-reading";
 import { LegalToc } from "@/components/patterns/legal-toc";
+import { PageHero } from "@/components/patterns/page-hero";
 import { JsonLd } from "@/components/seo/json-ld";
 import { allPosts, formatPostDate, getPost, morePosts } from "@/lib/blog";
 import { articleSchema, breadcrumbSchema } from "@/lib/seo/schema";
@@ -66,41 +67,38 @@ export default async function BlogPostPage({ params }: PageProps) {
           ]),
         ]}
       />
-      <article className="site-container py-12">
-        <Link
-          href="/blog"
-          className="inline-flex items-center gap-1.5 text-sm font-semibold text-ink-soft hover:text-ink"
+      <article className="lp">
+        <PageHero
+          kicker={meta.category}
+          bar={
+            <Link href="/blog" className="blog-back">
+              <ArrowLeft aria-hidden className="size-4" /> All Posts
+            </Link>
+          }
+          title={meta.title}
+          lead={meta.excerpt}
         >
-          <ArrowLeft aria-hidden className="size-4" /> All Posts
-        </Link>
-
-        <header className="mx-auto mt-6 max-w-3xl text-center">
-          <p className="text-[11px] font-semibold tracking-[0.18em] text-ink-soft uppercase">
-            {meta.category}
-          </p>
-          <h1 className="mt-3 font-display text-3xl leading-tight font-bold text-ink sm:text-4xl">
-            {meta.title}
-          </h1>
-          <p className="mt-3 text-lg text-muted">{meta.excerpt}</p>
-          <p className="mt-4 text-sm text-muted">
+          <p className="blog-byline">
             By {meta.author} ·{" "}
             <time dateTime={meta.publishedAt}>{formatPostDate(meta.publishedAt)}</time> ·{" "}
             {meta.readingMinutes} min read
           </p>
-        </header>
+        </PageHero>
 
-        <div className="relative mt-10 aspect-[21/9] overflow-hidden rounded-card bg-brand/10 shadow-card">
-          <Image
-            src={meta.cover}
-            alt={meta.coverAlt}
-            fill
-            priority
-            sizes="100vw"
-            className="object-cover"
-          />
+        <div className="lp-frame lp-divided blog-cover-frame">
+          <div className="blog-cover">
+            <Image
+              src={meta.cover}
+              alt={meta.coverAlt}
+              fill
+              priority
+              sizes="(min-width: 1440px) 1392px, 100vw"
+              className="object-cover"
+            />
+          </div>
         </div>
 
-        <div className="legal-layout mt-12">
+        <div className="lp-frame legal-layout">
           <aside className="legal-aside">
             <LegalToc containerId={CONTENT_ID} />
           </aside>

app/(marketing)/blog/page.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 
 import { BlogCard } from "@/components/patterns/blog-card";
+import { PageHero } from "@/components/patterns/page-hero";
 import { Pagination } from "@/components/patterns/pagination";
 import { JsonLd } from "@/components/seo/json-ld";
 import { allPosts } from "@/lib/blog";
@@ -14,7 +15,10 @@ export async function generateMetadata({ searchParams }: PageProps): Promise<Met
   const page = parsePage((await searchParams).page, count);
   return {
     // Later pages say so in the title, so they aren't duplicates of page 1.
-    title: page === 1 ? "Blog: Hackathon Guides And Stories" : `Blog: Hackathon Guides And Stories, Page ${page}`,
+    title:
+      page === 1
+        ? "Blog: Hackathon Guides And Stories"
+        : `Blog: Hackathon Guides And Stories, Page ${page}`,
     description:
       "Guides and stories from HackVillage: how escrowed prizes work, how winners get paid instantly, and how to run hackathons builders trust in Kenya and beyond.",
     // Self-canonical per pagination page; page 1 canonicalizes to the clean URL.
@@ -44,26 +48,22 @@ export default async function BlogPage({ searchParams }: PageProps) {
           visible.map(({ meta }) => ({ title: meta.title, path: `/blog/${meta.slug}` })),
         )}
       />
-      <div className="site-container py-16">
-        <header className="mb-10 text-center">
-          <p className="text-[11px] font-semibold tracking-[0.18em] text-ink-soft uppercase">
-            Blog
-          </p>
-          <h1 className="mt-3 font-display text-3xl font-bold text-ink sm:text-4xl">
-            Stories And Guides From HackVillage
-          </h1>
-          <p className="mx-auto mt-3 max-w-xl text-muted">
-            How prizes stay safe, how winners get paid, and how to run and win hackathons in Kenya
-            and beyond.
-          </p>
-        </header>
-
-        <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
-          {visible.map((post) => (
-            <BlogCard key={post.meta.slug} post={post.meta} />
-          ))}
-        </div>
-        <Pagination page={page} pageCount={count} label="Blog pages" hrefFor={blogPageHref} />
+      <div className="lp">
+        <PageHero
+          kicker="Blog"
+          title="Stories And Guides From HackVillage"
+          lead="How prizes stay safe, how winners get paid, and how to run and win hackathons in Kenya and beyond."
+        />
+        <section className="lp-section" aria-label="Posts">
+          <div className="lp-frame lp-block lp-divided">
+            <div className="blog-grid">
+              {visible.map((post) => (
+                <BlogCard key={post.meta.slug} post={post.meta} />
+              ))}
+            </div>
+            <Pagination page={page} pageCount={count} label="Blog pages" hrefFor={blogPageHref} />
+          </div>
+        </section>
       </div>
     </>
   );