wip
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
import Link from 'next/link';
|
||||
import { getAllPosts } from '@/lib/blog';
|
||||
import { getTranslations } from 'next-intl/server';
|
||||
import { Section, Container, Heading, Card, Badge, Button } from '@/components/ui';
|
||||
|
||||
interface BlogIndexProps {
|
||||
params: {
|
||||
@@ -29,117 +29,116 @@ export default async function BlogIndex({ params: { locale } }: BlogIndexProps)
|
||||
const remainingPosts = sortedPosts.slice(1);
|
||||
|
||||
return (
|
||||
<div className="bg-neutral-50 min-h-screen">
|
||||
{/* Hero Section */}
|
||||
<div className="bg-primary text-white py-20">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-3xl">
|
||||
<h1 className="text-5xl md:text-6xl font-extrabold mb-6 leading-tight">
|
||||
{locale === 'de' ? 'KLZ Blog' : 'KLZ Blog'}
|
||||
</h1>
|
||||
<p className="text-xl text-white/80 leading-relaxed">
|
||||
{locale === 'de'
|
||||
? 'Insights, News und technisches Know-how aus der Welt der Kabelinfrastruktur und erneuerbaren Energien.'
|
||||
: 'Insights, news and technical know-how from the world of cable infrastructure and renewable energies.'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-4 -mt-10 pb-20">
|
||||
{/* Featured Post */}
|
||||
{featuredPost && (
|
||||
<Link href={`/${locale}/blog/${featuredPost.slug}`} className="group block mb-16">
|
||||
<article className="bg-white rounded-2xl shadow-xl overflow-hidden flex flex-col lg:flex-row transition-all hover:shadow-2xl">
|
||||
{featuredPost.frontmatter.featuredImage && (
|
||||
<div className="lg:w-1/2 relative h-64 lg:h-auto overflow-hidden">
|
||||
<img
|
||||
src={featuredPost.frontmatter.featuredImage}
|
||||
alt={featuredPost.frontmatter.title}
|
||||
className="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-black/20 to-transparent" />
|
||||
</div>
|
||||
)}
|
||||
<div className="lg:w-1/2 p-8 lg:p-12 flex flex-col justify-center">
|
||||
{featuredPost.frontmatter.category && (
|
||||
<span className="inline-block px-3 py-1 bg-primary/10 text-primary text-xs font-bold uppercase tracking-widest rounded-full mb-6">
|
||||
{featuredPost.frontmatter.category}
|
||||
</span>
|
||||
)}
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-text-primary mb-6 group-hover:text-primary transition-colors">
|
||||
<div className="bg-neutral-light min-h-screen">
|
||||
{/* Hero Section - Immersive Magazine Feel */}
|
||||
<section className="relative h-[70vh] min-h-[600px] flex items-center overflow-hidden bg-primary-dark">
|
||||
{featuredPost && featuredPost.frontmatter.featuredImage && (
|
||||
<>
|
||||
<img
|
||||
src={featuredPost.frontmatter.featuredImage}
|
||||
alt={featuredPost.frontmatter.title}
|
||||
className="absolute inset-0 w-full h-full object-cover scale-105 animate-slow-zoom opacity-60"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-primary-dark via-primary-dark/40 to-transparent" />
|
||||
</>
|
||||
)}
|
||||
|
||||
<Container className="relative z-10">
|
||||
<div className="max-w-4xl animate-slide-up">
|
||||
<Badge variant="accent" className="mb-6">Featured Post</Badge>
|
||||
{featuredPost && (
|
||||
<>
|
||||
<h1 className="text-5xl md:text-7xl font-extrabold text-white mb-8 leading-[1.1]">
|
||||
{featuredPost.frontmatter.title}
|
||||
</h2>
|
||||
<p className="text-lg text-text-secondary mb-8 line-clamp-3">
|
||||
</h1>
|
||||
<p className="text-xl md:text-2xl text-white/80 mb-10 line-clamp-2 max-w-2xl">
|
||||
{featuredPost.frontmatter.excerpt}
|
||||
</p>
|
||||
<div className="flex items-center gap-4 mt-auto">
|
||||
<div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold">
|
||||
KLZ
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-bold text-text-primary">KLZ Cables</div>
|
||||
<div className="text-xs text-text-secondary">
|
||||
{new Date(featuredPost.frontmatter.date).toLocaleDateString(locale, {
|
||||
<Button href={`/${locale}/blog/${featuredPost.slug}`} variant="accent" size="xl" className="group">
|
||||
{locale === 'de' ? 'Vollständigen Artikel lesen' : 'Read Full Article'}
|
||||
<span className="ml-3 transition-transform group-hover:translate-x-2">→</span>
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<Section className="bg-neutral-light">
|
||||
<Container>
|
||||
<div className="flex flex-col md:flex-row items-end justify-between mb-16 gap-6">
|
||||
<Heading level={2} subtitle="Latest News" className="mb-0">
|
||||
{locale === 'de' ? 'Alle Beiträge' : 'All Articles'}
|
||||
</Heading>
|
||||
<div className="flex gap-4">
|
||||
{/* Category filters could go here */}
|
||||
<Badge variant="primary" className="cursor-pointer hover:bg-primary hover:text-white transition-colors">All</Badge>
|
||||
<Badge variant="neutral" className="cursor-pointer hover:bg-primary hover:text-white transition-colors">Industry</Badge>
|
||||
<Badge variant="neutral" className="cursor-pointer hover:bg-primary hover:text-white transition-colors">Technical</Badge>
|
||||
<Badge variant="neutral" className="cursor-pointer hover:bg-primary hover:text-white transition-colors">Sustainability</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Grid for remaining posts */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12">
|
||||
{remainingPosts.map((post) => (
|
||||
<Link key={post.slug} href={`/${locale}/blog/${post.slug}`} className="group block">
|
||||
<Card className="h-full flex flex-col border-none shadow-lg hover:shadow-2xl transition-all duration-500 rounded-3xl overflow-hidden">
|
||||
{post.frontmatter.featuredImage && (
|
||||
<div className="relative h-72 overflow-hidden">
|
||||
<img
|
||||
src={post.frontmatter.featuredImage}
|
||||
alt={post.frontmatter.title}
|
||||
className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-primary-dark/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
|
||||
{post.frontmatter.category && (
|
||||
<Badge variant="accent" className="absolute top-6 left-6 shadow-lg">
|
||||
{post.frontmatter.category}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="p-10 flex flex-col flex-1">
|
||||
<div className="text-sm font-bold text-accent-dark mb-4 tracking-widest uppercase">
|
||||
{new Date(post.frontmatter.date).toLocaleDateString(locale, {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</Link>
|
||||
)}
|
||||
|
||||
{/* Grid for remaining posts */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
|
||||
{remainingPosts.map((post) => (
|
||||
<Link key={post.slug} href={`/${locale}/blog/${post.slug}`} className="group block">
|
||||
<article className="bg-white rounded-xl shadow-sm overflow-hidden border border-neutral-200 h-full flex flex-col transition-all hover:shadow-lg hover:-translate-y-1">
|
||||
{post.frontmatter.featuredImage && (
|
||||
<div className="relative h-56 overflow-hidden">
|
||||
<img
|
||||
src={post.frontmatter.featuredImage}
|
||||
alt={post.frontmatter.title}
|
||||
className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
|
||||
/>
|
||||
{post.frontmatter.category && (
|
||||
<span className="absolute top-4 left-4 px-3 py-1 bg-white/90 backdrop-blur-sm text-primary text-[10px] font-bold uppercase tracking-wider rounded-md shadow-sm">
|
||||
{post.frontmatter.category}
|
||||
<h3 className="text-2xl font-bold text-primary mb-6 group-hover:text-accent-dark transition-colors line-clamp-2 leading-tight">
|
||||
{post.frontmatter.title}
|
||||
</h3>
|
||||
<p className="text-text-secondary text-lg line-clamp-3 mb-8 leading-relaxed">
|
||||
{post.frontmatter.excerpt}
|
||||
</p>
|
||||
<div className="mt-auto pt-8 border-t border-neutral-medium flex items-center justify-between">
|
||||
<span className="text-primary font-extrabold group-hover:text-accent-dark transition-colors">
|
||||
{locale === 'de' ? 'Weiterlesen' : 'Read more'}
|
||||
</span>
|
||||
)}
|
||||
<div className="w-10 h-10 rounded-full bg-primary-light flex items-center justify-center text-primary group-hover:bg-accent group-hover:text-primary-dark transition-all duration-300">
|
||||
<svg className="w-5 h-5 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="p-6 flex flex-col flex-1">
|
||||
<div className="text-xs text-text-secondary mb-3">
|
||||
{new Date(post.frontmatter.date).toLocaleDateString(locale, {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})}
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-text-primary mb-4 group-hover:text-primary transition-colors line-clamp-2">
|
||||
{post.frontmatter.title}
|
||||
</h3>
|
||||
<p className="text-text-secondary text-sm line-clamp-3 mb-6">
|
||||
{post.frontmatter.excerpt}
|
||||
</p>
|
||||
<div className="mt-auto pt-4 border-t border-neutral-100 flex items-center justify-between">
|
||||
<span className="text-primary text-sm font-bold group-hover:underline">
|
||||
{locale === 'de' ? 'Weiterlesen' : 'Read more'}
|
||||
</span>
|
||||
<svg className="w-5 h-5 text-primary transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Pagination Placeholder */}
|
||||
<div className="mt-24 flex justify-center gap-4">
|
||||
<Button variant="outline" size="md" disabled>Previous</Button>
|
||||
<Button variant="primary" size="md">1</Button>
|
||||
<Button variant="outline" size="md">2</Button>
|
||||
<Button variant="outline" size="md">3</Button>
|
||||
<Button variant="outline" size="md">Next</Button>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user