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

wip

Browse Source
This commit is contained in:
Marc Mintel
2026-01-17 02:57:53 +01:00
parent de87c62312
commit 021d23ab93
21 changed files with 967 additions and 578 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
app/[locale]/products/page.tsx
View File

@@ -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')} &rarr;
</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">&rarr;</span>
</Link>
</div>
</div>
</Container>
</Section>
</div>
);
}