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

20
app/[locale]/[slug]/page.tsx
View File

@@ -1,6 +1,7 @@
import { notFound } from 'next/navigation';
import { MDXRemote } from 'next-mdx-remote/rsc';
import { Section, Container, Heading, Badge } from '@/components/ui';
import { getTranslations } from 'next-intl/server';
interface PageProps {
params: {
@@ -12,6 +13,7 @@ interface PageProps {
export default async function StandardPage({ params: { locale, slug } }: PageProps) {
const { getPageBySlug } = await import('@/lib/pages');
const pageData = await getPageBySlug(slug, locale);
const t = await getTranslations('StandardPage');
if (!pageData) {
notFound();
@@ -26,7 +28,7 @@ export default async function StandardPage({ params: { locale, slug } }: PagePro
</div>
<Container className="relative z-10">
<div className="max-w-4xl animate-slide-up">
<Badge variant="accent" className="mb-4 md:mb-6">Information</Badge>
<Badge variant="accent" className="mb-4 md:mb-6">{t('badge')}</Badge>
<Heading level={1} className="text-3xl md:text-6xl lg:text-7xl xl:text-8xl text-white mb-0">
<span className="text-white">{pageData.frontmatter.title}</span>
</Heading>
@@ -42,29 +44,29 @@ export default async function StandardPage({ params: { locale, slug } }: PagePro
<div className="lg:sticky lg:top-32 space-y-4 md:space-y-8">
{/* Mobile-only chip/stepper feel */}
<div className="flex lg:hidden overflow-x-auto pb-4 gap-3 no-scrollbar -mx-4 px-4">
<Badge variant="primary" className="whitespace-nowrap px-4 py-2 rounded-full shadow-sm">Overview</Badge>
<Badge variant="neutral" className="whitespace-nowrap px-4 py-2 rounded-full shadow-sm opacity-60">Details</Badge>
<Badge variant="neutral" className="whitespace-nowrap px-4 py-2 rounded-full shadow-sm opacity-60">Support</Badge>
<Badge variant="primary" className="whitespace-nowrap px-4 py-2 rounded-full shadow-sm">{t('overview')}</Badge>
<Badge variant="neutral" className="whitespace-nowrap px-4 py-2 rounded-full shadow-sm opacity-60">{t('details')}</Badge>
<Badge variant="neutral" className="whitespace-nowrap px-4 py-2 rounded-full shadow-sm opacity-60">{t('support')}</Badge>
</div>
<div className="p-6 md:p-8 bg-neutral-light rounded-2xl md:rounded-3xl border border-neutral-medium shadow-sm">
<h3 className="text-lg md:text-xl font-bold text-primary mb-3 md:mb-4 flex items-center gap-2">
<span className="w-1.5 h-6 bg-accent rounded-full" />
Quick Navigation
{t('quickNavigation')}
</h3>
<nav className="space-y-3 md:space-y-4">
<p className="text-sm md:text-base text-text-secondary leading-relaxed">
Explore the details of {pageData.frontmatter.title}. KLZ provides comprehensive information on all our services and corporate policies.
{t('exploreDetails', { title: pageData.frontmatter.title })}
</p>
</nav>
</div>
<div className="p-6 md:p-8 bg-primary-dark rounded-2xl md:rounded-3xl text-white shadow-xl relative overflow-hidden group">
<div className="absolute top-0 right-0 w-24 h-full bg-accent/5 -skew-x-12 translate-x-1/2 transition-transform group-hover:translate-x-1/3" />
<h3 className="text-lg md:text-xl font-bold mb-3 md:mb-4 relative z-10">Need Help?</h3>
<p className="text-sm md:text-base text-white/70 mb-4 md:mb-6 relative z-10">Our support team is available for any questions regarding this topic.</p>
<h3 className="text-lg md:text-xl font-bold mb-3 md:mb-4 relative z-10">{t('needHelp')}</h3>
<p className="text-sm md:text-base text-white/70 mb-4 md:mb-6 relative z-10">{t('supportTeamAvailable')}</p>
<a href={`/${locale}/contact`} className="inline-flex items-center text-accent font-bold hover:underline touch-target relative z-10 group/link">
Contact Us
{t('contactUs')}
<span className="ml-2 transition-transform group-hover/link:translate-x-1">&rarr;</span>
</a>
</div>

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>

22
app/[locale]/contact/page.tsx
View File

@@ -13,7 +13,7 @@ export default function ContactPage() {
</div>
<Container className="relative z-10">
<div className="max-w-4xl animate-slide-up">
<Heading level={1} subtitle="Get in Touch" className="text-white mb-4 md:mb-6">
<Heading level={1} subtitle={t('heroSubtitle')} className="text-white mb-4 md:mb-6">
<span className="text-white">{t('title')}</span>
</Heading>
<p className="text-lg md:text-2xl text-white/70 leading-relaxed max-w-2xl">
@@ -29,8 +29,8 @@ export default function ContactPage() {
{/* Contact Info */}
<div className="lg:col-span-5 space-y-6 md:space-y-12">
<div className="animate-fade-in">
<Heading level={3} subtitle="Contact Details" className="mb-6 md:mb-8">
How to Reach Us
<Heading level={3} subtitle={t('info.subtitle')} className="mb-6 md:mb-8">
{t('info.howToReachUs')}
</Heading>
<div className="space-y-4 md:space-y-8">
<div className="flex items-start gap-4 md:gap-6 group">
@@ -41,7 +41,7 @@ export default function ContactPage() {
</svg>
</div>
<div>
<h4 className="text-base md:text-xl font-bold text-primary mb-1 md:mb-2">Our Office</h4>
<h4 className="text-base md:text-xl font-bold text-primary mb-1 md:mb-2">{t('info.office')}</h4>
<p className="text-sm md:text-lg text-text-secondary leading-relaxed whitespace-pre-line">
{t('info.address')}
</p>
@@ -55,7 +55,7 @@ export default function ContactPage() {
</svg>
</div>
<div>
<h4 className="text-base md:text-xl font-bold text-primary mb-1 md:mb-2">Phone</h4>
<h4 className="text-base md:text-xl font-bold text-primary mb-1 md:mb-2">{t('info.phone')}</h4>
<a href="tel:+4988192537298" className="text-sm md:text-lg text-text-secondary hover:text-primary transition-colors font-medium touch-target">+49 881 92537298</a>
</div>
</div>
@@ -67,7 +67,7 @@ export default function ContactPage() {
</svg>
</div>
<div>
<h4 className="text-base md:text-xl font-bold text-primary mb-1 md:mb-2">Email</h4>
<h4 className="text-base md:text-xl font-bold text-primary mb-1 md:mb-2">{t('info.email')}</h4>
<a href="mailto:info@klz-vertriebs-gmbh.com" className="text-sm md:text-lg text-text-secondary hover:text-primary transition-colors font-medium touch-target">info@klz-vertriebs-gmbh.com</a>
</div>
</div>
@@ -92,7 +92,7 @@ export default function ContactPage() {
{/* Contact Form */}
<div className="lg:col-span-7">
<Card className="p-6 md:p-12 rounded-2xl md:rounded-[40px] border-none shadow-2xl animate-slide-up">
<Heading level={3} subtitle="Send a Message" className="mb-6 md:mb-10">
<Heading level={3} subtitle={t('form.subtitle')} className="mb-6 md:mb-10">
{t('form.title')}
</Heading>
<form className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8">
@@ -105,7 +105,7 @@ export default function ContactPage() {
autoComplete="name"
enterKeyHint="next"
className="w-full px-4 md:px-6 py-2.5 md:py-4 bg-neutral rounded-xl md:rounded-2xl border-2 border-transparent focus:border-primary focus:bg-white transition-all outline-none text-sm md:text-lg"
placeholder="Your Name"
placeholder={t('form.namePlaceholder')}
required
/>
</div>
@@ -119,7 +119,7 @@ export default function ContactPage() {
inputMode="email"
enterKeyHint="next"
className="w-full px-4 md:px-6 py-2.5 md:py-4 bg-neutral rounded-xl md:rounded-2xl border-2 border-transparent focus:border-primary focus:bg-white transition-all outline-none text-sm md:text-lg"
placeholder="your@email.com"
placeholder={t('form.emailPlaceholder')}
required
/>
</div>
@@ -131,7 +131,7 @@ export default function ContactPage() {
rows={4}
enterKeyHint="send"
className="w-full px-4 md:px-6 py-2.5 md:py-4 bg-neutral rounded-xl md:rounded-2xl border-2 border-transparent focus:border-primary focus:bg-white transition-all outline-none text-sm md:text-lg resize-none"
placeholder="How can we help you?"
placeholder={t('form.messagePlaceholder')}
required
></textarea>
</div>
@@ -156,7 +156,7 @@ export default function ContactPage() {
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
</svg>
</div>
<p className="font-bold text-primary text-xl">Interactive Map Coming Soon</p>
<p className="font-bold text-primary text-xl">{t('map.comingSoon')}</p>
</div>
</div>
</section>

14
app/[locale]/layout.tsx
View File

@@ -1,14 +1,18 @@
import {NextIntlClientProvider} from 'next-intl';
import {getMessages} from 'next-intl/server';
import {getMessages, getTranslations} from 'next-intl/server';
import '../../styles/globals.css';
import Header from '@/components/Header';
import Footer from '@/components/Footer';
import { Metadata, Viewport } from 'next';
export const metadata: Metadata = {
title: 'KLZ Cables',
description: 'Premium Cable Solutions',
};
export async function generateMetadata({params: {locale}}: {params: {locale: string}}): Promise<Metadata> {
const t = await getTranslations({locale, namespace: 'Index.meta'});
return {
title: t('title'),
description: t('description')
};
}
export const viewport: Viewport = {
width: 'device-width',

28
app/[locale]/team/page.tsx
View File

@@ -22,7 +22,7 @@ export default function TeamPage() {
</div>
<Container className="relative z-10 text-center text-white max-w-5xl animate-slide-up">
<Badge variant="accent" className="mb-4 md:mb-8 shadow-lg">Our People</Badge>
<Badge variant="accent" className="mb-4 md:mb-8 shadow-lg">{t('hero.badge')}</Badge>
<h1 className="text-3xl md:text-7xl lg:text-8xl font-extrabold tracking-tight leading-[1.1] mb-4 md:mb-8">
{t('hero.subtitle')}
</h1>
@@ -38,7 +38,7 @@ export default function TeamPage() {
<Reveal className="w-full lg:w-1/2 p-6 md:p-24 lg:p-32 flex flex-col justify-center bg-primary-dark text-white relative order-2 lg:order-1">
<div className="absolute top-0 right-0 w-32 h-full bg-accent/5 -skew-x-12 translate-x-1/2" />
<div className="relative z-10">
<Badge variant="accent" className="mb-4 md:mb-8">Managing Director</Badge>
<Badge variant="accent" className="mb-4 md:mb-8">{t('michael.role')}</Badge>
<Heading level={2} className="text-white mb-6 md:mb-10 text-3xl md:text-6xl">
<span className="text-white">{t('michael.name')}</span>
</Heading>
@@ -80,7 +80,7 @@ export default function TeamPage() {
<div className="absolute inset-0 z-0">
<Image
src="/uploads/2024/12/1694273920124-copy.webp"
alt="Legacy"
alt={t('legacy.subtitle')}
fill
className="object-cover opacity-20 md:opacity-30 scale-110 animate-slow-zoom"
sizes="100vw"
@@ -90,7 +90,7 @@ export default function TeamPage() {
<Container className="relative z-10">
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 md:gap-16 items-center">
<div className="lg:col-span-6">
<Heading level={2} subtitle="Our Heritage" className="text-white mb-6 md:mb-10">
<Heading level={2} subtitle={t('legacy.subtitle')} className="text-white mb-6 md:mb-10">
<span className="text-white">{t('legacy.title')}</span>
</Heading>
<div className="space-y-4 md:space-y-8 text-base md:text-2xl text-white/80 leading-relaxed font-medium">
@@ -104,12 +104,12 @@ export default function TeamPage() {
</div>
<div className="lg:col-span-6 grid grid-cols-2 md:grid-cols-2 gap-3 md:gap-6">
<div className="p-4 md:p-8 bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl md:rounded-[32px] hover:bg-white/10 transition-colors">
<div className="text-xl md:text-4xl font-extrabold text-accent mb-1 md:mb-2">Expertise</div>
<div className="text-[10px] md:text-sm font-bold uppercase tracking-widest text-white/50">Decades of Knowledge</div>
<div className="text-xl md:text-4xl font-extrabold text-accent mb-1 md:mb-2">{t('legacy.expertise')}</div>
<div className="text-[10px] md:text-sm font-bold uppercase tracking-widest text-white/50">{t('legacy.expertiseDesc')}</div>
</div>
<div className="p-4 md:p-8 bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl md:rounded-[32px] hover:bg-white/10 transition-colors">
<div className="text-xl md:text-4xl font-extrabold text-accent mb-1 md:mb-2">Network</div>
<div className="text-[10px] md:text-sm font-bold uppercase tracking-widest text-white/50">Global Partnerships</div>
<div className="text-xl md:text-4xl font-extrabold text-accent mb-1 md:mb-2">{t('legacy.network')}</div>
<div className="text-[10px] md:text-sm font-bold uppercase tracking-widest text-white/50">{t('legacy.networkDesc')}</div>
</div>
</div>
</div>
@@ -132,7 +132,7 @@ export default function TeamPage() {
<Reveal className="w-full lg:w-1/2 p-6 md:p-24 lg:p-32 flex flex-col justify-center bg-neutral-light text-primary relative order-2">
<div className="absolute top-0 left-0 w-32 h-full bg-primary/5 skew-x-12 -translate-x-1/2" />
<div className="relative z-10">
<Badge variant="primary" className="mb-4 md:mb-8">Founder & Visionary</Badge>
<Badge variant="primary" className="mb-4 md:mb-8">{t('klaus.role')}</Badge>
<Heading level={2} className="text-primary mb-6 md:mb-10 text-3xl md:text-6xl">
{t('klaus.name')}
</Heading>
@@ -165,11 +165,11 @@ export default function TeamPage() {
<div className="sticky-narrative-container">
<div className="sticky-narrative-sidebar mb-8 lg:mb-0">
<div className="lg:sticky lg:top-32">
<Heading level={2} subtitle="Our Values" className="mb-4 md:mb-8">
<Heading level={2} subtitle={t('manifesto.subtitle')} className="mb-4 md:mb-8">
{t('manifesto.title')}
</Heading>
<p className="text-base md:text-xl text-text-secondary leading-relaxed">
Our core principles guide every decision we make and every cable we deliver.
{t('manifesto.tagline')}
</p>
{/* Mobile-only progress indicator */}
@@ -200,8 +200,8 @@ export default function TeamPage() {
{/* Gallery Section - Premium Treatment */}
<Section className="bg-primary-dark py-16 md:py-32">
<Container>
<Heading level={2} subtitle="Behind the Scenes" align="center" className="text-white mb-12 md:mb-20">
<span className="text-white">Life at KLZ</span>
<Heading level={2} subtitle={t('gallery.subtitle')} align="center" className="text-white mb-12 md:mb-20">
<span className="text-white">{t('gallery.title')}</span>
</Heading>
<div className="grid grid-cols-2 md:grid-cols-5 gap-3 md:gap-6">
{[
@@ -212,7 +212,7 @@ export default function TeamPage() {
'/uploads/2024/12/DSC07387-Large-600x400.webp'
].map((src, idx) => (
<div key={idx} className="relative aspect-[3/4] rounded-2xl md:rounded-[32px] overflow-hidden group shadow-2xl">
<Image src={src} alt="Team Gallery" fill className="object-cover transition-transform duration-1000 group-hover:scale-110" />
<Image src={src} alt={t('gallery.title')} fill className="object-cover transition-transform duration-1000 group-hover:scale-110" />
<div className="absolute inset-0 bg-primary-dark/40 group-hover:bg-transparent transition-all duration-500" />
<div className="absolute inset-0 border-0 group-hover:border-[8px] md:group-hover:border-[12px] border-white/10 transition-all duration-500 pointer-events-none" />
</div>