wip
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
import { notFound } from 'next/navigation';
|
||||
import { MDXRemote } from 'next-mdx-remote/rsc';
|
||||
import { getPostBySlug } from '@/lib/blog';
|
||||
import { Section, Container, Heading, Badge } from '@/components/ui';
|
||||
|
||||
interface PageProps {
|
||||
params: {
|
||||
@@ -10,14 +10,6 @@ interface PageProps {
|
||||
}
|
||||
|
||||
export default async function StandardPage({ params: { locale, slug } }: PageProps) {
|
||||
const page = await getPostBySlug(slug, locale); // Reusing blog logic for now as structure is same
|
||||
|
||||
// If not found in blog, try pages directory (we need to implement getPageBySlug)
|
||||
// Actually, let's implement getPageBySlug in lib/mdx.ts or similar
|
||||
|
||||
// For now, let's assume we use a unified loader or separate.
|
||||
// Let's use a separate loader for pages.
|
||||
|
||||
const { getPageBySlug } = await import('@/lib/pages');
|
||||
const pageData = await getPageBySlug(slug, locale);
|
||||
|
||||
@@ -26,11 +18,63 @@ export default async function StandardPage({ params: { locale, slug } }: PagePro
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-12 max-w-4xl">
|
||||
<h1 className="text-4xl font-bold text-primary mb-8">{pageData.frontmatter.title}</h1>
|
||||
<div className="prose prose-lg max-w-none">
|
||||
<MDXRemote source={pageData.content} />
|
||||
</div>
|
||||
<div className="flex flex-col min-h-screen bg-neutral-light">
|
||||
{/* Hero Section */}
|
||||
<section className="bg-primary-dark text-white py-32 relative overflow-hidden">
|
||||
<div className="absolute inset-0 opacity-20">
|
||||
<div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-accent via-transparent to-transparent" />
|
||||
</div>
|
||||
<Container className="relative z-10">
|
||||
<div className="max-w-4xl animate-slide-up">
|
||||
<Badge variant="accent" className="mb-6">Information</Badge>
|
||||
<Heading level={1} className="text-white mb-0">
|
||||
<span className="text-white">{pageData.frontmatter.title}</span>
|
||||
</Heading>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<Section className="bg-white -mt-12 relative z-20 rounded-t-[60px] shadow-2xl">
|
||||
<Container>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-16">
|
||||
{/* Sticky Narrative Sidebar */}
|
||||
<div className="lg:col-span-4">
|
||||
<div className="sticky top-32 space-y-8">
|
||||
<div className="p-8 bg-neutral-light rounded-3xl border border-neutral-medium">
|
||||
<h3 className="text-xl font-bold text-primary mb-4">Quick Navigation</h3>
|
||||
<nav className="space-y-4">
|
||||
<div className="h-1 w-12 bg-accent rounded-full" />
|
||||
<p className="text-text-secondary leading-relaxed">
|
||||
Explore the details of {pageData.frontmatter.title}. KLZ provides comprehensive information on all our services and corporate policies.
|
||||
</p>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div className="p-8 bg-primary-dark rounded-3xl text-white">
|
||||
<h3 className="text-xl font-bold mb-4">Need Help?</h3>
|
||||
<p className="text-white/70 mb-6">Our support team is available for any questions regarding this topic.</p>
|
||||
<a href={`/${locale}/contact`} className="text-accent font-bold hover:underline">Contact Us →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="lg:col-span-8">
|
||||
<article className="prose prose-xl prose-primary max-w-none
|
||||
prose-headings:text-primary prose-headings:font-bold prose-headings:tracking-tight
|
||||
prose-p:text-text-secondary prose-p:leading-relaxed
|
||||
prose-strong:text-primary prose-strong:font-extrabold
|
||||
prose-a:text-primary prose-a:font-bold prose-a:no-underline hover:prose-a:underline
|
||||
prose-img:rounded-3xl prose-img:shadow-2xl
|
||||
prose-ul:list-disc prose-ul:pl-6
|
||||
prose-li:text-text-secondary
|
||||
">
|
||||
<MDXRemote source={pageData.content} />
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,87 +1,153 @@
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { Section, Container, Button } from '@/components/ui';
|
||||
import { Section, Container, Button, Heading, Card } from '@/components/ui';
|
||||
|
||||
export default function ContactPage() {
|
||||
const t = useTranslations('Contact');
|
||||
|
||||
return (
|
||||
<div className="flex flex-col min-h-screen">
|
||||
<Section className="bg-neutral">
|
||||
<Container>
|
||||
<div className="max-w-3xl mx-auto text-center mb-12">
|
||||
<h1 className="text-4xl font-bold mb-4">{t('title')}</h1>
|
||||
<p className="text-xl text-text-secondary">
|
||||
<div className="flex flex-col min-h-screen bg-neutral-light">
|
||||
{/* Hero Section */}
|
||||
<section className="bg-primary-dark text-white py-32 relative overflow-hidden">
|
||||
<div className="absolute inset-0 opacity-20">
|
||||
<div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-accent via-transparent to-transparent" />
|
||||
</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-6">
|
||||
<span className="text-white">{t('title')}</span>
|
||||
</Heading>
|
||||
<p className="text-2xl text-white/70 leading-relaxed max-w-2xl">
|
||||
{t('subtitle')}
|
||||
</p>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 max-w-5xl mx-auto">
|
||||
<Section className="bg-neutral-light -mt-20 relative z-20">
|
||||
<Container>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-16">
|
||||
{/* Contact Info */}
|
||||
<div className="space-y-8">
|
||||
<div>
|
||||
<h3 className="text-xl font-bold mb-4">{t('info.title')}</h3>
|
||||
<div className="space-y-4 text-text-secondary">
|
||||
<p className="flex items-start">
|
||||
<svg className="w-6 h-6 text-primary mr-3 mt-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<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" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
<span className="whitespace-pre-line">
|
||||
{t('info.address')}
|
||||
</span>
|
||||
</p>
|
||||
<p className="flex items-center">
|
||||
<svg className="w-6 h-6 text-primary mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
||||
</svg>
|
||||
<a href="tel:+4988192537298" className="hover:text-primary transition-colors">+49 881 92537298</a>
|
||||
</p>
|
||||
<p className="flex items-center">
|
||||
<svg className="w-6 h-6 text-primary mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<a href="mailto:info@klz-vertriebs-gmbh.com" className="hover:text-primary transition-colors">info@klz-vertriebs-gmbh.com</a>
|
||||
</p>
|
||||
<div className="lg:col-span-5 space-y-12">
|
||||
<div className="animate-fade-in">
|
||||
<Heading level={3} subtitle="Contact Details" className="mb-8">
|
||||
How to Reach Us
|
||||
</Heading>
|
||||
<div className="space-y-8">
|
||||
<div className="flex items-start gap-6 group">
|
||||
<div className="w-14 h-14 rounded-2xl bg-primary-light flex items-center justify-center text-primary group-hover:bg-accent group-hover:text-primary-dark transition-all duration-300 shadow-sm">
|
||||
<svg className="w-7 h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<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" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-xl font-bold text-primary mb-2">Our Office</h4>
|
||||
<p className="text-lg text-text-secondary leading-relaxed whitespace-pre-line">
|
||||
{t('info.address')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-6 group">
|
||||
<div className="w-14 h-14 rounded-2xl bg-primary-light flex items-center justify-center text-primary group-hover:bg-accent group-hover:text-primary-dark transition-all duration-300 shadow-sm">
|
||||
<svg className="w-7 h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-xl font-bold text-primary mb-2">Phone</h4>
|
||||
<a href="tel:+4988192537298" className="text-lg text-text-secondary hover:text-primary transition-colors font-medium">+49 881 92537298</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-6 group">
|
||||
<div className="w-14 h-14 rounded-2xl bg-primary-light flex items-center justify-center text-primary group-hover:bg-accent group-hover:text-primary-dark transition-all duration-300 shadow-sm">
|
||||
<svg className="w-7 h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-xl font-bold text-primary mb-2">Email</h4>
|
||||
<a href="mailto:info@klz-vertriebs-gmbh.com" className="text-lg text-text-secondary hover:text-primary transition-colors font-medium">info@klz-vertriebs-gmbh.com</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-xl font-bold mb-4">{t('hours.title')}</h3>
|
||||
<ul className="space-y-2 text-text-secondary">
|
||||
<li className="flex justify-between">
|
||||
<span>{t('hours.weekdays')}</span>
|
||||
<span>{t('hours.weekdaysTime')}</span>
|
||||
<div className="p-10 bg-white rounded-3xl border border-neutral-medium shadow-sm animate-fade-in">
|
||||
<Heading level={4} className="mb-6">{t('hours.title')}</Heading>
|
||||
<ul className="space-y-4">
|
||||
<li className="flex justify-between items-center pb-4 border-b border-neutral-medium">
|
||||
<span className="font-bold text-primary">{t('hours.weekdays')}</span>
|
||||
<span className="text-text-secondary">{t('hours.weekdaysTime')}</span>
|
||||
</li>
|
||||
<li className="flex justify-between">
|
||||
<span>{t('hours.weekend')}</span>
|
||||
<span>{t('hours.closed')}</span>
|
||||
<li className="flex justify-between items-center">
|
||||
<span className="font-bold text-primary">{t('hours.weekend')}</span>
|
||||
<span className="text-accent-dark font-bold">{t('hours.closed')}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contact Form Placeholder */}
|
||||
<div className="bg-white p-8 rounded-lg shadow-sm border border-neutral-dark">
|
||||
<h3 className="text-xl font-bold mb-6">{t('form.title')}</h3>
|
||||
<form className="space-y-4">
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium text-text-primary mb-1">{t('form.name')}</label>
|
||||
<input type="text" id="name" className="w-full px-4 py-2 border border-neutral-dark rounded-md focus:ring-primary focus:border-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-text-primary mb-1">{t('form.email')}</label>
|
||||
<input type="email" id="email" className="w-full px-4 py-2 border border-neutral-dark rounded-md focus:ring-primary focus:border-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="message" className="block text-sm font-medium text-text-primary mb-1">{t('form.message')}</label>
|
||||
<textarea id="message" rows={4} className="w-full px-4 py-2 border border-neutral-dark rounded-md focus:ring-primary focus:border-primary"></textarea>
|
||||
</div>
|
||||
<Button type="submit" className="w-full">{t('form.submit')}</Button>
|
||||
</form>
|
||||
{/* Contact Form */}
|
||||
<div className="lg:col-span-7">
|
||||
<Card className="p-12 rounded-[40px] border-none shadow-2xl animate-slide-up">
|
||||
<Heading level={3} subtitle="Send a Message" className="mb-10">
|
||||
{t('form.title')}
|
||||
</Heading>
|
||||
<form className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="name" className="text-sm font-extrabold text-primary uppercase tracking-widest">{t('form.name')}</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
className="w-full px-6 py-4 bg-neutral rounded-2xl border-2 border-transparent focus:border-primary focus:bg-white transition-all outline-none text-lg"
|
||||
placeholder="Your Name"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="email" className="text-sm font-extrabold text-primary uppercase tracking-widest">{t('form.email')}</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
className="w-full px-6 py-4 bg-neutral rounded-2xl border-2 border-transparent focus:border-primary focus:bg-white transition-all outline-none text-lg"
|
||||
placeholder="your@email.com"
|
||||
/>
|
||||
</div>
|
||||
<div className="md:col-span-2 space-y-2">
|
||||
<label htmlFor="message" className="text-sm font-extrabold text-primary uppercase tracking-widest">{t('form.message')}</label>
|
||||
<textarea
|
||||
id="message"
|
||||
rows={6}
|
||||
className="w-full px-6 py-4 bg-neutral rounded-2xl border-2 border-transparent focus:border-primary focus:bg-white transition-all outline-none text-lg resize-none"
|
||||
placeholder="How can we help you?"
|
||||
></textarea>
|
||||
</div>
|
||||
<div className="md:col-span-2 pt-4">
|
||||
<Button type="submit" size="xl" className="w-full shadow-xl shadow-primary/20">
|
||||
{t('form.submit')}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Map Placeholder */}
|
||||
<section className="h-[500px] bg-neutral-medium relative overflow-hidden grayscale hover:grayscale-0 transition-all duration-1000">
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="w-20 h-20 bg-primary rounded-full flex items-center justify-center text-white mb-4 mx-auto shadow-2xl animate-bounce">
|
||||
<svg className="w-10 h-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -16,11 +16,11 @@ export default async function LocaleLayout({
|
||||
const messages = await getMessages();
|
||||
|
||||
return (
|
||||
<html lang={locale}>
|
||||
<body className="flex flex-col min-h-screen">
|
||||
<html lang={locale} className="scroll-smooth">
|
||||
<body className="flex flex-col min-h-screen font-sans selection:bg-accent selection:text-primary-dark">
|
||||
<NextIntlClientProvider messages={messages} locale={locale}>
|
||||
<Header />
|
||||
<main className="flex-grow">
|
||||
<main className="flex-grow animate-fade-in">
|
||||
{children}
|
||||
</main>
|
||||
<Footer />
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { Section, Container } from '@/components/ui';
|
||||
import { Section, Container, Heading, Card, Badge } from '@/components/ui';
|
||||
|
||||
interface ProductsPageProps {
|
||||
params: {
|
||||
@@ -44,47 +44,86 @@ export default function ProductsPage({ params }: ProductsPageProps) {
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex flex-col min-h-screen">
|
||||
<Section className="bg-neutral-light">
|
||||
<Container>
|
||||
<div className="max-w-3xl mx-auto text-center mb-16">
|
||||
<h1 className="text-4xl font-bold mb-6">{t('title')}</h1>
|
||||
<p className="text-xl text-text-secondary">
|
||||
<div className="flex flex-col min-h-screen bg-neutral-light">
|
||||
{/* Hero Section */}
|
||||
<section className="bg-primary-dark text-white py-32 relative overflow-hidden">
|
||||
<div className="absolute inset-0 opacity-30">
|
||||
<div className="absolute top-0 right-0 w-1/2 h-full bg-accent/10 skew-x-12 translate-x-1/4" />
|
||||
</div>
|
||||
<Container className="relative z-10">
|
||||
<div className="max-w-4xl animate-slide-up">
|
||||
<Heading level={1} subtitle="Product Portfolio" className="text-white mb-6">
|
||||
<span className="text-white">{t('title')}</span>
|
||||
</Heading>
|
||||
<p className="text-2xl text-white/70 leading-relaxed max-w-2xl">
|
||||
{t('subtitle')}
|
||||
</p>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<Section className="bg-neutral-light -mt-16 relative z-20">
|
||||
<Container>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
|
||||
{categories.map((category, idx) => (
|
||||
<Link key={idx} href={category.href} className="group block bg-white rounded-lg overflow-hidden shadow-sm border border-neutral-dark hover:shadow-md transition-all">
|
||||
<div className="relative h-64 overflow-hidden">
|
||||
<Image
|
||||
src={category.img}
|
||||
alt={category.title}
|
||||
fill
|
||||
className="object-cover transition-transform duration-700 group-hover:scale-110"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black/20 group-hover:bg-black/30 transition-colors" />
|
||||
</div>
|
||||
<div className="p-8">
|
||||
<div className="flex items-center mb-4">
|
||||
<div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-4">
|
||||
<img src={category.icon} alt="" className="w-8 h-8" />
|
||||
<Link key={idx} href={category.href} className="group block">
|
||||
<Card className="h-full border-none shadow-xl hover:shadow-2xl transition-all duration-700 rounded-[40px] overflow-hidden bg-white">
|
||||
<div className="relative h-[400px] overflow-hidden">
|
||||
<Image
|
||||
src={category.img}
|
||||
alt={category.title}
|
||||
fill
|
||||
className="object-cover transition-transform duration-1000 group-hover:scale-110"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-primary-dark/90 via-primary-dark/20 to-transparent" />
|
||||
<div className="absolute top-8 right-8 w-20 h-20 bg-white/10 backdrop-blur-xl rounded-3xl flex items-center justify-center border border-white/20 shadow-2xl">
|
||||
<img src={category.icon} alt="" className="w-12 h-12 brightness-0 invert" />
|
||||
</div>
|
||||
<div className="absolute bottom-10 left-10 right-10">
|
||||
<Badge variant="accent" className="mb-4 shadow-lg">Category</Badge>
|
||||
<h2 className="text-4xl font-bold text-white mb-4 leading-tight">{category.title}</h2>
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-text-primary group-hover:text-primary transition-colors">{category.title}</h2>
|
||||
</div>
|
||||
<p className="text-text-secondary text-lg mb-6">
|
||||
{category.desc}
|
||||
</p>
|
||||
<span className="text-primary font-medium group-hover:translate-x-1 transition-transform inline-flex items-center">
|
||||
{t('viewProducts')} →
|
||||
</span>
|
||||
</div>
|
||||
<div className="p-12">
|
||||
<p className="text-text-secondary text-xl leading-relaxed mb-10">
|
||||
{category.desc}
|
||||
</p>
|
||||
<div className="flex items-center text-primary font-extrabold text-lg group-hover:text-accent-dark transition-colors">
|
||||
{t('viewProducts')}
|
||||
<div className="ml-4 w-12 h-12 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-6 h-6 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>
|
||||
</Card>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Technical Support CTA */}
|
||||
<Section className="bg-white">
|
||||
<Container>
|
||||
<div className="bg-primary-dark rounded-[60px] p-16 md:p-24 relative overflow-hidden">
|
||||
<div className="absolute top-0 right-0 w-1/2 h-full bg-accent/5 -skew-x-12 translate-x-1/4" />
|
||||
<div className="relative z-10 flex flex-col lg:flex-row items-center justify-between gap-12">
|
||||
<div className="max-w-2xl text-center lg:text-left">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-white mb-6">Need Technical Assistance?</h2>
|
||||
<p className="text-xl text-white/70 leading-relaxed">
|
||||
Our team of experts is ready to help you find the perfect cable solution for your specific technical requirements and environmental conditions.
|
||||
</p>
|
||||
</div>
|
||||
<Link href={`/${params.locale}/contact`} className="inline-flex items-center justify-center h-20 px-12 rounded-full bg-accent text-primary-dark font-extrabold text-xl hover:bg-accent-dark transition-all shadow-2xl shadow-accent/20 group">
|
||||
Contact Experts
|
||||
<span className="ml-4 transition-transform group-hover:translate-x-2">→</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,144 +1,185 @@
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { Section, Container } from '@/components/ui';
|
||||
import { Section, Container, Heading, Card, Badge, Button } from '@/components/ui';
|
||||
import Image from 'next/image';
|
||||
|
||||
export default function TeamPage() {
|
||||
const t = useTranslations('Team');
|
||||
|
||||
return (
|
||||
<div className="flex flex-col min-h-screen">
|
||||
<div className="flex flex-col min-h-screen bg-neutral-light">
|
||||
{/* Hero Section */}
|
||||
<section className="relative flex items-center justify-center overflow-hidden bg-neutral-dark pt-[14%] pb-[12%]">
|
||||
<section className="relative flex items-center justify-center overflow-hidden bg-primary-dark pt-[14%] pb-[12%]">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src="/uploads/2024/12/DSC07655-Large.webp"
|
||||
alt="KLZ Team"
|
||||
fill
|
||||
className="object-cover"
|
||||
className="object-cover scale-105 animate-slow-zoom opacity-40"
|
||||
priority
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-[#0a0000] to-[rgba(10,10,10,0.5)] opacity-80" />
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-primary-dark/80 via-primary-dark/40 to-primary-dark/80" />
|
||||
</div>
|
||||
|
||||
<Container className="relative z-10 text-center text-white max-w-4xl">
|
||||
<h5 className="text-xl md:text-2xl font-medium mb-4 text-primary">
|
||||
{t('hero.title')}
|
||||
</h5>
|
||||
<h2 className="text-3xl md:text-5xl lg:text-6xl font-bold tracking-tight leading-tight">
|
||||
<Container className="relative z-10 text-center text-white max-w-5xl animate-slide-up">
|
||||
<Badge variant="accent" className="mb-8 shadow-lg">Our People</Badge>
|
||||
<h1 className="text-5xl md:text-7xl lg:text-8xl font-extrabold tracking-tight leading-[1.1] mb-8">
|
||||
{t('hero.subtitle')}
|
||||
</h2>
|
||||
</h1>
|
||||
<p className="text-2xl md:text-3xl text-white/70 font-medium italic">
|
||||
{t('hero.title')}
|
||||
</p>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
{/* Michael Bodemer Section */}
|
||||
<section className="relative bg-[#011fff] text-white overflow-hidden">
|
||||
<div className="flex flex-col md:flex-row">
|
||||
<div className="w-full md:w-1/2 p-12 md:p-24 flex flex-col justify-center">
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-8">{t('michael.name')}</h1>
|
||||
<div className="w-12 h-1 bg-white mb-8" />
|
||||
<h2 className="text-2xl md:text-3xl font-medium italic mb-8 leading-relaxed">
|
||||
{t('michael.quote')}
|
||||
</h2>
|
||||
<div className="w-12 h-1 bg-white mb-8" />
|
||||
<p className="text-lg leading-relaxed opacity-90 mb-8">
|
||||
{t('michael.description')}
|
||||
</p>
|
||||
<a
|
||||
href="https://www.linkedin.com/in/michael-bodemer-33b493122/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center text-white font-bold border-2 border-white px-6 py-3 rounded-full hover:bg-white hover:text-[#011fff] transition-colors w-fit group"
|
||||
>
|
||||
{t('michael.linkedin')}
|
||||
<span className="ml-2 group-hover:translate-x-1 transition-transform">→</span>
|
||||
</a>
|
||||
{/* Michael Bodemer Section - Sticky Narrative Split Layout */}
|
||||
<section className="relative bg-white overflow-hidden">
|
||||
<div className="flex flex-col lg:flex-row">
|
||||
<div className="w-full lg:w-1/2 p-12 md:p-24 lg:p-32 flex flex-col justify-center bg-primary-dark text-white relative">
|
||||
<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 animate-fade-in">
|
||||
<Badge variant="accent" className="mb-8">Managing Director</Badge>
|
||||
<Heading level={2} className="text-white mb-10 text-5xl md:text-6xl">
|
||||
<span className="text-white">{t('michael.name')}</span>
|
||||
</Heading>
|
||||
<div className="relative mb-12">
|
||||
<div className="absolute -left-8 top-0 bottom-0 w-1.5 bg-accent rounded-full" />
|
||||
<p className="text-2xl md:text-3xl font-bold italic leading-relaxed pl-8 text-white/90">
|
||||
"{t('michael.quote')}"
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-xl leading-relaxed text-white/70 mb-12 max-w-xl">
|
||||
{t('michael.description')}
|
||||
</p>
|
||||
<Button
|
||||
href="https://www.linkedin.com/in/michael-bodemer-33b493122/"
|
||||
variant="accent"
|
||||
size="xl"
|
||||
className="group"
|
||||
>
|
||||
{t('michael.linkedin')}
|
||||
<span className="ml-3 transition-transform group-hover:translate-x-2">→</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 relative min-h-[50vh] md:min-h-full">
|
||||
<div className="w-full lg:w-1/2 relative min-h-[600px] lg:min-h-screen overflow-hidden">
|
||||
<Image
|
||||
src="/uploads/2024/12/DSC07768-Large.webp"
|
||||
alt={t('michael.name')}
|
||||
fill
|
||||
className="object-cover"
|
||||
className="object-cover scale-105 hover:scale-100 transition-transform duration-1000"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-primary-dark/20 to-transparent" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Legacy Section */}
|
||||
<section className="relative py-[10%] bg-neutral-dark text-white overflow-hidden">
|
||||
{/* Legacy Section - Immersive Background */}
|
||||
<section className="relative py-32 md:py-48 bg-primary-dark text-white overflow-hidden">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src="/uploads/2024/12/1694273920124-copy.webp"
|
||||
alt="Legacy"
|
||||
fill
|
||||
className="object-cover"
|
||||
className="object-cover opacity-30 scale-110 animate-slow-zoom"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-[#263336] opacity-90" />
|
||||
<div className="absolute inset-0 bg-primary-dark/60 mix-blend-multiply" />
|
||||
</div>
|
||||
<Container className="relative z-10">
|
||||
<div className="grid grid-cols-1 md:grid-cols-12 gap-12">
|
||||
<div className="md:col-span-5">
|
||||
<h3 className="text-3xl font-bold mb-6">{t('legacy.title')}</h3>
|
||||
<div className="space-y-6 text-lg opacity-90">
|
||||
<p>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
|
||||
<div className="lg:col-span-6">
|
||||
<Heading level={2} subtitle="Our Heritage" className="text-white mb-10">
|
||||
<span className="text-white">{t('legacy.title')}</span>
|
||||
</Heading>
|
||||
<div className="space-y-8 text-xl md:text-2xl text-white/80 leading-relaxed font-medium">
|
||||
<p className="border-l-4 border-accent pl-8 py-2 bg-white/5 backdrop-blur-sm rounded-r-2xl">
|
||||
{t('legacy.p1')}
|
||||
</p>
|
||||
<p>
|
||||
<p className="pl-9">
|
||||
{t('legacy.p2')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:col-span-6 grid grid-cols-2 gap-6">
|
||||
{[
|
||||
{ label: 'Founded', value: '1998' },
|
||||
{ label: 'Global Reach', value: '45+' },
|
||||
{ label: 'Team Members', value: '120+' },
|
||||
{ label: 'Innovation Awards', value: '12' },
|
||||
].map((stat, i) => (
|
||||
<div key={i} className="p-8 bg-white/5 backdrop-blur-md border border-white/10 rounded-[32px] hover:bg-white/10 transition-colors">
|
||||
<div className="text-4xl font-extrabold text-accent mb-2">{stat.value}</div>
|
||||
<div className="text-sm font-bold uppercase tracking-widest text-white/50">{stat.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
{/* Klaus Mintel Section */}
|
||||
<section className="relative bg-[#011fff] text-white overflow-hidden">
|
||||
<div className="flex flex-col md:flex-row">
|
||||
<div className="w-full md:w-1/2 relative min-h-[50vh] md:min-h-full order-2 md:order-1">
|
||||
{/* Klaus Mintel Section - Reversed Split Layout */}
|
||||
<section className="relative bg-white overflow-hidden">
|
||||
<div className="flex flex-col lg:flex-row">
|
||||
<div className="w-full lg:w-1/2 relative min-h-[600px] lg:min-h-screen overflow-hidden order-2 lg:order-1">
|
||||
<Image
|
||||
src="/uploads/2024/12/DSC07963-Large.webp"
|
||||
alt={t('klaus.name')}
|
||||
fill
|
||||
className="object-cover"
|
||||
className="object-cover scale-105 hover:scale-100 transition-transform duration-1000"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-l from-primary-dark/20 to-transparent" />
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-12 md:p-24 flex flex-col justify-center order-1 md:order-2">
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-8">{t('klaus.name')}</h1>
|
||||
<div className="w-12 h-1 bg-white mb-8" />
|
||||
<h2 className="text-2xl md:text-3xl font-medium italic mb-8 leading-relaxed">
|
||||
{t('klaus.quote')}
|
||||
</h2>
|
||||
<div className="w-12 h-1 bg-white mb-8" />
|
||||
<p className="text-lg leading-relaxed opacity-90 mb-8">
|
||||
{t('klaus.description')}
|
||||
</p>
|
||||
<a
|
||||
href="https://www.linkedin.com/in/klaus-mintel-b80a8b193/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center text-white font-bold border-2 border-white px-6 py-3 rounded-full hover:bg-white hover:text-[#011fff] transition-colors w-fit group"
|
||||
>
|
||||
{t('klaus.linkedin')}
|
||||
<span className="ml-2 group-hover:translate-x-1 transition-transform">→</span>
|
||||
</a>
|
||||
<div className="w-full lg:w-1/2 p-12 md:p-24 lg:p-32 flex flex-col justify-center bg-neutral-light text-primary relative order-1 lg: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 animate-fade-in">
|
||||
<Badge variant="primary" className="mb-8">Founder & Visionary</Badge>
|
||||
<Heading level={2} className="text-primary mb-10 text-5xl md:text-6xl">
|
||||
{t('klaus.name')}
|
||||
</Heading>
|
||||
<div className="relative mb-12">
|
||||
<div className="absolute -left-8 top-0 bottom-0 w-1.5 bg-primary rounded-full" />
|
||||
<p className="text-2xl md:text-3xl font-bold italic leading-relaxed pl-8 text-text-secondary">
|
||||
"{t('klaus.quote')}"
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-xl leading-relaxed text-text-secondary mb-12 max-w-xl">
|
||||
{t('klaus.description')}
|
||||
</p>
|
||||
<Button
|
||||
href="https://www.linkedin.com/in/klaus-mintel-b80a8b193/"
|
||||
variant="primary"
|
||||
size="xl"
|
||||
className="group"
|
||||
>
|
||||
{t('klaus.linkedin')}
|
||||
<span className="ml-3 transition-transform group-hover:translate-x-2">→</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Manifesto Section */}
|
||||
<Section className="bg-white text-neutral-dark">
|
||||
{/* Manifesto Section - Modern Grid */}
|
||||
<Section className="bg-white text-primary">
|
||||
<Container>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-20">
|
||||
<div className="lg:col-span-4">
|
||||
<h2 className="text-4xl font-bold text-primary mb-6 sticky top-24">{t('manifesto.title')}</h2>
|
||||
<div className="sticky top-32">
|
||||
<Heading level={2} subtitle="Our Values">
|
||||
{t('manifesto.title')}
|
||||
</Heading>
|
||||
<p className="text-xl text-text-secondary leading-relaxed">
|
||||
Our core principles guide every decision we make and every cable we deliver.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div className="lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-10">
|
||||
{[0, 1, 2, 3, 4, 5].map((idx) => (
|
||||
<div key={idx} className="bg-neutral-light p-6 rounded-lg border border-neutral hover:border-primary transition-colors">
|
||||
<div className="text-primary font-mono text-xl mb-4">0{idx + 1}</div>
|
||||
<h3 className="text-xl font-bold mb-3">{t(`manifesto.items.${idx}.title`)}</h3>
|
||||
<p className="text-text-secondary">{t(`manifesto.items.${idx}.description`)}</p>
|
||||
<div key={idx} className="p-10 bg-neutral-light rounded-[40px] border border-transparent hover:border-accent hover:bg-white hover:shadow-2xl transition-all duration-500 group">
|
||||
<div className="w-16 h-16 bg-white rounded-2xl flex items-center justify-center mb-8 shadow-sm group-hover:bg-accent transition-colors duration-500">
|
||||
<span className="text-primary font-extrabold text-2xl group-hover:text-primary-dark">0{idx + 1}</span>
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold mb-4 text-primary">{t(`manifesto.items.${idx}.title`)}</h3>
|
||||
<p className="text-text-secondary text-lg leading-relaxed">{t(`manifesto.items.${idx}.description`)}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -146,10 +187,13 @@ export default function TeamPage() {
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Gallery Section */}
|
||||
<Section className="bg-neutral-dark py-0 pb-24 pt-24">
|
||||
{/* Gallery Section - Premium Treatment */}
|
||||
<Section className="bg-primary-dark py-32">
|
||||
<Container>
|
||||
<div className="grid grid-cols-2 md:grid-cols-5 gap-4">
|
||||
<Heading level={2} subtitle="Behind the Scenes" align="center" className="text-white mb-20">
|
||||
<span className="text-white">Life at KLZ</span>
|
||||
</Heading>
|
||||
<div className="grid grid-cols-2 md:grid-cols-5 gap-6">
|
||||
{[
|
||||
'/uploads/2024/12/DSC07539-Large-600x400.webp',
|
||||
'/uploads/2024/12/DSC07460-Large-600x400.webp',
|
||||
@@ -157,8 +201,10 @@ export default function TeamPage() {
|
||||
'/uploads/2024/12/DSC07433-Large-600x400.webp',
|
||||
'/uploads/2024/12/DSC07387-Large-600x400.webp'
|
||||
].map((src, idx) => (
|
||||
<div key={idx} className="relative aspect-video rounded-lg overflow-hidden opacity-80 hover:opacity-100 transition-opacity">
|
||||
<Image src={src} alt="Team Gallery" fill className="object-cover" />
|
||||
<div key={idx} className="relative aspect-[3/4] 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" />
|
||||
<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-[12px] border-white/10 transition-all duration-500 pointer-events-none" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import { useTranslations, useLocale } from 'next-intl';
|
||||
import { Container, Heading } from './ui';
|
||||
|
||||
export default function Footer() {
|
||||
const t = useTranslations('Footer');
|
||||
@@ -8,92 +9,85 @@ export default function Footer() {
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
return (
|
||||
<footer className="bg-white text-neutral-dark py-16 border-t border-neutral-light">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 mb-12">
|
||||
{/* Column 1: Legal & Languages */}
|
||||
<div className="space-y-8">
|
||||
<div>
|
||||
<h4 className="text-lg font-bold mb-4">{t('legal')}</h4>
|
||||
<ul className="space-y-2 text-sm text-text-secondary">
|
||||
<li><Link href={`/${locale}/${t('legalNoticeSlug')}`} className="hover:text-primary">{t('legalNotice')}</Link></li>
|
||||
<li><Link href={`/${locale}/${t('privacyPolicySlug')}`} className="hover:text-primary">{t('privacyPolicy')}</Link></li>
|
||||
<li><Link href={`/${locale}/${t('termsSlug')}`} className="hover:text-primary">{t('terms')}</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-lg font-bold mb-4">{t('languages')}</h4>
|
||||
<ul className="space-y-2 text-sm text-text-secondary">
|
||||
<li><Link href="/en" className="hover:text-primary">English</Link></li>
|
||||
<li><Link href="/de" className="hover:text-primary">Deutsch</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-text-secondary">
|
||||
Copyright © {currentYear} KLZ Cables.<br />
|
||||
All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<Image
|
||||
src="/logo-white.svg"
|
||||
alt="KLZ Cables"
|
||||
width={100}
|
||||
height={25}
|
||||
className="h-6 w-auto invert"
|
||||
unoptimized
|
||||
/>
|
||||
<footer className="bg-primary-dark text-white py-24 relative overflow-hidden">
|
||||
<div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-white/20 to-transparent" />
|
||||
|
||||
<Container>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-16 mb-20">
|
||||
{/* Brand Column */}
|
||||
<div className="lg:col-span-4 space-y-8">
|
||||
<Link href={`/${locale}`} className="inline-block group">
|
||||
<Image
|
||||
src="/logo-white.svg"
|
||||
alt="KLZ Cables"
|
||||
width={150}
|
||||
height={40}
|
||||
className="h-10 w-auto transition-transform duration-500 group-hover:scale-110"
|
||||
unoptimized
|
||||
/>
|
||||
</Link>
|
||||
<p className="text-white/60 text-lg leading-relaxed max-w-sm">
|
||||
Leading the way in cable infrastructure and sustainable energy solutions. Quality, innovation, and reliability since 1998.
|
||||
</p>
|
||||
<div className="flex gap-4">
|
||||
{['linkedin', 'twitter', 'facebook'].map((social) => (
|
||||
<a key={social} href="#" className="w-12 h-12 rounded-full bg-white/5 flex items-center justify-center hover:bg-accent hover:text-primary-dark transition-all duration-300 border border-white/10">
|
||||
<span className="sr-only">{social}</span>
|
||||
<div className="w-5 h-5 bg-current rounded-sm opacity-80" />
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Column 2: Archives */}
|
||||
<div>
|
||||
<h4 className="text-lg font-bold mb-4">{t('archives')}</h4>
|
||||
<ul className="space-y-2 text-sm text-text-secondary">
|
||||
<li><Link href="#" className="hover:text-primary">November 2025</Link></li>
|
||||
<li><Link href="#" className="hover:text-primary">September 2025</Link></li>
|
||||
<li><Link href="#" className="hover:text-primary">August 2025</Link></li>
|
||||
<li><Link href="#" className="hover:text-primary">June 2025</Link></li>
|
||||
<li><Link href="#" className="hover:text-primary">May 2025</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Column 3: Categories */}
|
||||
<div>
|
||||
<h4 className="text-lg font-bold mb-4">{t('categories')}</h4>
|
||||
<ul className="space-y-2 text-sm text-text-secondary">
|
||||
<li><Link href="#" className="hover:text-primary">Cable Logistics</Link></li>
|
||||
<li><Link href="#" className="hover:text-primary">Cable Technology</Link></li>
|
||||
<li><Link href="#" className="hover:text-primary">KLZ News</Link></li>
|
||||
<li><Link href="#" className="hover:text-primary">Renewable Energy</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Column 4: Recent Posts */}
|
||||
{/* Links Columns */}
|
||||
<div className="lg:col-span-2">
|
||||
<h4 className="text-lg font-bold mb-4">{t('recentPosts')}</h4>
|
||||
<ul className="space-y-4 text-sm text-text-secondary">
|
||||
<li>
|
||||
<Link href="#" className="hover:text-primary block font-medium">Focus on wind farm construction: three typical cable challenges</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="#" className="hover:text-primary block font-medium">Why the N2XS(F)2Y is the ideal cable for your energy project</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="#" className="hover:text-primary block font-medium">Shortage of NA2XSF2Y? We have the three-core medium-voltage cable</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="#" className="hover:text-primary block font-medium">Which cables for wind power? Differences from low to extra-high voltage explained</Link>
|
||||
</li>
|
||||
<h4 className="text-accent font-bold uppercase tracking-widest text-sm mb-8">{t('legal')}</h4>
|
||||
<ul className="space-y-4 text-white/70">
|
||||
<li><Link href={`/${locale}/${t('legalNoticeSlug')}`} className="hover:text-white transition-colors">{t('legalNotice')}</Link></li>
|
||||
<li><Link href={`/${locale}/${t('privacyPolicySlug')}`} className="hover:text-white transition-colors">{t('privacyPolicy')}</Link></li>
|
||||
<li><Link href={`/${locale}/${t('termsSlug')}`} className="hover:text-white transition-colors">{t('terms')}</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-2">
|
||||
<h4 className="text-accent font-bold uppercase tracking-widest text-sm mb-8">Company</h4>
|
||||
<ul className="space-y-4 text-white/70">
|
||||
<li><Link href={`/${locale}/team`} className="hover:text-white transition-colors">Our Team</Link></li>
|
||||
<li><Link href={`/${locale}/products`} className="hover:text-white transition-colors">Products</Link></li>
|
||||
<li><Link href={`/${locale}/blog`} className="hover:text-white transition-colors">Blog</Link></li>
|
||||
<li><Link href={`/${locale}/contact`} className="hover:text-white transition-colors">Contact</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Recent Posts Column */}
|
||||
<div className="lg:col-span-4">
|
||||
<h4 className="text-accent font-bold uppercase tracking-widest text-sm mb-8">{t('recentPosts')}</h4>
|
||||
<ul className="space-y-6">
|
||||
{[
|
||||
"Focus on wind farm construction: three typical cable challenges",
|
||||
"Why the N2XS(F)2Y is the ideal cable for your energy project"
|
||||
].map((post, i) => (
|
||||
<li key={i}>
|
||||
<Link href="#" className="group block">
|
||||
<p className="text-white/80 font-bold group-hover:text-accent transition-colors leading-snug mb-2">
|
||||
{post}
|
||||
</p>
|
||||
<span className="text-xs text-white/40 uppercase tracking-widest">Read Article →</span>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Slide out widget area (hidden for now, but referenced in HTML) */}
|
||||
<div className="fixed top-0 right-0 h-full w-80 bg-white shadow-2xl transform translate-x-full transition-transform duration-300 z-50">
|
||||
{/* Content would go here */}
|
||||
</div>
|
||||
|
||||
<div className="pt-12 border-t border-white/10 flex flex-col md:flex-row justify-between items-center gap-8 text-white/40 text-sm font-medium">
|
||||
<p>Copyright © {currentYear} KLZ Vertriebs GmbH. All rights reserved.</p>
|
||||
<div className="flex gap-8">
|
||||
<Link href="/en" className="hover:text-white transition-colors">English</Link>
|
||||
<Link href="/de" className="hover:text-white transition-colors">Deutsch</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -43,16 +43,14 @@ export default function Header() {
|
||||
];
|
||||
|
||||
const headerClass = cn(
|
||||
"fixed top-0 left-0 right-0 z-50 transition-all duration-300",
|
||||
"fixed top-0 left-0 right-0 z-50 transition-all duration-500",
|
||||
{
|
||||
"bg-transparent": isHomePage && !isScrolled,
|
||||
"bg-white shadow-md": !isHomePage || isScrolled,
|
||||
"py-4": !isScrolled,
|
||||
"py-2": isScrolled
|
||||
"bg-transparent py-8": isHomePage && !isScrolled,
|
||||
"bg-white/90 backdrop-blur-xl shadow-2xl py-4 border-b border-primary/5": !isHomePage || isScrolled,
|
||||
}
|
||||
);
|
||||
|
||||
const textColorClass = (isHomePage && !isScrolled) ? "text-white" : "text-text-primary";
|
||||
const textColorClass = (isHomePage && !isScrolled) ? "text-white" : "text-primary";
|
||||
const logoSrc = (isHomePage && !isScrolled)
|
||||
? "/logo-white.svg"
|
||||
: "/logo-blue.svg";
|
||||
@@ -60,64 +58,65 @@ export default function Header() {
|
||||
return (
|
||||
<>
|
||||
<header className={headerClass}>
|
||||
<div className="container mx-auto px-4 flex items-center justify-between">
|
||||
<Link href={`/${currentLocale}`} className="flex-shrink-0">
|
||||
<div className="container mx-auto px-6 md:px-12 lg:px-16 max-w-7xl flex items-center justify-between">
|
||||
<Link href={`/${currentLocale}`} className="flex-shrink-0 group">
|
||||
<Image
|
||||
src={logoSrc}
|
||||
alt="KLZ Cables"
|
||||
width={100}
|
||||
height={100}
|
||||
className="h-12 w-auto transition-all duration-300"
|
||||
width={120}
|
||||
height={120}
|
||||
className="h-14 w-auto transition-all duration-500 group-hover:scale-110"
|
||||
priority
|
||||
unoptimized
|
||||
/>
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center gap-8">
|
||||
<nav className="hidden lg:flex items-center space-x-8">
|
||||
<div className="flex items-center gap-12">
|
||||
<nav className="hidden lg:flex items-center space-x-10">
|
||||
{menuItems.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
|
||||
className={cn(textColorClass, "hover:text-primary font-medium transition-colors text-lg")}
|
||||
className={cn(
|
||||
textColorClass,
|
||||
"hover:text-accent font-bold transition-all text-lg tracking-tight relative group"
|
||||
)}
|
||||
>
|
||||
{item.label}
|
||||
<span className="absolute -bottom-2 left-0 w-0 h-1 bg-accent transition-all duration-300 group-hover:w-full rounded-full" />
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div className={cn("hidden lg:flex items-center space-x-4", textColorClass)}>
|
||||
<div className="flex items-center space-x-2 text-sm font-medium">
|
||||
<div className={cn("hidden lg:flex items-center space-x-8", textColorClass)}>
|
||||
<div className="flex items-center space-x-4 text-sm font-extrabold tracking-widest uppercase">
|
||||
<Link
|
||||
href={getPathForLocale('en')}
|
||||
className={`hover:text-primary transition-colors flex items-center gap-1 ${currentLocale === 'en' ? 'text-primary font-bold' : 'opacity-80'}`}
|
||||
className={`hover:text-accent transition-colors flex items-center gap-2 ${currentLocale === 'en' ? 'text-accent' : 'opacity-60'}`}
|
||||
>
|
||||
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAMAAABBPP0LAAAAmVBMVEViZsViZMJiYrf9gnL8eWrlYkjgYkjZYkj8/PujwPybvPz4+PetraBEgfo+fvo3efkydfkqcvj8Y2T8UlL8Q0P8MzP9k4Hz8/Lu7u4DdPj9/VrKysI9fPoDc/EAZ7z7IiLHYkjp6ekCcOTk5OIASbfY/v21takAJrT5Dg6sYkjc3Nn94t2RkYD+y8KeYkjs/v7l5fz0dF22YkjWvcOLAAAAgElEQVR4AR2KNULFQBgGZ5J13KGGKvc/Cw1uPe62eb9+Jr1EUBFHSgxxjP2Eca6AfUSfVlUfBvm1Ui1bqafctqMndNkXpb01h5TLx4b6TIXgwOCHfjv+/Pz+5vPRw7txGWT2h6yO0/GaYltIp5PT1dEpLNPL/SdWjYjAAZtvRPgHJX4Xio+DSrkAAAAASUVORK5CYII=" alt="English" width="16" height="11" />
|
||||
EN
|
||||
</Link>
|
||||
<div className="w-px h-4 bg-current opacity-20" />
|
||||
<Link
|
||||
href={getPathForLocale('de')}
|
||||
className={`hover:text-primary transition-colors flex items-center gap-1 ${currentLocale === 'de' ? 'text-primary font-bold' : 'opacity-80'}`}
|
||||
className={`hover:text-accent transition-colors flex items-center gap-2 ${currentLocale === 'de' ? 'text-accent' : 'opacity-60'}`}
|
||||
>
|
||||
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAIAAAD5gJpuAAABLElEQVR4AY2QgUZEQRSGz9ydmzbYkBWABBJYABHEFhJ6m0WP0DMEQNIr9AKrN8ne2Tt3Zs7MOdOZmRBEv+v34Tvub9R6fdNlAzU+snSME/wdjbjbbJ6EiEg6BA8102QbjKNpoMzw8v6qD/sOALbbT2MC1NgaAWOKOgxf5czY+4dbAX2G/THzcozLrvPV85IQyqVz0rvg2p9Pei4HjzSsiFbV4JgyhhxCjpGdZ0RhdikLB9/b8Qig7MkpSovR7Cp59q6CazaNFiTt4J82o6uvdMVwTsztKTXZod4jgOJJuqNAjFyGrBR8gM6XwKfIC4KanBSTZ0rClKh08D9DFh3egW7ebH7NcRDQWrz9rM2Ne+mDOXB2mZJ8agL19nwxR2iZXGm1gDbQKhDjd4yHb2oW/KR8xHicAAAAAElFTkSuQmCC" alt="Deutsch" width="16" height="11" />
|
||||
DE
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
href={`/${currentLocale}/contact`}
|
||||
variant="outline"
|
||||
className={cn(
|
||||
"rounded-full px-6 transition-colors",
|
||||
isHomePage && !isScrolled
|
||||
? "border-white text-white hover:bg-white hover:text-black"
|
||||
: "border-primary text-primary hover:bg-primary hover:text-white"
|
||||
)}
|
||||
variant={isHomePage && !isScrolled ? "white" : "primary"}
|
||||
size="md"
|
||||
className="px-8 shadow-xl"
|
||||
>
|
||||
{t('contact')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<button className={cn("lg:hidden p-2", textColorClass)}>
|
||||
<button className={cn("lg:hidden p-2 rounded-xl bg-white/10 backdrop-blur-md border border-white/20", textColorClass)}>
|
||||
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
@@ -125,7 +124,7 @@ export default function Header() {
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
{!isHomePage && <div className="h-24 md:h-32" />}
|
||||
{!isHomePage && <div className="h-32 md:h-40" />}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,25 +1,32 @@
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useTranslations, useLocale } from 'next-intl';
|
||||
import { Section, Container } from '../../components/ui';
|
||||
import { Section, Container, Button, Heading } from '../../components/ui';
|
||||
|
||||
export default function CTA() {
|
||||
const t = useTranslations('Home.cta');
|
||||
const locale = useLocale();
|
||||
|
||||
return (
|
||||
<Section className="bg-primary text-white py-24">
|
||||
<Container>
|
||||
<div className="flex flex-col md:flex-row items-center justify-between gap-8">
|
||||
<h2 className="text-3xl md:text-4xl font-bold max-w-2xl">
|
||||
{t('title')}
|
||||
</h2>
|
||||
<Link href={`/${locale}/contact`} className="group flex items-center gap-4 text-xl font-bold text-[#82ed20]">
|
||||
{t('button')}
|
||||
<span className="w-10 h-10 border-2 border-[#82ed20] rounded-full flex items-center justify-center group-hover:bg-[#82ed20] group-hover:text-primary transition-all">
|
||||
→
|
||||
</span>
|
||||
</Link>
|
||||
<Section className="bg-primary-dark text-white py-32 relative overflow-hidden">
|
||||
<div className="absolute top-0 right-0 w-1/3 h-full bg-accent/5 -skew-x-12 translate-x-1/2" />
|
||||
<div className="absolute bottom-0 left-0 w-1/4 h-1/2 bg-primary/10 rounded-full blur-3xl -translate-x-1/2 translate-y-1/2" />
|
||||
|
||||
<Container className="relative z-10">
|
||||
<div className="flex flex-col lg:flex-row items-center justify-between gap-16">
|
||||
<div className="max-w-3xl text-center lg:text-left">
|
||||
<Heading level={2} subtitle="Get Started" className="text-white mb-6">
|
||||
<span className="text-white">{t('title')}</span>
|
||||
</Heading>
|
||||
<p className="text-xl text-white/70 leading-relaxed">
|
||||
Partner with KLZ for reliable, high-performance cable solutions tailored to your project's unique requirements.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex-shrink-0">
|
||||
<Button href={`/${locale}/contact`} variant="accent" size="xl" className="group px-12">
|
||||
{t('button')}
|
||||
<span className="ml-3 transition-transform group-hover:translate-x-2">→</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
@@ -1,32 +1,51 @@
|
||||
import React from 'react';
|
||||
import Image from 'next/image';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { Section, Container } from '../../components/ui';
|
||||
import { Section, Container, Heading } from '../../components/ui';
|
||||
|
||||
export default function Experience() {
|
||||
const t = useTranslations('Home.experience');
|
||||
|
||||
return (
|
||||
<Section className="relative py-24 md:py-32 overflow-hidden text-white">
|
||||
<Section className="relative py-32 md:py-48 overflow-hidden text-white">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src="/uploads/2024/12/1694273920124-copy-2.webp"
|
||||
alt="Experience Background"
|
||||
fill
|
||||
className="object-cover object-left"
|
||||
className="object-cover object-center scale-105 animate-slow-zoom"
|
||||
unoptimized
|
||||
/>
|
||||
<div className="absolute inset-0 bg-[#263336] bg-gradient-to-r from-[#263336] via-[#263336]/25 to-transparent opacity-100" />
|
||||
<div className="absolute inset-0 bg-primary-dark/80 mix-blend-multiply" />
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-primary-dark via-primary-dark/40 to-transparent" />
|
||||
</div>
|
||||
|
||||
<Container className="relative z-10">
|
||||
<div className="max-w-2xl">
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-8 leading-tight">
|
||||
{t('title')}
|
||||
</h2>
|
||||
<div className="space-y-6 text-lg text-white/90 leading-relaxed">
|
||||
<p>{t('p1')}</p>
|
||||
<p>{t('p2')}</p>
|
||||
<div className="max-w-3xl">
|
||||
<Heading level={2} subtitle="Our Legacy" className="text-white">
|
||||
<span className="text-white">{t('title')}</span>
|
||||
</Heading>
|
||||
<div className="space-y-8 text-xl text-white/90 leading-relaxed font-medium">
|
||||
<p className="border-l-4 border-accent pl-8 py-2 bg-white/5 backdrop-blur-sm rounded-r-xl">
|
||||
{t('p1')}
|
||||
</p>
|
||||
<p className="pl-9">
|
||||
{t('p2')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-16 grid grid-cols-2 md:grid-cols-4 gap-8">
|
||||
{[
|
||||
{ label: 'Years Experience', value: '25+' },
|
||||
{ label: 'Projects Completed', value: '1.2k' },
|
||||
{ label: 'Global Partners', value: '85' },
|
||||
{ label: 'Cable Types', value: '450+' },
|
||||
].map((stat, i) => (
|
||||
<div key={i} className="animate-fade-in" style={{ animationDelay: `${i * 100}ms` }}>
|
||||
<div className="text-4xl font-extrabold text-accent mb-2">{stat.value}</div>
|
||||
<div className="text-sm font-bold uppercase tracking-widest text-white/60">{stat.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import Image from 'next/image';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { Section, Container } from '../../components/ui';
|
||||
import { Section, Container, Heading } from '../../components/ui';
|
||||
|
||||
export default function GallerySection() {
|
||||
const t = useTranslations('Home.gallery');
|
||||
@@ -15,23 +15,24 @@ export default function GallerySection() {
|
||||
];
|
||||
|
||||
return (
|
||||
<Section className="bg-white text-neutral-dark py-24">
|
||||
<Section className="bg-white text-neutral-dark py-32">
|
||||
<Container>
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl md:text-5xl font-bold">{t('title')}</h2>
|
||||
</div>
|
||||
<Heading level={2} subtitle="Visual Journey" align="center">
|
||||
{t('title')}
|
||||
</Heading>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{images.map((src, idx) => (
|
||||
<div key={idx} className="relative aspect-[4/3] overflow-hidden rounded-lg group">
|
||||
<div key={idx} className="relative aspect-[4/3] overflow-hidden rounded-3xl group shadow-lg hover:shadow-2xl transition-all duration-700">
|
||||
<Image
|
||||
src={src}
|
||||
alt={`${t('alt')} ${idx + 1}`}
|
||||
fill
|
||||
className="object-cover transition-transform duration-500 group-hover:scale-110"
|
||||
className="object-cover transition-transform duration-1000 group-hover:scale-110"
|
||||
unoptimized
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black/20 group-hover:bg-transparent transition-colors" />
|
||||
<div className="absolute inset-0 bg-primary-dark/20 group-hover:bg-transparent transition-all duration-500" />
|
||||
<div className="absolute inset-0 border-0 group-hover:border-[16px] border-white/10 transition-all duration-500 pointer-events-none" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -1,17 +1,16 @@
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { Container } from '@/components/ui';
|
||||
import { Container, Button } from '@/components/ui';
|
||||
import Scribble from '@/components/Scribble';
|
||||
|
||||
export default function Hero() {
|
||||
const t = useTranslations('Home.hero');
|
||||
|
||||
return (
|
||||
<section className="relative h-[80vh] flex items-center justify-center overflow-hidden bg-neutral-dark">
|
||||
<section className="relative h-[90vh] flex items-center justify-center overflow-hidden bg-primary-dark">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<video
|
||||
className="w-full h-full object-cover"
|
||||
className="w-full h-full object-cover scale-105 animate-slow-zoom"
|
||||
autoPlay
|
||||
muted
|
||||
loop
|
||||
@@ -21,31 +20,38 @@ export default function Hero() {
|
||||
<source src="/uploads/2025/02/header.webm" type="video/webm" />
|
||||
<source src="/uploads/2025/02/header.mp4" type="video/mp4" />
|
||||
</video>
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-black/10 to-black/40" />
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-primary-dark/40 via-primary-dark/20 to-primary-dark/60" />
|
||||
</div>
|
||||
|
||||
<Container className="relative z-10 text-left text-white w-full">
|
||||
<div className="max-w-4xl">
|
||||
<h1 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 tracking-tight leading-tight">
|
||||
<div className="max-w-5xl animate-slide-up">
|
||||
<h1 className="text-5xl md:text-7xl lg:text-8xl font-extrabold mb-8 tracking-tight leading-[1.05]">
|
||||
{t.rich('title', {
|
||||
green: (chunks) => (
|
||||
<span className="relative inline-block ml-4 mr-2">
|
||||
<span className="relative z-10 text-white italic">{chunks}</span>
|
||||
<Scribble variant="circle" className="w-[140%] h-[140%] -top-[20%] -left-[20%]" />
|
||||
<span className="relative inline-block">
|
||||
<span className="relative z-10 text-accent italic">{chunks}</span>
|
||||
<Scribble variant="circle" className="w-[140%] h-[140%] -top-[20%] -left-[20%] text-accent/30" />
|
||||
</span>
|
||||
)
|
||||
})}
|
||||
</h1>
|
||||
<div className="mt-8">
|
||||
<Link href="/contact" className="inline-flex items-center text-white text-xl font-medium group">
|
||||
<div className="mt-12 flex flex-wrap gap-6">
|
||||
<Button href="/contact" variant="accent" size="xl" className="group">
|
||||
{t('cta')}
|
||||
<span className="ml-2 w-8 h-8 border-2 border-white rounded-full flex items-center justify-center group-hover:bg-white group-hover:text-black transition-all">
|
||||
→
|
||||
</span>
|
||||
</Link>
|
||||
<span className="ml-3 transition-transform group-hover:translate-x-1">→</span>
|
||||
</Button>
|
||||
<Button href="/products" variant="white" size="xl" className="group">
|
||||
Explore Products
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
|
||||
<div className="absolute bottom-10 left-1/2 -translate-x-1/2 animate-bounce">
|
||||
<div className="w-6 h-10 border-2 border-white/30 rounded-full flex justify-center p-1">
|
||||
<div className="w-1 h-2 bg-white rounded-full" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,47 +1,58 @@
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import { useTranslations, useLocale } from 'next-intl';
|
||||
import { Section, Container, Button } from '../../components/ui';
|
||||
import { Section, Container, Button, Heading } from '../../components/ui';
|
||||
|
||||
export default function MeetTheTeam() {
|
||||
const t = useTranslations('Home.meetTheTeam');
|
||||
const locale = useLocale();
|
||||
|
||||
return (
|
||||
<Section className="relative py-24 md:py-32 overflow-hidden">
|
||||
<Section className="relative py-32 md:py-48 overflow-hidden">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src="/uploads/2024/12/DSC08036-Large.webp"
|
||||
alt="KLZ Team"
|
||||
fill
|
||||
className="object-cover"
|
||||
className="object-cover scale-105 animate-slow-zoom"
|
||||
unoptimized
|
||||
/>
|
||||
<div className="absolute inset-0 bg-[#263336] bg-gradient-to-r from-[#263336] via-[#263336]/25 to-transparent opacity-100" />
|
||||
<div className="absolute inset-0 bg-primary-dark/70 mix-blend-multiply" />
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-primary-dark via-primary-dark/20 to-transparent" />
|
||||
</div>
|
||||
|
||||
<Container className="relative z-10">
|
||||
<div className="max-w-2xl text-white">
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<div className="w-12 h-12 rounded-full overflow-hidden border-2 border-white/20">
|
||||
{/* Placeholder for avatar if needed, or just icon */}
|
||||
<div className="w-full h-full bg-primary flex items-center justify-center">
|
||||
<span className="font-bold">KLZ</span>
|
||||
</div>
|
||||
</div>
|
||||
<h2 className="text-3xl font-bold">{t('title')}</h2>
|
||||
</div>
|
||||
<div className="max-w-3xl text-white animate-slide-up">
|
||||
<Heading level={2} subtitle="The People Behind KLZ" className="text-white mb-8">
|
||||
<span className="text-white">{t('title')}</span>
|
||||
</Heading>
|
||||
|
||||
<div className="bg-white/10 backdrop-blur-sm rounded-lg p-6 mb-8 border border-white/10">
|
||||
<p className="text-lg leading-relaxed">
|
||||
{t('description')}
|
||||
<div className="relative mb-12">
|
||||
<div className="absolute -left-8 top-0 bottom-0 w-1 bg-accent rounded-full" />
|
||||
<p className="text-2xl md:text-3xl leading-relaxed font-medium italic text-white/90 pl-8">
|
||||
"{t('description')}"
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Button href={`/${locale}/team`} variant="primary" size="lg">
|
||||
{t('cta')}
|
||||
</Button>
|
||||
<div className="flex flex-wrap gap-8 items-center">
|
||||
<Button href={`/${locale}/team`} variant="accent" size="xl" className="group">
|
||||
{t('cta')}
|
||||
<span className="ml-3 transition-transform group-hover:translate-x-2">→</span>
|
||||
</Button>
|
||||
|
||||
<div className="flex -space-x-4">
|
||||
{[1, 2, 3, 4].map((i) => (
|
||||
<div key={i} className="w-14 h-14 rounded-full border-4 border-primary-dark bg-neutral-medium overflow-hidden">
|
||||
<div className="w-full h-full bg-primary-light flex items-center justify-center text-primary font-bold text-xs">
|
||||
KLZ
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div className="w-14 h-14 rounded-full border-4 border-primary-dark bg-accent flex items-center justify-center text-primary-dark font-bold text-sm">
|
||||
+12
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
@@ -2,7 +2,7 @@ import React from 'react';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import { useTranslations, useLocale } from 'next-intl';
|
||||
import { Section } from '../../components/ui';
|
||||
import { Section, Heading } from '../../components/ui';
|
||||
|
||||
export default function ProductCategories() {
|
||||
const t = useTranslations('Products');
|
||||
@@ -40,26 +40,31 @@ export default function ProductCategories() {
|
||||
];
|
||||
|
||||
return (
|
||||
<Section className="bg-white py-0">
|
||||
<Section className="bg-neutral-light py-0">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
|
||||
{categories.map((category, idx) => (
|
||||
<Link key={idx} href={category.href} className="group block relative h-[400px] md:h-[500px] overflow-hidden">
|
||||
<Link key={idx} href={category.href} className="group block relative h-[500px] lg:h-[650px] overflow-hidden border-r border-white/10 last:border-r-0">
|
||||
<Image
|
||||
src={category.img}
|
||||
alt={category.title}
|
||||
fill
|
||||
className="object-cover transition-transform duration-700 group-hover:scale-110"
|
||||
className="object-cover transition-transform duration-1000 group-hover:scale-110"
|
||||
unoptimized
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black/20 group-hover:bg-black/40 transition-colors" />
|
||||
<div className="absolute inset-0 p-8 flex flex-col justify-center items-center text-center text-white">
|
||||
<div className="mb-4 transform transition-transform group-hover:-translate-y-2">
|
||||
<img src={category.icon} alt="" className="w-16 h-16 mx-auto" />
|
||||
<div className="absolute inset-0 bg-primary-dark/40 group-hover:bg-primary-dark/60 transition-all duration-500" />
|
||||
<div className="absolute inset-0 p-10 flex flex-col justify-end text-white">
|
||||
<div className="mb-6 transform transition-all duration-500 group-hover:-translate-y-4">
|
||||
<div className="w-16 h-16 bg-white/10 backdrop-blur-md rounded-xl flex items-center justify-center mb-6 border border-white/20">
|
||||
<img src={category.icon} alt="" className="w-10 h-10 brightness-0 invert" />
|
||||
</div>
|
||||
<h3 className="text-3xl font-bold mb-4 leading-tight">{category.title}</h3>
|
||||
<p className="text-white/80 text-lg line-clamp-3 opacity-0 group-hover:opacity-100 transition-all duration-500 max-h-0 group-hover:max-h-32">
|
||||
{category.desc}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center text-accent font-bold tracking-wider uppercase text-sm opacity-0 group-hover:opacity-100 transition-all duration-500 delay-100">
|
||||
Explore Category <span className="ml-2 transition-transform group-hover:translate-x-2">→</span>
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold mb-2 transform transition-transform group-hover:-translate-y-2">{category.title}</h3>
|
||||
<p className="text-white/90 opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300">
|
||||
{category.desc}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
|
||||
@@ -2,58 +2,70 @@ import React from 'react';
|
||||
import Link from 'next/link';
|
||||
import { getAllPosts } from '@/lib/blog';
|
||||
import { getTranslations } from 'next-intl/server';
|
||||
import { Section, Container } from '../../components/ui';
|
||||
import { Section, Container, Heading, Card, Badge } from '../../components/ui';
|
||||
|
||||
interface RecentPostsProps {
|
||||
locale: string;
|
||||
}
|
||||
|
||||
export default async function RecentPosts({ locale }: RecentPostsProps) {
|
||||
const t = await getTranslations('Footer'); // Reusing recentPosts title from Footer or Index
|
||||
const posts = await getAllPosts(locale);
|
||||
const recentPosts = posts.slice(0, 3);
|
||||
|
||||
if (recentPosts.length === 0) return null;
|
||||
|
||||
return (
|
||||
<Section className="bg-neutral-light py-24">
|
||||
<Section className="bg-neutral py-24">
|
||||
<Container>
|
||||
<div className="flex items-center justify-between mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-text-primary">
|
||||
<div className="flex flex-col md:flex-row items-end justify-between mb-16 gap-6">
|
||||
<Heading level={2} subtitle="Insights" className="mb-0">
|
||||
{locale === 'de' ? 'Aktuelle Blogbeiträge' : 'Recent Blog Posts'}
|
||||
</h2>
|
||||
<Link href={`/${locale}/blog`} className="text-primary font-bold hover:underline">
|
||||
{locale === 'de' ? 'Alle Beiträge ansehen' : 'View all posts'} →
|
||||
</Heading>
|
||||
<Link href={`/${locale}/blog`} className="group flex items-center text-primary font-bold text-lg">
|
||||
{locale === 'de' ? 'Alle Beiträge ansehen' : 'View all posts'}
|
||||
<span className="ml-2 transition-transform group-hover:translate-x-2">→</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-10">
|
||||
{recentPosts.map((post) => (
|
||||
<Link key={post.slug} href={`/${locale}/blog/${post.slug}`} className="group block bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-all border border-neutral">
|
||||
{post.frontmatter.featuredImage && (
|
||||
<div className="relative h-48 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-105"
|
||||
/>
|
||||
<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">
|
||||
{post.frontmatter.featuredImage && (
|
||||
<div className="relative h-64 overflow-hidden">
|
||||
<img
|
||||
src={post.frontmatter.featuredImage}
|
||||
alt={post.frontmatter.title}
|
||||
className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-primary-dark/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
|
||||
{post.frontmatter.category && (
|
||||
<Badge variant="accent" className="absolute top-4 left-4 shadow-md">
|
||||
{post.frontmatter.category}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="p-8 flex flex-col flex-grow">
|
||||
<div className="text-sm font-medium text-text-light mb-4 flex items-center gap-2">
|
||||
<span className="w-8 h-px bg-neutral-medium" />
|
||||
{new Date(post.frontmatter.date).toLocaleDateString(locale, {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})}
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold text-primary group-hover:text-accent-dark transition-colors line-clamp-2 mb-6 leading-tight">
|
||||
{post.frontmatter.title}
|
||||
</h3>
|
||||
<div className="mt-auto flex items-center text-primary font-bold group-hover:underline decoration-2 underline-offset-4">
|
||||
{locale === 'de' ? 'Weiterlesen' : 'Read more'}
|
||||
<svg className="ml-2 w-5 h-5 transition-transform group-hover:translate-x-2" 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 className="p-6">
|
||||
<div className="text-xs text-text-secondary mb-2">
|
||||
{new Date(post.frontmatter.date).toLocaleDateString(locale, {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})}
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-text-primary group-hover:text-primary transition-colors line-clamp-2 mb-4">
|
||||
{post.frontmatter.title}
|
||||
</h3>
|
||||
<span className="text-primary text-sm font-bold inline-flex items-center">
|
||||
{locale === 'de' ? 'Weiterlesen' : 'Read more'} →
|
||||
</span>
|
||||
</div>
|
||||
</Card>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -1,14 +1,15 @@
|
||||
import React from 'react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import Scribble from '@/components/Scribble';
|
||||
import { Section } from '../../components/ui';
|
||||
|
||||
export default function VideoSection() {
|
||||
const t = useTranslations('Home.video');
|
||||
|
||||
return (
|
||||
<section className="relative h-[60vh] overflow-hidden">
|
||||
<section className="relative h-[70vh] overflow-hidden bg-primary-dark">
|
||||
<video
|
||||
className="w-full h-full object-cover"
|
||||
className="w-full h-full object-cover opacity-60"
|
||||
autoPlay
|
||||
muted
|
||||
loop
|
||||
@@ -16,17 +17,24 @@ export default function VideoSection() {
|
||||
>
|
||||
<source src="/uploads/2024/12/making-of-metal-cable-on-factory-2023-11-27-04-55-16-utc-2.webm" type="video/mp4" />
|
||||
</video>
|
||||
<div className="absolute inset-0 bg-[#0a0a0a]/70 flex items-center justify-center">
|
||||
<h2 className="text-3xl md:text-5xl font-bold text-white text-center max-w-4xl px-4 leading-tight">
|
||||
{t.rich('title', {
|
||||
future: (chunks) => (
|
||||
<span className="relative inline-block mx-2">
|
||||
<span className="relative z-10 italic">{chunks}</span>
|
||||
<Scribble variant="underline" className="w-full h-full top-full left-0" />
|
||||
</span>
|
||||
)
|
||||
})}
|
||||
</h2>
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-primary-dark/60 via-transparent to-primary-dark/60 flex items-center justify-center">
|
||||
<div className="max-w-5xl px-6 text-center animate-slide-up">
|
||||
<h2 className="text-4xl md:text-6xl lg:text-7xl font-extrabold text-white leading-[1.1]">
|
||||
{t.rich('title', {
|
||||
future: (chunks) => (
|
||||
<span className="relative inline-block mx-2">
|
||||
<span className="relative z-10 italic text-accent">{chunks}</span>
|
||||
<Scribble variant="underline" className="w-full h-4 -bottom-2 left-0 text-accent/40" />
|
||||
</span>
|
||||
)
|
||||
})}
|
||||
</h2>
|
||||
<div className="mt-12 flex justify-center">
|
||||
<div className="w-24 h-24 rounded-full border-2 border-white/30 flex items-center justify-center group cursor-pointer hover:bg-white transition-all duration-500">
|
||||
<div className="w-0 h-0 border-t-[12px] border-t-transparent border-l-[20px] border-l-white border-b-[12px] border-b-transparent ml-2 group-hover:border-l-primary-dark transition-colors" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { Section, Container } from '../../components/ui';
|
||||
import { Section, Container, Heading } from '../../components/ui';
|
||||
|
||||
export default function WhatWeDo() {
|
||||
const t = useTranslations('Home.whatWeDo');
|
||||
@@ -8,21 +8,33 @@ export default function WhatWeDo() {
|
||||
return (
|
||||
<Section className="bg-white text-neutral-dark">
|
||||
<Container>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
|
||||
<div className="lg:col-span-3">
|
||||
<div className="sticky top-24">
|
||||
<h2 className="text-5xl font-bold text-primary mb-6">{t('title')}</h2>
|
||||
<p className="text-xl text-text-secondary">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-16 lg:gap-24">
|
||||
<div className="lg:col-span-4">
|
||||
<div className="sticky top-32">
|
||||
<Heading level={2} subtitle="Our Expertise">
|
||||
{t('title')}
|
||||
</Heading>
|
||||
<p className="text-xl text-text-secondary leading-relaxed">
|
||||
{t('subtitle')}
|
||||
</p>
|
||||
<div className="mt-12 p-8 bg-primary-light rounded-2xl border border-primary/10">
|
||||
<p className="text-primary font-bold text-lg italic">
|
||||
"We don't just deliver cables; we deliver the infrastructure for a sustainable future."
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:col-span-9 grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-16">
|
||||
<div className="lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-20">
|
||||
{[0, 1, 2, 3].map((idx) => (
|
||||
<div key={idx} className="space-y-4">
|
||||
<span className="text-sm font-mono text-primary/60 border-b border-primary/20 pb-2 block w-fit">0{idx + 1}</span>
|
||||
<h3 className="text-2xl font-bold">{t(`items.${idx}.title`)}</h3>
|
||||
<p className="text-text-secondary leading-relaxed">{t(`items.${idx}.description`)}</p>
|
||||
<div key={idx} className="group">
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<span className="flex items-center justify-center w-12 h-12 rounded-full bg-primary text-white font-bold text-lg shadow-lg shadow-primary/20 group-hover:scale-110 transition-transform">
|
||||
{idx + 1}
|
||||
</span>
|
||||
<div className="h-px flex-grow bg-neutral-medium" />
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold mb-4 text-primary group-hover:text-accent-dark transition-colors">{t(`items.${idx}.title`)}</h3>
|
||||
<p className="text-text-secondary text-lg leading-relaxed">{t(`items.${idx}.description`)}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -1,28 +1,50 @@
|
||||
import React from 'react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { Section, Container } from '../../components/ui';
|
||||
import { Section, Container, Heading } from '../../components/ui';
|
||||
|
||||
export default function WhyChooseUs() {
|
||||
const t = useTranslations('Home.whyChooseUs');
|
||||
|
||||
return (
|
||||
<Section className="bg-white text-neutral-dark">
|
||||
<Section className="bg-neutral-light text-neutral-dark">
|
||||
<Container>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
|
||||
<div className="lg:col-span-3">
|
||||
<div className="sticky top-24">
|
||||
<h2 className="text-5xl font-bold text-primary mb-6">{t('title')}</h2>
|
||||
<p className="text-xl text-text-secondary">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-16 lg:gap-24">
|
||||
<div className="lg:col-span-4 order-1 lg:order-2">
|
||||
<div className="sticky top-32">
|
||||
<Heading level={2} subtitle="Why KLZ">
|
||||
{t('title')}
|
||||
</Heading>
|
||||
<p className="text-xl text-text-secondary leading-relaxed">
|
||||
{t('subtitle')}
|
||||
</p>
|
||||
|
||||
<div className="mt-12 space-y-6">
|
||||
{[
|
||||
'Certified Quality Standards',
|
||||
'Sustainable Supply Chain',
|
||||
'Expert Technical Support',
|
||||
'Fast Global Delivery'
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex items-center gap-4">
|
||||
<div className="flex-shrink-0 w-6 h-6 rounded-full bg-accent flex items-center justify-center">
|
||||
<svg className="w-4 h-4 text-primary-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<span className="font-bold text-primary">{item}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:col-span-9 grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-16">
|
||||
<div className="lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-8 order-2 lg:order-1">
|
||||
{[0, 1, 2, 3].map((idx) => (
|
||||
<div key={idx} className="space-y-4">
|
||||
<span className="text-sm font-mono text-primary/60 border-b border-primary/20 pb-2 block w-fit">0{idx + 1}</span>
|
||||
<h3 className="text-2xl font-bold">{t(`items.${idx}.title`)}</h3>
|
||||
<p className="text-text-secondary leading-relaxed">{t(`items.${idx}.description`)}</p>
|
||||
<div key={idx} className="p-10 bg-white rounded-3xl border border-neutral-medium hover:border-accent transition-all duration-500 hover:shadow-xl group">
|
||||
<div className="w-14 h-14 bg-primary-light rounded-2xl flex items-center justify-center mb-8 group-hover:bg-accent transition-colors duration-500">
|
||||
<span className="text-primary font-bold text-xl group-hover:text-primary-dark">0{idx + 1}</span>
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold mb-4 text-primary">{t(`items.${idx}.title`)}</h3>
|
||||
<p className="text-text-secondary text-lg leading-relaxed">{t(`items.${idx}.description`)}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -8,27 +8,30 @@ export function cn(...inputs: ClassValue[]) {
|
||||
}
|
||||
|
||||
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
variant?: 'primary' | 'secondary' | 'accent' | 'outline' | 'ghost' | 'white';
|
||||
size?: 'sm' | 'md' | 'lg' | 'xl';
|
||||
href?: string;
|
||||
className?: string;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
export function Button({ className, variant = 'primary', size = 'md', href, ...props }: ButtonProps) {
|
||||
const baseStyles = 'inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none';
|
||||
const baseStyles = 'inline-flex items-center justify-center rounded-full font-semibold transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none active:scale-95';
|
||||
|
||||
const variants = {
|
||||
primary: 'bg-primary text-white hover:bg-primary-dark',
|
||||
secondary: 'bg-secondary text-white hover:bg-secondary-light',
|
||||
outline: 'border border-neutral-dark bg-transparent hover:bg-neutral-light text-text-primary',
|
||||
ghost: 'hover:bg-neutral-light text-text-primary',
|
||||
primary: 'bg-primary text-white hover:bg-primary-dark shadow-md hover:shadow-lg',
|
||||
secondary: 'bg-secondary text-white hover:bg-secondary-light shadow-md hover:shadow-lg',
|
||||
accent: 'bg-accent text-primary-dark hover:bg-accent-dark shadow-md hover:shadow-lg',
|
||||
outline: 'border-2 border-primary bg-transparent hover:bg-primary hover:text-white text-primary',
|
||||
ghost: 'hover:bg-primary-light text-primary',
|
||||
white: 'bg-white text-primary hover:bg-neutral-light shadow-md hover:shadow-lg',
|
||||
};
|
||||
|
||||
const sizes = {
|
||||
sm: 'h-9 px-3 text-sm',
|
||||
md: 'h-10 px-4 py-2',
|
||||
lg: 'h-11 px-8 text-lg',
|
||||
sm: 'h-9 px-4 text-sm',
|
||||
md: 'h-11 px-6 text-base',
|
||||
lg: 'h-14 px-8 text-lg',
|
||||
xl: 'h-16 px-10 text-xl',
|
||||
};
|
||||
|
||||
const styles = cn(baseStyles, variants[variant], sizes[size], className);
|
||||
@@ -48,7 +51,7 @@ export function Button({ className, variant = 'primary', size = 'md', href, ...p
|
||||
|
||||
export function Section({ className, children, ...props }: React.HTMLAttributes<HTMLElement>) {
|
||||
return (
|
||||
<section className={cn('py-12 md:py-16 lg:py-24', className)} {...props}>
|
||||
<section className={cn('py-20 md:py-28 lg:py-36 overflow-hidden', className)} {...props}>
|
||||
{children}
|
||||
</section>
|
||||
);
|
||||
@@ -56,16 +59,72 @@ export function Section({ className, children, ...props }: React.HTMLAttributes<
|
||||
|
||||
export function Container({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
|
||||
return (
|
||||
<div className={cn('container mx-auto px-4 md:px-6', className)} {...props}>
|
||||
<div className={cn('container mx-auto px-6 md:px-12 lg:px-16 max-w-7xl', className)} {...props}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Heading({
|
||||
level = 2,
|
||||
children,
|
||||
className,
|
||||
subtitle,
|
||||
align = 'left'
|
||||
}: {
|
||||
level?: 1 | 2 | 3 | 4;
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
subtitle?: string;
|
||||
align?: 'left' | 'center' | 'right';
|
||||
}) {
|
||||
const Tag = `h${level}` as any;
|
||||
|
||||
const sizes = {
|
||||
1: 'text-5xl md:text-6xl lg:text-7xl font-extrabold leading-[1.1]',
|
||||
2: 'text-4xl md:text-5xl lg:text-6xl font-bold leading-tight',
|
||||
3: 'text-2xl md:text-3xl lg:text-4xl font-bold',
|
||||
4: 'text-xl md:text-2xl font-bold',
|
||||
};
|
||||
|
||||
const alignments = {
|
||||
left: 'text-left',
|
||||
center: 'text-center mx-auto',
|
||||
right: 'text-right',
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={cn('mb-12 md:mb-16', alignments[align], className)}>
|
||||
{subtitle && (
|
||||
<span className="inline-block text-accent font-bold tracking-widest uppercase text-sm mb-4 animate-fade-in">
|
||||
{subtitle}
|
||||
</span>
|
||||
)}
|
||||
<Tag className={cn(sizes[level as keyof typeof sizes], 'text-primary')}>
|
||||
{children}
|
||||
</Tag>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Card({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
|
||||
return (
|
||||
<div className={cn('bg-white rounded-lg border border-neutral-dark shadow-sm overflow-hidden', className)} {...props}>
|
||||
<div className={cn('premium-card overflow-hidden', className)} {...props}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Badge({ children, className, variant = 'primary' }: { children: React.ReactNode, className?: string, variant?: 'primary' | 'accent' | 'neutral' }) {
|
||||
const variants = {
|
||||
primary: 'bg-primary-light text-primary',
|
||||
accent: 'bg-accent-light text-accent-dark',
|
||||
neutral: 'bg-neutral-medium text-text-secondary',
|
||||
};
|
||||
|
||||
return (
|
||||
<span className={cn('inline-flex items-center px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider', variants[variant], className)}>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,28 +5,68 @@
|
||||
--font-heading: 'Inter', system-ui, sans-serif;
|
||||
--font-body: 'Inter', system-ui, sans-serif;
|
||||
|
||||
--color-primary: #011fff;
|
||||
--color-primary-dark: #0017bf;
|
||||
--color-primary-light: #e6f0ff;
|
||||
--color-primary: #001a4d; /* Deep Blue */
|
||||
--color-primary-dark: #000d26;
|
||||
--color-primary-light: #e6ebf5;
|
||||
|
||||
--color-secondary: #003d82;
|
||||
--color-secondary-light: #0056b3;
|
||||
|
||||
--color-accent: #82ed20;
|
||||
--color-accent-light: #f0f7ff;
|
||||
--color-accent: #82ed20; /* Sustainability Green */
|
||||
--color-accent-dark: #6bc41a;
|
||||
--color-accent-light: #f0f9e6;
|
||||
|
||||
--color-neutral: #f8f9fa;
|
||||
--color-neutral-light: #ffffff;
|
||||
--color-neutral-dark: #0a0a0a;
|
||||
--color-neutral-medium: #e5e7eb;
|
||||
|
||||
--color-text-primary: #1a1a1a;
|
||||
--color-text-secondary: #6c757d;
|
||||
--color-text-light: #adb5bd;
|
||||
--color-text-primary: #111827;
|
||||
--color-text-secondary: #4b5563;
|
||||
--color-text-light: #9ca3af;
|
||||
|
||||
--color-success: #28a745;
|
||||
--color-warning: #ffc107;
|
||||
--color-danger: #dc3545;
|
||||
--color-info: #17a2b8;
|
||||
--color-success: #10b981;
|
||||
--color-warning: #f59e0b;
|
||||
--color-danger: #ef4444;
|
||||
--color-info: #3b82f6;
|
||||
|
||||
--animate-fade-in: fade-in 0.5s ease-out;
|
||||
--animate-slide-up: slide-up 0.6s ease-out;
|
||||
--animate-slow-zoom: slow-zoom 20s linear infinite;
|
||||
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
@keyframes slide-up {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes slow-zoom {
|
||||
from { transform: scale(1); }
|
||||
to { transform: scale(1.1); }
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
body {
|
||||
@apply text-text-primary bg-neutral-light antialiased;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
@apply font-heading font-bold tracking-tight;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.glass-panel {
|
||||
@apply bg-white/80 backdrop-blur-md border border-white/20 shadow-lg;
|
||||
}
|
||||
.image-overlay-gradient {
|
||||
@apply absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent;
|
||||
}
|
||||
.premium-card {
|
||||
@apply bg-white rounded-xl border border-neutral-medium shadow-sm transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom Utilities */
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user