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:15:11 +01:00
parent c8f61257c9
commit 7c5b91749b
56 changed files with 818 additions and 731 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,16 +2,16 @@ import { useTranslations } from 'next-intl';
import { Section, Container, Button } from '@/components/ui';
export default function ContactPage() {
const t = useTranslations('Navigation'); // Reusing navigation translations for now
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">Get in Touch</h1>
<h1 className="text-4xl font-bold mb-4">{t('title')}</h1>
<p className="text-xl text-text-secondary">
Have questions about our products or need a custom solution? We're here to help.
{t('subtitle')}
</p>
</div>
@@ -19,17 +19,15 @@ export default function ContactPage() {
{/* Contact Info */}
<div className="space-y-8">
<div>
<h3 className="text-xl font-bold mb-4">Contact Information</h3>
<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>
Raiffeisenstraße 22<br />
73630 Remshalden<br />
Germany
<span className="whitespace-pre-line">
{t('info.address')}
</span>
</p>
<p className="flex items-center">
@@ -48,15 +46,15 @@ export default function ContactPage() {
</div>
<div>
<h3 className="text-xl font-bold mb-4">Business Hours</h3>
<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>Monday - Friday</span>
<span>8:00 AM - 5:00 PM</span>
<span>{t('hours.weekdays')}</span>
<span>{t('hours.weekdaysTime')}</span>
</li>
<li className="flex justify-between">
<span>Saturday - Sunday</span>
<span>Closed</span>
<span>{t('hours.weekend')}</span>
<span>{t('hours.closed')}</span>
</li>
</ul>
</div>
@@ -64,21 +62,21 @@ export default function ContactPage() {
{/* 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">Send us a message</h3>
<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">Name</label>
<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">Email</label>
<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">Message</label>
<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">Send Message</Button>
<Button type="submit" className="w-full">{t('form.submit')}</Button>
</form>
</div>
</div>

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

@@ -10,33 +10,33 @@ interface ProductsPageProps {
}
export default function ProductsPage({ params }: ProductsPageProps) {
const t = useTranslations('Navigation');
const t = useTranslations('Products');
const categories = [
{
title: 'Low Voltage Cables',
desc: 'Powering everyday essentials with reliability and safety.',
title: t('categories.lowVoltage.title'),
desc: t('categories.lowVoltage.description'),
img: '/uploads/2024/12/low-voltage-scaled.webp',
icon: '/uploads/2024/11/Low-Voltage.svg',
href: `/${params.locale}/products/low-voltage-cables`
},
{
title: 'Medium Voltage Cables',
desc: 'The perfect balance between power and performance for industrial and urban grids.',
title: t('categories.mediumVoltage.title'),
desc: t('categories.mediumVoltage.description'),
img: '/uploads/2024/12/medium-voltage-scaled.webp',
icon: '/uploads/2024/11/Medium-Voltage.svg',
href: `/${params.locale}/products/medium-voltage-cables`
},
{
title: 'High Voltage Cables',
desc: 'Delivering maximum power over long distances—without compromise.',
title: t('categories.highVoltage.title'),
desc: t('categories.highVoltage.description'),
img: '/uploads/2025/06/na2xsfl2y-rendered.webp',
icon: '/uploads/2024/11/High-Voltage.svg',
href: `/${params.locale}/products/high-voltage-cables`
},
{
title: 'Solar Cables',
desc: 'Connecting the sun’s energy to your sustainable future.',
title: t('categories.solar.title'),
desc: t('categories.solar.description'),
img: '/uploads/2025/04/3.webp',
icon: '/uploads/2024/11/Solar.svg',
href: `/${params.locale}/products/solar-cables`
@@ -48,9 +48,9 @@ export default function ProductsPage({ params }: ProductsPageProps) {
<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">Our Products</h1>
<h1 className="text-4xl font-bold mb-6">{t('title')}</h1>
<p className="text-xl text-text-secondary">
Explore our comprehensive range of high-quality cables designed for every application.
{t('subtitle')}
</p>
</div>
@@ -77,7 +77,7 @@ export default function ProductsPage({ params }: ProductsPageProps) {
{category.desc}
</p>
<span className="text-primary font-medium group-hover:translate-x-1 transition-transform inline-flex items-center">
View Products &rarr;
{t('viewProducts')} &rarr;
</span>
</div>
</Link>

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

@@ -3,7 +3,7 @@ import { Section, Container } from '@/components/ui';
import Image from 'next/image';
export default function TeamPage() {
const t = useTranslations('Navigation');
const t = useTranslations('Team');
return (
<div className="flex flex-col min-h-screen">
@@ -22,10 +22,10 @@ export default function TeamPage() {
<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">
The bright sparks behind the power
{t('hero.title')}
</h5>
<h2 className="text-3xl md:text-5xl lg:text-6xl font-bold tracking-tight leading-tight">
We connect energy, expertise, and innovation to power a greener future.
{t('hero.subtitle')}
</h2>
</Container>
</section>
@@ -34,14 +34,14 @@ export default function TeamPage() {
<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">Michael Bodemer</h1>
<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">
"Challenges exist to be solved, not to debate how complicated they are."
{t('michael.quote')}
</h2>
<div className="w-12 h-1 bg-white mb-8" />
<p className="text-lg leading-relaxed opacity-90 mb-8">
Michael Bodemer is the go-to guy when things get complicated—and let’s face it, that’s often the case with cable networks. With sharp insight and a knack for practical solutions, Michael is one of our key players. He’s not just detail-oriented; he’s a driving force—whether it’s in planning, customer interactions, or securing the best cables for every project.
{t('michael.description')}
</p>
<a
href="https://www.linkedin.com/in/michael-bodemer-33b493122/"
@@ -49,14 +49,14 @@ export default function TeamPage() {
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"
>
Check Michael's LinkedIn
{t('michael.linkedin')}
<span className="ml-2 group-hover:translate-x-1 transition-transform">&rarr;</span>
</a>
</div>
<div className="w-full md:w-1/2 relative min-h-[50vh] md:min-h-full">
<Image
src="/uploads/2024/12/DSC07768-Large.webp"
alt="Michael Bodemer"
alt={t('michael.name')}
fill
className="object-cover"
/>
@@ -68,7 +68,7 @@ export default function TeamPage() {
<section className="relative py-[10%] bg-neutral-dark text-white overflow-hidden">
<div className="absolute inset-0 z-0">
<Image
src="/uploads/2024/12/medium-voltage-1920x400.webp"
src="/uploads/2024/12/1694273920124-copy.webp"
alt="Legacy"
fill
className="object-cover"
@@ -78,13 +78,13 @@ export default function TeamPage() {
<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">A Legacy of Excellence in Every Connection</h3>
<h3 className="text-3xl font-bold mb-6">{t('legacy.title')}</h3>
<div className="space-y-6 text-lg opacity-90">
<p>
At KLZ, our expertise is built on generations of dedication to the energy industry. With decades of hands-on experience, we’ve grown alongside the evolution of cable technology, combining traditional craftsmanship with modern innovation. Each project we take on reflects a deep understanding of what it takes to create lasting, reliable energy solutions.
{t('legacy.p1')}
</p>
<p>
Paired with historic illustrations from the industry’s early days, our story is a reminder of how far cables have come – and how much care has always gone into connecting the world.
{t('legacy.p2')}
</p>
</div>
</div>
@@ -98,20 +98,20 @@ export default function TeamPage() {
<div className="w-full md:w-1/2 relative min-h-[50vh] md:min-h-full order-2 md:order-1">
<Image
src="/uploads/2024/12/DSC07963-Large.webp"
alt="Klaus Mintel"
alt={t('klaus.name')}
fill
className="object-cover"
/>
</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">Klaus Mintel</h1>
<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">
"Sometimes all it takes is a clear head and a good cable to make the world a little better."
{t('klaus.quote')}
</h2>
<div className="w-12 h-1 bg-white mb-8" />
<p className="text-lg leading-relaxed opacity-90 mb-8">
Klaus is the man with the experience, bringing perspective and calm to the table—even when cable chaos threatens to take over. With impressive industry knowledge and a network as solid as our cables, he ensures everything runs smoothly. Klaus isn’t just a problem solver; he’s a strategic thinker who knows how to get to the point with a touch of humor.
{t('klaus.description')}
</p>
<a
href="https://www.linkedin.com/in/klaus-mintel-b80a8b193/"
@@ -119,7 +119,7 @@ export default function TeamPage() {
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"
>
Check Klaus' LinkedIn
{t('klaus.linkedin')}
<span className="ml-2 group-hover:translate-x-1 transition-transform">&rarr;</span>
</a>
</div>
@@ -131,21 +131,14 @@ export default function TeamPage() {
<Container>
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
<div className="lg:col-span-4">
<h2 className="text-4xl font-bold text-primary mb-6 sticky top-24">Our manifesto</h2>
<h2 className="text-4xl font-bold text-primary mb-6 sticky top-24">{t('manifesto.title')}</h2>
</div>
<div className="lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-8">
{[
{ title: 'Competence', desc: 'Decades of experience and Europe-wide know-how combined with commitment and new ideas. Production partners up to 525 kV and the most modern systems, test laboratories and ready to invest in the future.' },
{ title: 'Availability', desc: 'Always there for you - no waiting, no delays, just fast and reliable support. Maybe it\'s because we love what we do.' },
{ title: 'Solutions', desc: 'Solutions require a lot of questions. We ask them. You, the manufacturer and ourselves. If you don\'t ask questions, you\'ll pay for it later. We need to prevent that.' },
{ title: 'Logistics', desc: 'Monitoring production, regular exchanges, freight tracking, customs clearance, reloading, paying attention to the delivery time tunnel, invoices, delivery notes - our everyday life. We have the right team for it.' },
{ title: 'Open to new things', desc: 'We listen. From the inquiry, through the offer, to delivery. What can be done better needs to be discussed. If you don\'t adapt your processes, you\'ll no longer be on the highway at some point. Instead, you\'ll end up in a dead end.' },
{ title: 'Reliability', desc: 'We deliver what we promise – every time, without fail.' }
].map((item, idx) => (
{[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">{item.title}</h3>
<p className="text-text-secondary">{item.desc}</p>
<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>
))}
</div>
@@ -156,12 +149,13 @@ export default function TeamPage() {
{/* Gallery Section */}
<Section className="bg-neutral-dark py-0 pb-24 pt-24">
<Container>
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
<div className="grid grid-cols-2 md:grid-cols-5 gap-4">
{[
'/uploads/2024/12/DSC07539-Large-600x400.webp',
'/uploads/2024/12/DSC07460-Large-600x400.webp',
'/uploads/2024/12/DSC07469-Large-600x400.webp',
'/uploads/2024/12/DSC07433-Large-600x400.webp'
'/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" />