yvg/pounce
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

✨ Redesign blog pages with stylish modern look
Some checks failed
CI / Frontend Lint & Type Check (push) Has been cancelled
Details
CI / Frontend Build (push) Has been cancelled
Details
CI / Backend Lint (push) Has been cancelled
Details
CI / Backend Tests (push) Has been cancelled
Details
CI / Docker Build (push) Has been cancelled
Details
CI / Security Scan (push) Has been cancelled
Details
Deploy / Build & Push Images (push) Has been cancelled
Details
Deploy / Deploy to Server (push) Has been cancelled
Details
Deploy / Notify (push) Has been cancelled
Details

Browse Source 
- Blog listing: Featured post hero section, animated card grid
- Category filters with accent styling
- Blog detail: Improved typography, social sharing, author box
- Consistent background effects matching landing page
- Newsletter CTA section on blog listing
- fadeInUp animations for posts grid
This commit is contained in:
yves.gugger
2025-12-09 17:14:05 +01:00
parent 5296981473
commit c8fe134ba3
2 changed files with 381 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

269
frontend/src/app/blog/[slug]/page.tsx
View File

@ -1,7 +1,7 @@
'use client'
import { useEffect, useState } from 'react'
import { useParams, useRouter } from 'next/navigation'
import { useParams } from 'next/navigation'
import Link from 'next/link'
import Image from 'next/image'
import { Header } from '@/components/Header'
@ -17,6 +17,11 @@ import {
User,
Share2,
BookOpen,
Twitter,
Linkedin,
Copy,
Check,
Sparkles,
} from 'lucide-react'
interface BlogPost {
@ -43,12 +48,12 @@ interface BlogPost {
export default function BlogPostPage() {
const params = useParams()
const router = useRouter()
const slug = params.slug as string
const [post, setPost] = useState<BlogPost | null>(null)
const [loading, setLoading] = useState(true)
const [error, setError] = useState<string | null>(null)
const [copied, setCopied] = useState(false)
useEffect(() => {
if (slug) {
@ -83,44 +88,55 @@ export default function BlogPostPage() {
return `${minutes} min read`
}
const handleShare = async () => {
if (navigator.share) {
try {
await navigator.share({
title: post?.title,
url: window.location.href,
})
} catch (err) {
// User cancelled or error
}
} else {
// Fallback: copy to clipboard
navigator.clipboard.writeText(window.location.href)
}
const handleCopyLink = async () => {
await navigator.clipboard.writeText(window.location.href)
setCopied(true)
setTimeout(() => setCopied(false), 2000)
}
const shareOnTwitter = () => {
const url = encodeURIComponent(window.location.href)
const text = encodeURIComponent(post?.title || '')
window.open(`https://twitter.com/intent/tweet?url=${url}&text=${text}`, '_blank')
}
const shareOnLinkedIn = () => {
const url = encodeURIComponent(window.location.href)
window.open(`https://www.linkedin.com/sharing/share-offsite/?url=${url}`, '_blank')
}
if (loading) {
return (
<div className="min-h-screen bg-background flex items-center justify-center">
<Loader2 className="w-8 h-8 text-accent animate-spin" />
<div className="text-center">
<Loader2 className="w-10 h-10 text-accent animate-spin mx-auto mb-4" />
<p className="text-foreground-muted">Loading article...</p>
</div>
</div>
)
}
if (error || !post) {
return (
<div className="min-h-screen bg-background flex flex-col">
<div className="min-h-screen bg-background relative overflow-hidden flex flex-col">
{/* Background */}
<div className="fixed inset-0 pointer-events-none">
<div className="absolute top-[-20%] left-1/2 -translate-x-1/2 w-[1200px] h-[800px] bg-accent/[0.03] rounded-full blur-[120px]" />
</div>
<Header />
<main className="flex-1 flex items-center justify-center px-4">
<main className="flex-1 flex items-center justify-center px-4 relative">
<div className="text-center max-w-md">
<BookOpen className="w-16 h-16 text-foreground-subtle mx-auto mb-6" />
<h1 className="text-2xl font-display text-foreground mb-4">Post Not Found</h1>
<p className="text-foreground-muted mb-6">
The blog post you&apos;re looking for doesn&apos;t exist or has been removed.
<div className="w-20 h-20 bg-accent/10 rounded-full flex items-center justify-center mx-auto mb-8">
<BookOpen className="w-10 h-10 text-accent" />
</div>
<h1 className="text-3xl font-display text-foreground mb-4">Article Not Found</h1>
<p className="text-foreground-muted mb-8 leading-relaxed">
The article you&apos;re looking for doesn&apos;t exist or has been removed from our collection.
</p>
<Link
href="/blog"
className="inline-flex items-center gap-2 px-6 py-3 bg-foreground text-background rounded-lg font-medium"
className="inline-flex items-center gap-2 px-6 py-3 bg-accent text-background rounded-xl font-medium hover:bg-accent-hover transition-all"
>
<ArrowLeft className="w-4 h-4" />
Back to Blog
@ -137,66 +153,111 @@ export default function BlogPostPage() {
{/* Background Effects */}
<div className="fixed inset-0 pointer-events-none">
<div className="absolute top-[-20%] left-1/2 -translate-x-1/2 w-[1200px] h-[800px] bg-accent/[0.03] rounded-full blur-[120px]" />
<div className="absolute bottom-[-10%] right-[-10%] w-[600px] h-[600px] bg-accent/[0.02] rounded-full blur-[100px]" />
<div
className="absolute inset-0 opacity-[0.015]"
style={{
backgroundImage: `linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px)`,
backgroundSize: '64px 64px',
}}
/>
</div>
<Header />
<main className="relative flex-1 pt-32 sm:pt-40 pb-20 sm:pb-28 px-4 sm:px-6">
<article className="max-w-3xl mx-auto">
<article className="max-w-4xl mx-auto">
{/* Back Link */}
<Link
href="/blog"
className="inline-flex items-center gap-2 text-foreground-muted hover:text-foreground transition-colors mb-8"
className="inline-flex items-center gap-2 text-foreground-muted hover:text-accent transition-colors mb-10 group"
>
<ArrowLeft className="w-4 h-4" />
<ArrowLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform" />
<span className="text-sm font-medium">Back to Blog</span>
</Link>
{/* Header */}
<header className="mb-12">
{post.category && (
<span className="inline-block px-3 py-1 bg-accent/10 text-accent text-sm font-medium rounded-full mb-6">
{post.category}
</span>
)}
<h1 className="font-display text-[2rem] sm:text-[2.75rem] md:text-[3.25rem] leading-[1.1] tracking-[-0.03em] text-foreground mb-6">
{post.title}
</h1>
{/* Meta */}
<div className="flex flex-wrap items-center gap-4 text-sm text-foreground-muted">
{post.author.name && (
<span className="flex items-center gap-2">
<User className="w-4 h-4" />
{post.author.name}
{/* Hero Header */}
<header className="mb-12 animate-fade-in">
<div className="flex flex-wrap items-center gap-3 mb-6">
{post.category && (
<span className="inline-flex items-center gap-1.5 px-4 py-1.5 bg-accent/10 text-accent text-sm font-medium rounded-full border border-accent/20">
<Sparkles className="w-3.5 h-3.5" />
{post.category}
</span>
)}
<span className="flex items-center gap-2">
<Calendar className="w-4 h-4" />
{post.published_at ? formatDate(post.published_at) : formatDate(post.created_at)}
</span>
<span className="flex items-center gap-2">
<span className="flex items-center gap-1.5 text-sm text-foreground-subtle">
<Clock className="w-4 h-4" />
{estimateReadTime(post.content)}
</span>
<span className="flex items-center gap-2">
<Eye className="w-4 h-4" />
{post.view_count} views
</span>
<button
onClick={handleShare}
className="flex items-center gap-2 text-foreground-muted hover:text-accent transition-colors ml-auto"
>
<Share2 className="w-4 h-4" />
Share
</button>
</div>
<h1 className="font-display text-[2.25rem] sm:text-[3rem] md:text-[3.75rem] leading-[1.05] tracking-[-0.03em] text-foreground mb-8">
{post.title}
</h1>
{post.excerpt && (
<p className="text-xl text-foreground-muted leading-relaxed mb-8 max-w-3xl">
{post.excerpt}
</p>
)}
{/* Meta Row */}
<div className="flex flex-wrap items-center gap-6 pb-8 border-b border-border">
<div className="flex items-center gap-4">
{post.author.name && (
<div className="flex items-center gap-3">
<div className="w-10 h-10 bg-accent/10 rounded-full flex items-center justify-center">
<User className="w-5 h-5 text-accent" />
</div>
<div>
<p className="text-sm font-medium text-foreground">{post.author.name}</p>
<p className="text-xs text-foreground-subtle">Author</p>
</div>
</div>
)}
</div>
<div className="flex items-center gap-4 text-sm text-foreground-subtle">
<span className="flex items-center gap-2">
<Calendar className="w-4 h-4" />
{post.published_at ? formatDate(post.published_at) : formatDate(post.created_at)}
</span>
<span className="flex items-center gap-2">
<Eye className="w-4 h-4" />
{post.view_count} views
</span>
</div>
{/* Share */}
<div className="flex items-center gap-2 ml-auto">
<button
onClick={shareOnTwitter}
className="p-2.5 text-foreground-subtle hover:text-foreground hover:bg-background-secondary rounded-lg transition-all"
title="Share on Twitter"
>
<Twitter className="w-4 h-4" />
</button>
<button
onClick={shareOnLinkedIn}
className="p-2.5 text-foreground-subtle hover:text-foreground hover:bg-background-secondary rounded-lg transition-all"
title="Share on LinkedIn"
>
<Linkedin className="w-4 h-4" />
</button>
<button
onClick={handleCopyLink}
className="p-2.5 text-foreground-subtle hover:text-foreground hover:bg-background-secondary rounded-lg transition-all"
title="Copy link"
>
{copied ? <Check className="w-4 h-4 text-accent" /> : <Copy className="w-4 h-4" />}
</button>
</div>
</div>
</header>
{/* Cover Image */}
{post.cover_image && (
<div className="relative aspect-[16/9] rounded-2xl overflow-hidden mb-12 bg-background-secondary">
<div className="relative aspect-[21/9] rounded-2xl overflow-hidden mb-14 bg-background-secondary ring-1 ring-border">
<Image
src={post.cover_image}
alt={post.title}
@ -210,31 +271,32 @@ export default function BlogPostPage() {
{/* Content */}
<div
className="prose prose-invert prose-lg max-w-none
prose-headings:font-display prose-headings:tracking-tight
prose-h2:text-2xl prose-h2:mt-12 prose-h2:mb-4
prose-h3:text-xl prose-h3:mt-8 prose-h3:mb-3
prose-p:text-foreground-muted prose-p:leading-relaxed
prose-a:text-accent prose-a:no-underline hover:prose-a:underline
prose-headings:font-display prose-headings:tracking-tight prose-headings:text-foreground
prose-h2:text-2xl sm:prose-h2:text-3xl prose-h2:mt-14 prose-h2:mb-6
prose-h3:text-xl sm:prose-h3:text-2xl prose-h3:mt-10 prose-h3:mb-4
prose-p:text-foreground-muted prose-p:leading-[1.8] prose-p:mb-6
prose-a:text-accent prose-a:no-underline hover:prose-a:underline prose-a:font-medium
prose-strong:text-foreground prose-strong:font-semibold
prose-code:text-accent prose-code:bg-background-secondary prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded
prose-pre:bg-background-secondary prose-pre:border prose-pre:border-border
prose-blockquote:border-l-accent prose-blockquote:bg-accent/5 prose-blockquote:py-2 prose-blockquote:px-6 prose-blockquote:rounded-r-lg
prose-code:text-accent prose-code:bg-accent/10 prose-code:px-2 prose-code:py-1 prose-code:rounded-md prose-code:text-sm prose-code:font-mono
prose-pre:bg-background-secondary prose-pre:border prose-pre:border-border prose-pre:rounded-xl
prose-blockquote:border-l-4 prose-blockquote:border-accent prose-blockquote:bg-accent/5 prose-blockquote:py-4 prose-blockquote:px-8 prose-blockquote:rounded-r-xl prose-blockquote:not-italic prose-blockquote:text-foreground-muted
prose-ul:text-foreground-muted prose-ol:text-foreground-muted
prose-li:marker:text-accent
prose-li:marker:text-accent prose-li:mb-2
prose-img:rounded-xl prose-img:ring-1 prose-img:ring-border
"
dangerouslySetInnerHTML={{ __html: post.content }}
/>
{/* Tags */}
{post.tags.length > 0 && (
<div className="mt-12 pt-8 border-t border-border">
<div className="flex items-center gap-2 flex-wrap">
<div className="mt-16 pt-8 border-t border-border">
<div className="flex items-center gap-3 flex-wrap">
<Tag className="w-4 h-4 text-foreground-subtle" />
{post.tags.map((tag) => (
<Link
key={tag}
href={`/blog?tag=${encodeURIComponent(tag)}`}
className="px-3 py-1 bg-background-secondary border border-border rounded-full text-sm text-foreground-muted hover:text-foreground hover:border-accent/30 transition-all"
className="px-4 py-2 bg-background-secondary/50 border border-border rounded-full text-sm text-foreground-muted hover:text-accent hover:border-accent/30 transition-all"
>
{tag}
</Link>
@ -243,20 +305,53 @@ export default function BlogPostPage() {
</div>
)}
{/* Author Box */}
{post.author.name && (
<div className="mt-16 p-8 bg-background-secondary/50 border border-border rounded-2xl">
<div className="flex items-start gap-5">
<div className="w-16 h-16 bg-accent/10 rounded-full flex items-center justify-center flex-shrink-0">
<User className="w-8 h-8 text-accent" />
</div>
<div>
<p className="text-xs text-foreground-subtle uppercase tracking-wider mb-1">Written by</p>
<h4 className="text-xl font-display text-foreground mb-2">{post.author.name}</h4>
<p className="text-foreground-muted text-sm leading-relaxed">
Expert domain hunter sharing insights and strategies to help you find premium domains.
</p>
</div>
</div>
</div>
)}
{/* CTA */}
<div className="mt-16 p-8 bg-gradient-to-br from-accent/10 to-accent/5 border border-accent/20 rounded-2xl text-center">
<h3 className="text-xl font-display text-foreground mb-3">
Ready to start hunting domains?
</h3>
<p className="text-foreground-muted mb-6">
Join thousands of domain hunters using pounce to find and secure premium domains.
</p>
<Link
href="/register"
className="inline-flex items-center gap-2 px-6 py-3 bg-accent text-background rounded-xl font-medium hover:bg-accent-hover transition-all"
>
Get Started Free
</Link>
<div className="mt-20 relative">
<div className="absolute inset-0 bg-gradient-to-r from-accent/10 via-accent/5 to-accent/10 rounded-3xl blur-xl" />
<div className="relative p-10 sm:p-14 bg-background-secondary/50 backdrop-blur-sm border border-accent/20 rounded-3xl text-center">
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-accent/10 border border-accent/20 mb-6">
<Sparkles className="w-4 h-4 text-accent" />
<span className="text-sm font-medium text-accent">Ready to Hunt?</span>
</div>
<h3 className="text-2xl sm:text-3xl font-display text-foreground mb-4">
Start finding premium domains today
</h3>
<p className="text-foreground-muted mb-8 max-w-xl mx-auto">
Join thousands of domain hunters using pounce to discover, monitor, and secure valuable domains.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Link
href="/register"
className="inline-flex items-center justify-center gap-2 px-8 py-4 bg-accent text-background rounded-xl font-medium hover:bg-accent-hover transition-all"
>
Get Started Free
</Link>
<Link
href="/blog"
className="inline-flex items-center justify-center gap-2 px-8 py-4 bg-background border border-border rounded-xl font-medium text-foreground hover:border-accent/50 transition-all"
>
More Articles
</Link>
</div>
</div>
</div>
</article>
</main>

280
frontend/src/app/blog/page.tsx
View File

@ -12,9 +12,10 @@ import {
Clock,
Eye,
ArrowRight,
Tag,
Loader2,
FileText,
Sparkles,
TrendingUp,
} from 'lucide-react'
import clsx from 'clsx'
@ -72,24 +73,28 @@ export default function BlogPage() {
const formatDate = (dateString: string) => {
return new Date(dateString).toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
month: 'short',
day: 'numeric',
})
}
const estimateReadTime = (excerpt: string | null) => {
if (!excerpt) return '3 min read'
if (!excerpt) return '3 min'
const words = excerpt.split(' ').length
const minutes = Math.ceil(words / 200) + 2 // Assume full article is longer
return `${minutes} min read`
const minutes = Math.ceil(words / 200) + 2
return `${minutes} min`
}
const featuredPost = posts[0]
const otherPosts = posts.slice(1)
return (
<div className="min-h-screen bg-background relative overflow-hidden">
{/* Background Effects */}
<div className="fixed inset-0 pointer-events-none">
<div className="absolute top-[-20%] left-1/2 -translate-x-1/2 w-[1200px] h-[800px] bg-accent/[0.03] rounded-full blur-[120px]" />
<div className="absolute bottom-[-10%] right-[-10%] w-[600px] h-[600px] bg-accent/[0.02] rounded-full blur-[100px]" />
<div className="absolute top-[40%] left-[-10%] w-[400px] h-[400px] bg-accent/[0.02] rounded-full blur-[80px]" />
<div
className="absolute inset-0 opacity-[0.015]"
style={{
@ -103,30 +108,33 @@ export default function BlogPage() {
<main className="relative flex-1 pt-32 sm:pt-40 pb-20 sm:pb-28 px-4 sm:px-6">
<div className="max-w-7xl mx-auto">
{/* Header */}
<div className="text-center mb-16 animate-fade-in">
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-accent/10 border border-accent/20 mb-6">
<BookOpen className="w-4 h-4 text-accent" />
<span className="text-sm font-medium text-accent">Domain Intelligence Blog</span>
{/* Hero Header */}
<div className="text-center mb-20 animate-fade-in">
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-accent/10 border border-accent/20 mb-8">
<Sparkles className="w-4 h-4 text-accent" />
<span className="text-sm font-medium text-accent">Domain Intelligence</span>
</div>
<h1 className="font-display text-[2.5rem] sm:text-[3.5rem] md:text-[4.5rem] leading-[1.05] tracking-[-0.03em] text-foreground mb-6">
Insights & Strategies.
<h1 className="font-display text-[2.75rem] sm:text-[4rem] md:text-[5rem] leading-[0.95] tracking-[-0.03em] text-foreground mb-8">
The Hunt<br />
<span className="text-accent">Begins Here.</span>
</h1>
<p className="text-lg sm:text-xl text-foreground-muted max-w-2xl mx-auto">
Domain hunting tips, market analysis, and expert strategies to help you secure premium domains.
<p className="text-lg sm:text-xl text-foreground-muted max-w-2xl mx-auto leading-relaxed">
Expert strategies, market insights, and proven tactics from professional domain hunters.
</p>
</div>
{/* Categories */}
{categories.length > 0 && (
<div className="flex flex-wrap items-center justify-center gap-2 mb-12">
<div className="flex flex-wrap items-center justify-center gap-3 mb-16">
<button
onClick={() => setSelectedCategory(null)}
className={clsx(
"px-4 py-2 text-sm font-medium rounded-xl transition-all",
"px-5 py-2.5 text-sm font-medium rounded-full transition-all duration-300",
!selectedCategory
? "bg-accent text-background"
: "bg-background-secondary border border-border text-foreground-muted hover:text-foreground"
? "bg-accent text-background shadow-lg shadow-accent/25"
: "bg-background-secondary/50 border border-border text-foreground-muted hover:text-foreground hover:border-accent/30"
)}
>
All Posts
@ -136,101 +144,174 @@ export default function BlogPage() {
key={cat.name}
onClick={() => setSelectedCategory(cat.name)}
className={clsx(
"px-4 py-2 text-sm font-medium rounded-xl transition-all",
"px-5 py-2.5 text-sm font-medium rounded-full transition-all duration-300",
selectedCategory === cat.name
? "bg-accent text-background"
: "bg-background-secondary border border-border text-foreground-muted hover:text-foreground"
? "bg-accent text-background shadow-lg shadow-accent/25"
: "bg-background-secondary/50 border border-border text-foreground-muted hover:text-foreground hover:border-accent/30"
)}
>
{cat.name} ({cat.count})
{cat.name}
</button>
))}
</div>
)}
{/* Posts Grid */}
{/* Posts */}
{loading ? (
<div className="flex items-center justify-center py-20">
<Loader2 className="w-8 h-8 text-accent animate-spin" />
<div className="flex items-center justify-center py-32">
<div className="text-center">
<Loader2 className="w-10 h-10 text-accent animate-spin mx-auto mb-4" />
<p className="text-foreground-muted">Loading insights...</p>
</div>
</div>
) : posts.length === 0 ? (
<div className="text-center py-20">
<FileText className="w-16 h-16 text-foreground-subtle mx-auto mb-6" />
<h2 className="text-2xl font-display text-foreground mb-3">No posts yet</h2>
<p className="text-foreground-muted">
Check back soon for domain hunting insights and strategies.
<div className="text-center py-32">
<div className="w-20 h-20 bg-accent/10 rounded-full flex items-center justify-center mx-auto mb-8">
<FileText className="w-10 h-10 text-accent" />
</div>
<h2 className="text-3xl font-display text-foreground mb-4">Coming Soon</h2>
<p className="text-foreground-muted max-w-md mx-auto">
We&apos;re preparing expert content. Check back soon for domain hunting insights and strategies.
</p>
</div>
) : (
<>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
{posts.map((post, index) => (
{/* Featured Post */}
{featuredPost && !selectedCategory && (
<Link
href={`/blog/${featuredPost.slug}`}
className="group relative block mb-16 animate-fade-in"
>
<div className="relative overflow-hidden rounded-3xl bg-gradient-to-br from-background-secondary to-background-tertiary border border-border hover:border-accent/30 transition-all duration-500">
<div className="grid lg:grid-cols-2 gap-0">
{/* Image */}
<div className="relative aspect-[16/10] lg:aspect-auto lg:min-h-[400px] overflow-hidden">
{featuredPost.cover_image ? (
<Image
src={featuredPost.cover_image}
alt={featuredPost.title}
fill
className="object-cover group-hover:scale-105 transition-transform duration-700"
/>
) : (
<div className="absolute inset-0 bg-gradient-to-br from-accent/20 to-accent/5 flex items-center justify-center">
<BookOpen className="w-20 h-20 text-accent/30" />
</div>
)}
<div className="absolute inset-0 bg-gradient-to-t from-background/80 via-transparent to-transparent lg:bg-gradient-to-r" />
{/* Featured Badge */}
<div className="absolute top-6 left-6 flex items-center gap-2 px-4 py-2 bg-accent text-background rounded-full text-sm font-medium">
<TrendingUp className="w-4 h-4" />
Featured
</div>
</div>
{/* Content */}
<div className="relative p-8 lg:p-12 flex flex-col justify-center">
{featuredPost.category && (
<span className="inline-block w-fit px-3 py-1 bg-accent/10 text-accent text-xs font-semibold uppercase tracking-wider rounded-full mb-6">
{featuredPost.category}
</span>
)}
<h2 className="text-2xl sm:text-3xl lg:text-4xl font-display text-foreground mb-4 group-hover:text-accent transition-colors duration-300 leading-tight">
{featuredPost.title}
</h2>
{featuredPost.excerpt && (
<p className="text-foreground-muted text-lg mb-6 line-clamp-3 leading-relaxed">
{featuredPost.excerpt}
</p>
)}
<div className="flex items-center gap-6 text-sm text-foreground-subtle mb-8">
<span className="flex items-center gap-2">
<Calendar className="w-4 h-4" />
{featuredPost.published_at ? formatDate(featuredPost.published_at) : formatDate(featuredPost.created_at)}
</span>
<span className="flex items-center gap-2">
<Clock className="w-4 h-4" />
{estimateReadTime(featuredPost.excerpt)}
</span>
<span className="flex items-center gap-2">
<Eye className="w-4 h-4" />
{featuredPost.view_count}
</span>
</div>
<span className="inline-flex items-center gap-2 text-accent font-medium group-hover:gap-4 transition-all duration-300">
Read Article
<ArrowRight className="w-5 h-5" />
</span>
</div>
</div>
</div>
</Link>
)}
{/* Posts Grid */}
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
{(selectedCategory ? posts : otherPosts).map((post, index) => (
<Link
key={post.id}
href={`/blog/${post.slug}`}
className="group relative flex flex-col bg-background-secondary/50 border border-border rounded-2xl overflow-hidden hover:border-accent/30 transition-all duration-300"
style={{ animationDelay: `${index * 50}ms` }}
className="group relative flex flex-col bg-background-secondary/30 backdrop-blur-sm border border-border rounded-2xl overflow-hidden hover:border-accent/40 hover:shadow-xl hover:shadow-accent/5 transition-all duration-500"
style={{
animationDelay: `${index * 100}ms`,
animation: 'fadeInUp 0.6s ease-out forwards',
opacity: 0,
}}
>
{/* Cover Image */}
{post.cover_image ? (
<div className="relative aspect-[16/9] overflow-hidden bg-background-tertiary">
{/* Cover */}
<div className="relative aspect-[16/10] overflow-hidden">
{post.cover_image ? (
<Image
src={post.cover_image}
alt={post.title}
fill
className="object-cover group-hover:scale-105 transition-transform duration-500"
className="object-cover group-hover:scale-110 transition-transform duration-700"
/>
{post.category && (
<span className="absolute top-4 left-4 px-3 py-1 bg-background/80 backdrop-blur-sm text-ui-xs font-medium text-foreground rounded-full">
{post.category}
</span>
)}
</div>
) : (
<div className="relative aspect-[16/9] bg-gradient-to-br from-accent/10 to-accent/5 flex items-center justify-center">
<BookOpen className="w-12 h-12 text-accent/30" />
{post.category && (
<span className="absolute top-4 left-4 px-3 py-1 bg-background/80 backdrop-blur-sm text-ui-xs font-medium text-foreground rounded-full">
{post.category}
</span>
)}
</div>
)}
) : (
<div className="absolute inset-0 bg-gradient-to-br from-accent/10 via-accent/5 to-transparent flex items-center justify-center">
<BookOpen className="w-12 h-12 text-accent/20 group-hover:text-accent/40 transition-colors" />
</div>
)}
<div className="absolute inset-0 bg-gradient-to-t from-background via-transparent to-transparent opacity-60" />
{post.category && (
<span className="absolute top-4 left-4 px-3 py-1.5 bg-background/90 backdrop-blur-sm text-xs font-semibold text-foreground rounded-full border border-border/50">
{post.category}
</span>
)}
</div>
{/* Content */}
<div className="flex-1 p-6">
<h2 className="text-lg font-display text-foreground mb-3 group-hover:text-accent transition-colors line-clamp-2">
<div className="flex-1 p-6 flex flex-col">
<h3 className="text-xl font-display text-foreground mb-3 group-hover:text-accent transition-colors duration-300 line-clamp-2 leading-snug">
{post.title}
</h2>
</h3>
{post.excerpt && (
<p className="text-body-sm text-foreground-muted mb-4 line-clamp-3">
<p className="text-foreground-muted text-sm mb-6 line-clamp-2 leading-relaxed flex-1">
{post.excerpt}
</p>
)}
{/* Meta */}
<div className="flex items-center gap-4 text-ui-xs text-foreground-subtle mt-auto">
<span className="flex items-center gap-1">
<Calendar className="w-3.5 h-3.5" />
{post.published_at ? formatDate(post.published_at) : formatDate(post.created_at)}
</span>
<span className="flex items-center gap-1">
<Clock className="w-3.5 h-3.5" />
{estimateReadTime(post.excerpt)}
</span>
<span className="flex items-center gap-1">
<Eye className="w-3.5 h-3.5" />
{post.view_count}
</span>
<div className="flex items-center justify-between text-xs text-foreground-subtle pt-4 border-t border-border/50">
<div className="flex items-center gap-4">
<span className="flex items-center gap-1.5">
<Calendar className="w-3.5 h-3.5" />
{post.published_at ? formatDate(post.published_at) : formatDate(post.created_at)}
</span>
<span className="flex items-center gap-1.5">
<Eye className="w-3.5 h-3.5" />
{post.view_count}
</span>
</div>
<ArrowRight className="w-4 h-4 text-accent opacity-0 group-hover:opacity-100 transform translate-x-0 group-hover:translate-x-1 transition-all duration-300" />
</div>
</div>
{/* Hover Indicator */}
<div className="px-6 pb-6">
<span className="inline-flex items-center gap-2 text-sm font-medium text-accent opacity-0 group-hover:opacity-100 transition-opacity">
Read more <ArrowRight className="w-4 h-4" />
</span>
</div>
</Link>
))}
</div>
@ -247,18 +328,55 @@ export default function BlogPage() {
console.error('Failed to load more posts:', error)
}
}}
className="px-6 py-3 bg-background-secondary border border-border rounded-xl text-foreground font-medium hover:bg-foreground/5 transition-all"
className="group inline-flex items-center gap-3 px-8 py-4 bg-background-secondary/50 border border-border rounded-full text-foreground font-medium hover:border-accent/50 hover:bg-accent/5 transition-all duration-300"
>
Load More Posts
Load More Articles
<ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
</button>
</div>
)}
</>
)}
{/* Newsletter CTA */}
<div className="mt-24 relative">
<div className="absolute inset-0 bg-gradient-to-r from-accent/10 via-accent/5 to-accent/10 rounded-3xl blur-xl" />
<div className="relative p-10 sm:p-14 bg-background-secondary/50 backdrop-blur-sm border border-accent/20 rounded-3xl text-center">
<h3 className="text-2xl sm:text-3xl font-display text-foreground mb-4">
Get hunting tips in your inbox
</h3>
<p className="text-foreground-muted mb-8 max-w-xl mx-auto">
Join domain hunters who receive weekly insights, market trends, and exclusive strategies.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center max-w-md mx-auto">
<input
type="email"
placeholder="Enter your email"
className="flex-1 px-5 py-3.5 bg-background border border-border rounded-xl text-foreground placeholder:text-foreground-subtle focus:outline-none focus:border-accent/50 transition-colors"
/>
<button className="px-8 py-3.5 bg-accent text-background rounded-xl font-medium hover:bg-accent-hover transition-colors whitespace-nowrap">
Subscribe
</button>
</div>
</div>
</div>
</div>
</main>
<Footer />
<style jsx>{`
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
`}</style>
</div>
)
}