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:
parent
7fbb9d6b95
commit
e71117fa75
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue