mmintel/klz-cables.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

wip
Some checks failed
Build & Deploy / deploy (push) Failing after 19s
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-01-17 16:33:19 +01:00
parent d4e4142381
commit d8184caa9d
17 changed files with 287 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
app/[locale]/blog/page.tsx
View File

@@ -2,6 +2,7 @@ import Link from 'next/link';
import { getAllPosts } from '@/lib/blog';
import { Section, Container, Heading, Card, Badge, Button } from '@/components/ui';
import Reveal from '@/components/Reveal';
import { getTranslations } from 'next-intl/server';
interface BlogIndexProps {
params: {
@@ -10,15 +11,15 @@ interface BlogIndexProps {
}
export async function generateMetadata({ params: { locale } }: BlogIndexProps) {
const t = await getTranslations({ locale, namespace: 'Blog.meta' });
return {
title: locale === 'de' ? 'Neuigkeiten zu Kabeln und Energielösungen' : 'News on Cables and Energy Solutions',
description: locale === 'de'
? 'Bleiben Sie auf dem Laufenden! Lesen Sie aktuelle Themen und Insights zu Kabeltechnologie, Energielösungen und branchenspezifischen Innovationen.'
: 'Stay up to date! Read current topics and insights on cable technology, energy solutions and industry-specific innovations.',
title: t('title'),
description: t('description'),
};
}
export default async function BlogIndex({ params: { locale } }: BlogIndexProps) {
const t = await getTranslations('Blog');
const posts = await getAllPosts(locale);
// Sort posts by date descending
@@ -46,7 +47,7 @@ export default async function BlogIndex({ params: { locale } }: BlogIndexProps)
<Container className="relative z-10">
<div className="max-w-4xl animate-slide-up">
<Badge variant="accent" className="mb-4 md:mb-6">Featured Post</Badge>
<Badge variant="accent" className="mb-4 md:mb-6">{t('featuredPost')}</Badge>
{featuredPost && (
<>
<h1 className="text-3xl md:text-7xl font-extrabold text-white mb-4 md:mb-8 leading-[1.1] line-clamp-3 md:line-clamp-none">
@@ -56,7 +57,7 @@ export default async function BlogIndex({ params: { locale } }: BlogIndexProps)
{featuredPost.frontmatter.excerpt}
</p>
<Button href={`/${locale}/blog/${featuredPost.slug}`} variant="accent" size="lg" className="group w-full md:w-auto md:h-16 md:px-10 md:text-xl">
{locale === 'de' ? 'Vollständigen Artikel lesen' : 'Read Full Article'}
{t('readFullArticle')}
<span className="ml-3 transition-transform group-hover:translate-x-2">&rarr;</span>
</Button>
</>
@@ -69,15 +70,15 @@ export default async function BlogIndex({ params: { locale } }: BlogIndexProps)
<Container>
<Reveal>
<div className="flex flex-col md:flex-row items-start md:items-end justify-between mb-8 md:mb-16 gap-4 md:gap-6">
<Heading level={2} subtitle="Latest News" className="mb-0">
{locale === 'de' ? 'Alle Beiträge' : 'All Articles'}
<Heading level={2} subtitle={t('latestNews')} className="mb-0">
{t('allArticles')}
</Heading>
<div className="flex flex-wrap gap-2 md:gap-4">
{/* Category filters could go here */}
<Badge variant="primary" className="cursor-pointer hover:bg-primary hover:text-white transition-colors touch-target px-3 md:px-4">All</Badge>
<Badge variant="neutral" className="cursor-pointer hover:bg-primary hover:text-white transition-colors touch-target px-3 md:px-4">Industry</Badge>
<Badge variant="neutral" className="cursor-pointer hover:bg-primary hover:text-white transition-colors touch-target px-3 md:px-4">Technical</Badge>
<Badge variant="neutral" className="cursor-pointer hover:bg-primary hover:text-white transition-colors touch-target px-3 md:px-4">Sustainability</Badge>
<Badge variant="primary" className="cursor-pointer hover:bg-primary hover:text-white transition-colors touch-target px-3 md:px-4">{t('categories.all')}</Badge>
<Badge variant="neutral" className="cursor-pointer hover:bg-primary hover:text-white transition-colors touch-target px-3 md:px-4">{t('categories.industry')}</Badge>
<Badge variant="neutral" className="cursor-pointer hover:bg-primary hover:text-white transition-colors touch-target px-3 md:px-4">{t('categories.technical')}</Badge>
<Badge variant="neutral" className="cursor-pointer hover:bg-primary hover:text-white transition-colors touch-target px-3 md:px-4">{t('categories.sustainability')}</Badge>
</div>
</div>
</Reveal>
@@ -119,7 +120,7 @@ export default async function BlogIndex({ params: { locale } }: BlogIndexProps)
</p>
<div className="mt-auto pt-4 md:pt-8 border-t border-neutral-medium flex items-center justify-between">
<span className="text-primary text-sm md:text-base font-extrabold group-hover:text-accent-dark transition-colors">
{locale === 'de' ? 'Weiterlesen' : 'Read more'}
{t('readMore')}
</span>
<div className="w-8 h-8 md:w-10 md: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-4 h-4 md:w-5 md:h-5 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -136,10 +137,10 @@ export default async function BlogIndex({ params: { locale } }: BlogIndexProps)
{/* Pagination Placeholder */}
<div className="mt-12 md:mt-24 flex justify-center gap-2 md:gap-4">
<Button variant="outline" size="sm" className="md:h-11 md:px-6 md:text-base" disabled>Prev</Button>
<Button variant="outline" size="sm" className="md:h-11 md:px-6 md:text-base" disabled>{t('prev')}</Button>
<Button variant="primary" size="sm" className="md:h-11 md:px-6 md:text-base">1</Button>
<Button variant="outline" size="sm" className="md:h-11 md:px-6 md:text-base">2</Button>
<Button variant="outline" size="sm" className="md:h-11 md:px-6 md:text-base">Next</Button>
<Button variant="outline" size="sm" className="md:h-11 md:px-6 md:text-base">{t('next')}</Button>
</div>
</Container>
</Section>