Transform homepage claims list to Hacker News style

Before: Card-style with borders, backgrounds, padding
After: Compact numbered list (HN style)

Changes:
- Numbered list (1., 2., 3...) with monospace font
- Title on one line (clickable, bold)
- Metadata below: date • 5 claims • featured claim
- No borders or background colors
- Much more compact and scannable
- Added ai-judgment-skills to list (11 total)

Format:
1. Article Title
   Nov 3, 2025 • 5 claims • Featured claim snippet

Benefits:
- More articles visible without scrolling
- Cleaner, more professional look
- Information-dense like Hacker News
- Keeps all essential info (date, claims, snippet)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
kbanc85 2025-11-04 12:01:48 -05:00
parent 7fbb9d6b95
commit e71117fa75
1 changed files with 42 additions and 17 deletions

View File

@ -1,4 +1,3 @@
import { Card } from "@/components/ui/card";
import Link from "next/link";
const ClaimsLibrary = () => {
@ -47,6 +46,12 @@ const ClaimsLibrary = () => {
date: "2025-10-16",
featuredClaim: "Amazon's recommendation engine generates $200 billion in annual sales representing 35% of e-commerce revenue"
},
{
title: "Why Judgment Is Your New Career Currency",
link: "/claims-library/ai-judgment-skills",
date: "2025-10-08",
featuredClaim: "AI will fully replace just 0.7% of job-related skills according to CNBC reporting"
},
{
title: "Make ChatGPT Writing Undetectable With Five Techniques",
link: "/claims-library/undetectable-writing",
@ -70,33 +75,53 @@ const ClaimsLibrary = () => {
return (
<section className="py-10 md:py-12 border-b border-border">
<div className="container max-w-[780px] mx-auto px-5">
<div className="flex justify-between items-center mb-8">
<div className="flex justify-between items-center mb-6">
<h2 className="text-2xl md:text-3xl font-bold">Claims Library</h2>
<Link
href="/claims-library"
className="text-sm font-medium text-accent hover:text-accent/80 hover:underline transition-colors"
>
View Full Library →
View All →
</Link>
</div>
<div className="space-y-4">
{/* Hacker News style list */}
<ol className="space-y-3">
{claims.map((claim, idx) => (
<div key={idx} className="border-l-4 border-l-accent bg-muted p-4 rounded hover:shadow-md transition-shadow">
<Link href={claim.link} className="block">
<div className="text-base font-semibold text-foreground hover:text-accent transition-colors mb-2">
<li key={idx} className="group">
<div className="flex gap-3">
{/* Number */}
<span className="text-muted-foreground text-sm font-mono shrink-0 pt-0.5">
{idx + 1}.
</span>
{/* Content */}
<div className="min-w-0 flex-1">
{/* Title */}
<Link
href={claim.link}
className="text-foreground hover:text-accent font-medium leading-snug inline"
>
{claim.title}
</div>
<p className="text-sm text-muted-foreground leading-relaxed">
{claim.featuredClaim}
</p>
<div className="text-xs text-muted-foreground mt-2">
{new Date(claim.date).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })} • 5 Claims
</div>
</Link>
{/* Metadata line */}
<div className="text-xs text-muted-foreground mt-1 leading-relaxed">
{new Date(claim.date).toLocaleDateString('en-US', {
year: 'numeric',
month: 'short',
day: 'numeric'
})}
<span className="mx-1.5">•</span>
5 claims
<span className="mx-1.5">•</span>
<span className="italic">{claim.featuredClaim}</span>
</div>
</div>
</div>
</li>
))}
</div>
</ol>
</div>
</section>
);