189 lines
11 KiB
TypeScript
189 lines
11 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { ArrowRight, Shield, Zap, BarChart3, CheckCircle2 } from 'lucide-react';
|
|
|
|
export default function Home() {
|
|
return (
|
|
<div className="bg-bg-color">
|
|
<section
|
|
className="relative min-h-[70vh] md:min-h-[80vh] flex items-center overflow-hidden py-8 md:py-16"
|
|
style={{
|
|
background: 'linear-gradient(to right, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0.7) 100%), url("/media/business/iStock-1068752548.jpg")',
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
}}
|
|
>
|
|
<div className="max-w-[1200px] mx-auto px-4 relative z-10">
|
|
<div className="max-w-[700px]">
|
|
<span className="inline-block text-accent-green text-xs font-bold uppercase tracking-[0.15em] mb-3">Engineering Excellence</span>
|
|
<h1 className="text-primary text-4xl md:text-6xl font-extrabold mb-6 tracking-tight leading-[1.15]">
|
|
Spezialisierter Partner für Energiekabelprojekte
|
|
</h1>
|
|
<p className="text-text-secondary text-lg md:text-xl leading-relaxed max-w-[600px] mb-10">
|
|
Herstellerneutrale technische Beratung ihrer Projekte für Mittel - und Hochspannungsnetze bis zu 110 kV
|
|
</p>
|
|
<div className="flex flex-wrap gap-6 items-center">
|
|
<Link href="/kontakt" className="bg-primary text-white px-8 py-4 rounded-lg font-bold uppercase tracking-widest text-xs hover:bg-text-primary transition-all flex items-center gap-3">
|
|
Projekt anfragen <ArrowRight size={18} strokeWidth={2.5} />
|
|
</Link>
|
|
<Link
|
|
href="/ueber-uns"
|
|
className="text-primary font-bold text-xs uppercase tracking-widest flex items-center gap-2 hover:text-accent-green transition-all"
|
|
>
|
|
Mehr erfahren <ArrowRight size={16} strokeWidth={2.5} />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="py-16 md:py-24 bg-[#f8fafc]">
|
|
<div className="max-w-[1200px] mx-auto px-4">
|
|
<div className="mb-12 md:mb-20">
|
|
<span className="inline-block text-accent-green text-xs font-bold uppercase tracking-[0.15em] mb-3">Portfolio</span>
|
|
<h2 className="text-primary text-3xl md:text-4xl font-bold mb-6 relative inline-block after:content-[''] after:absolute after:-bottom-3 after:left-0 after:w-12 after:h-1 after:bg-accent-green after:rounded-sm">Unsere Leistungen</h2>
|
|
<p className="text-text-secondary text-lg md:text-xl leading-relaxed max-w-[600px] mt-8">
|
|
Beratung durch unabhängige Experten mit jahrzehntelanger Erfahrung aus Engineering, Normengremien, Planung und Produktion
|
|
</p>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{[
|
|
{ icon: <Zap size={32} strokeWidth={2} />, title: 'Technische Beratung', desc: 'Individuelle Konzepte, Vergleiche, Risikobetrachtung und Empfehlungen für Ihre Kabelinfrastruktur.' },
|
|
{ icon: <Shield size={32} strokeWidth={2} />, title: 'Projektbegleitung', desc: 'Trotz bester Planung entstehen bei der Verlegung und Installation oft zusätzliche Herausforderungen, wo wir sie gerne begleiten' },
|
|
{ icon: <BarChart3 size={32} strokeWidth={2} />, title: 'Produktbeschaffung', desc: 'Herstellerneutrale Marktanalyse und Unterstützung bei der Komponentenwahl in Hinblick auf Qualität, Lieferzeit, Preis und Nachhaltigkeit' }
|
|
].map((item, i) => (
|
|
<div key={i} className="bg-white p-8 md:p-10 border border-secondary-bg rounded-2xl shadow-sm hover:border-primary hover:shadow-md transition-all duration-300">
|
|
<div className="text-accent-green mb-6">
|
|
{item.icon}
|
|
</div>
|
|
<h3 className="text-primary text-xl font-bold mb-4">{item.title}</h3>
|
|
<p className="text-text-secondary leading-relaxed text-base md:text-lg">
|
|
{item.desc}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="py-16 md:py-24 bg-white">
|
|
<div className="max-w-[1200px] mx-auto px-4">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 items-center gap-12 md:gap-16">
|
|
<img
|
|
src="/media/cables/HS Kabel.png"
|
|
alt="Technical Engineering and Cable Infrastructure"
|
|
className="w-full h-[300px] md:h-[400px] object-cover rounded-2xl"
|
|
loading="lazy"
|
|
/>
|
|
<div>
|
|
<span className="inline-block text-accent-green text-xs font-bold uppercase tracking-[0.15em] mb-3">Expertise</span>
|
|
<h2 className="text-primary text-3xl md:text-4xl font-bold mb-6 relative inline-block after:content-[''] after:absolute after:-bottom-3 after:left-0 after:w-12 after:h-1 after:bg-accent-green after:rounded-sm">Anwendungen & Zielgruppen</h2>
|
|
<p className="text-text-secondary text-lg md:text-xl leading-relaxed mb-10 mt-8">
|
|
Wir unterstützen Akteure der Energiewende bei der Realisierung komplexer Kabelprojekte.
|
|
</p>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
{[
|
|
'Energieversorger',
|
|
'Ingenieurbüros',
|
|
'Tiefbauunternehmen',
|
|
'Industrie',
|
|
'Projektierer EE',
|
|
'Planungsbüros'
|
|
].map((item, i) => (
|
|
<div
|
|
key={i}
|
|
className="flex items-center gap-3 p-4 bg-white border border-accent-green/15 border-l-4 border-l-accent-green rounded-xl shadow-sm hover:translate-x-1 transition-all"
|
|
>
|
|
<CheckCircle2 size={18} strokeWidth={2.5} className="text-accent-green shrink-0" />
|
|
<span className="text-primary font-semibold text-sm md:text-base">{item}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="relative py-16 md:py-24 text-white overflow-hidden"
|
|
style={{
|
|
background: 'linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.85)), url("/media/drums/iStock-487538226 (1).jpg")',
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
}}
|
|
>
|
|
<div className="max-w-[1200px] mx-auto px-4 relative z-10">
|
|
<div className="mb-12 md:mb-20">
|
|
<span className="inline-block text-white/60 text-xs font-bold uppercase tracking-[0.15em] mb-3">Expertise</span>
|
|
<h2 className="text-white text-3xl md:text-4xl font-bold mb-6">Technische Spezifikationen</h2>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{[
|
|
{ label: 'Kabeltypen im Hochspannungsbereich wie beispielsweise', value: 'N2XS(FL)2Y, N2X(F)KLD2Y, NA2XS(FL)2Y, NA2X(F)KLD2Y', desc: 'Umfassende Expertise des optimalen Designs gängiger Hochspannungskabel.' },
|
|
{ label: 'Spannungsebenen', value: '64/110 kV & Mittelspannung', desc: 'Spezialisierte Beratung für die 110-kV-Ebene und komplexe Mittelspannungsprojekte.' },
|
|
{ label: 'Leitertechnologie', value: 'Massiv-, Mehrdraht- & Millikenleiter', desc: 'Optimierung des Leiterdesigns hinsichtlich Stromtragfähigkeit.' }
|
|
].map((item, i) => (
|
|
<div
|
|
key={i}
|
|
className="bg-white/5 p-8 md:p-10 border border-white/10 rounded-2xl backdrop-blur-sm"
|
|
>
|
|
<h4 className="text-[10px] md:text-xs uppercase text-accent-green font-bold tracking-[0.2em] mb-4">
|
|
{item.label}
|
|
</h4>
|
|
<p className="text-white text-lg md:text-xl font-bold mb-4 leading-tight">
|
|
{item.value}
|
|
</p>
|
|
<p className="text-white/60 text-sm md:text-base leading-relaxed">
|
|
{item.desc}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="py-16 md:py-24 bg-white">
|
|
<div className="max-w-[1200px] mx-auto px-4">
|
|
<div className="mb-12 md:mb-20">
|
|
<span className="inline-block text-accent-green text-xs font-bold uppercase tracking-[0.15em] mb-3">Werte</span>
|
|
<h2 className="text-primary text-3xl md:text-4xl font-bold mb-6 relative inline-block after:content-[''] after:absolute after:-bottom-3 after:left-0 after:w-12 after:h-1 after:bg-accent-green after:rounded-sm">Unsere Leitprinzipien</h2>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12">
|
|
{[
|
|
{ title: 'Exzellenz', desc: 'Höchste technische Präzision in jedem Detail. Wir suchen die optimale Lösung in Einklang mit Normen, technischen Spezifikation und den Umgebungsparametern.' },
|
|
{ title: 'Nachhaltigkeit', desc: 'Zukunftssichere Lösungen für die Infrastruktur. Wir denken in Lebenszyklen und Zuverlässigkeit.' },
|
|
{ title: 'Transparenz', desc: 'Ehrliche Beratung auf Augenhöhe. Wir kommunizieren klar und herstellerneutral.' }
|
|
].map((item, i) => (
|
|
<div
|
|
key={i}
|
|
className="border-l-4 border-l-accent-green pl-8"
|
|
>
|
|
<h3 className="text-primary text-lg md:text-xl font-bold uppercase tracking-widest mb-4">
|
|
{item.title}
|
|
</h3>
|
|
<p className="text-text-secondary leading-relaxed text-base md:text-lg">
|
|
{item.desc}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="relative py-16 md:py-24 bg-primary overflow-hidden">
|
|
<div className="max-w-[1200px] mx-auto px-4 relative z-10">
|
|
<h2 className="text-white text-3xl md:text-5xl font-bold mb-6 tracking-tight leading-tight">
|
|
Bereit für Ihr nächstes Projekt?
|
|
</h2>
|
|
<p className="text-white/85 text-lg md:text-xl leading-relaxed max-w-[700px] mb-10">
|
|
Lassen Sie uns gemeinsam die optimale Lösung für Ihre Energieinfrastruktur finden.
|
|
</p>
|
|
<Link href="/kontakt" className="inline-flex bg-white text-primary px-8 py-4 rounded-lg font-bold uppercase tracking-widest text-xs hover:bg-accent-green hover:text-white transition-all items-center gap-3">
|
|
Jetzt Kontakt aufnehmen <ArrowRight size={18} strokeWidth={2.5} />
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|