Marc Mintel
0e0f25e476
Some checks failed
Build & Deploy MB Grid Solutions / build-and-deploy (push) Failing after 7s
338 lines
14 KiB
TypeScript
338 lines
14 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { ArrowRight, Shield, Zap, BarChart3, CheckCircle2, ChevronRight } from 'lucide-react';
|
|
import { motion } from 'framer-motion';
|
|
|
|
const fadeInUp = {
|
|
initial: { opacity: 0, y: 20 },
|
|
animate: { opacity: 1, y: 0 },
|
|
transition: { duration: 0.8, ease: [0.22, 1, 0.36, 1] }
|
|
};
|
|
|
|
const stagger = {
|
|
animate: {
|
|
transition: {
|
|
staggerChildren: 0.1
|
|
}
|
|
}
|
|
};
|
|
|
|
export default function Home() {
|
|
const serviceJsonLd = {
|
|
"@context": "https://schema.org",
|
|
"@type": "Service",
|
|
"name": "Technische Beratung für Energiekabelprojekte",
|
|
"provider": {
|
|
"@type": "Organization",
|
|
"name": "MB Grid Solutions GmbH"
|
|
},
|
|
"description": "Herstellerneutrale technische Beratung für Ihre Projekte in Mittel- und Hochspannungsnetzen bis zu 110 kV.",
|
|
"areaServed": "Europe",
|
|
"hasOfferCatalog": {
|
|
"@type": "OfferCatalog",
|
|
"name": "Dienstleistungen",
|
|
"itemListElement": [
|
|
{
|
|
"@type": "Offer",
|
|
"itemOffered": {
|
|
"@type": "Service",
|
|
"name": "Technische Beratung"
|
|
}
|
|
},
|
|
{
|
|
"@type": "Offer",
|
|
"itemOffered": {
|
|
"@type": "Service",
|
|
"name": "Projektbegleitung"
|
|
}
|
|
},
|
|
{
|
|
"@type": "Offer",
|
|
"itemOffered": {
|
|
"@type": "Service",
|
|
"name": "Produktbeschaffung"
|
|
}
|
|
}
|
|
]
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="overflow-hidden">
|
|
<script
|
|
type="application/ld+json"
|
|
dangerouslySetInnerHTML={{ __html: JSON.stringify(serviceJsonLd) }}
|
|
/>
|
|
{/* Hero Section */}
|
|
<section className="relative min-h-[90vh] flex items-center pt-32 pb-20">
|
|
<div className="absolute inset-0 z-0">
|
|
<div
|
|
className="absolute inset-0 bg-cover bg-center"
|
|
style={{ backgroundImage: 'url("/media/business/iStock-1068752548.jpg")' }}
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-r from-white via-white/95 to-white/40 md:to-transparent" />
|
|
</div>
|
|
|
|
<div className="container-custom relative z-10">
|
|
<motion.div
|
|
initial="initial"
|
|
animate="animate"
|
|
variants={stagger}
|
|
className="text-left"
|
|
>
|
|
<motion.span
|
|
variants={fadeInUp}
|
|
className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-accent/10 text-accent text-xs font-bold uppercase tracking-wider mb-6"
|
|
>
|
|
<span className="relative flex h-2 w-2">
|
|
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-accent opacity-75"></span>
|
|
<span className="relative inline-flex rounded-full h-2 w-2 bg-accent"></span>
|
|
</span>
|
|
Engineering Excellence
|
|
</motion.span>
|
|
|
|
<motion.h1
|
|
variants={fadeInUp}
|
|
className="text-5xl md:text-7xl font-extrabold text-primary mb-8 leading-[1.1]"
|
|
>
|
|
Spezialisierter Partner für <span className="text-accent">Energiekabelprojekte</span>
|
|
</motion.h1>
|
|
|
|
<motion.p
|
|
variants={fadeInUp}
|
|
className="text-slate-600 text-xl md:text-2xl leading-relaxed mb-12 max-w-2xl"
|
|
>
|
|
Herstellerneutrale technische Beratung für Ihre Projekte in Mittel- und Hochspannungsnetzen bis zu 110 kV.
|
|
</motion.p>
|
|
|
|
<motion.div
|
|
variants={fadeInUp}
|
|
className="flex flex-wrap gap-4"
|
|
>
|
|
<Link href="/kontakt" className="btn-accent group">
|
|
Projekt anfragen
|
|
<ArrowRight className="ml-2 transition-transform group-hover:translate-x-1" size={20} />
|
|
</Link>
|
|
<Link href="/ueber-uns" className="btn-primary bg-slate-100 !text-primary hover:bg-slate-200">
|
|
Mehr erfahren
|
|
</Link>
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Portfolio Section */}
|
|
<section className="bg-slate-50">
|
|
<div className="container-custom">
|
|
<motion.div
|
|
initial="initial"
|
|
whileInView="animate"
|
|
viewport={{ once: true }}
|
|
variants={fadeInUp}
|
|
className="flex flex-col md:flex-row md:items-end justify-between gap-8 mb-16"
|
|
>
|
|
<div>
|
|
<span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Portfolio</span>
|
|
<h2 className="text-4xl md:text-5xl font-bold text-primary mb-6">Unsere Leistungen</h2>
|
|
<p className="text-slate-600 text-lg md:text-xl">
|
|
Beratung durch unabhängige Experten mit jahrzehntelanger Erfahrung aus Engineering, Normengremien, Planung und Produktion.
|
|
</p>
|
|
</div>
|
|
<Link href="/ueber-uns" className="text-primary font-bold flex items-center gap-2 hover:text-accent transition-colors group">
|
|
Alle Details ansehen <ChevronRight className="transition-transform group-hover:translate-x-1" size={20} />
|
|
</Link>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
variants={stagger}
|
|
initial="initial"
|
|
whileInView="animate"
|
|
viewport={{ once: true }}
|
|
className="grid grid-cols-1 md:grid-cols-3 gap-8 motion-fix"
|
|
>
|
|
{[
|
|
{
|
|
icon: <Zap size={32} />,
|
|
title: 'Technische Beratung',
|
|
desc: 'Individuelle Konzepte, Vergleiche, Risikobetrachtung und Empfehlungen für Ihre Kabelinfrastruktur.'
|
|
},
|
|
{
|
|
icon: <Shield size={32} />,
|
|
title: 'Projektbegleitung',
|
|
desc: 'Wir begleiten Sie bei der Verlegung und Installation, um Herausforderungen proaktiv zu lösen.'
|
|
},
|
|
{
|
|
icon: <BarChart3 size={32} />,
|
|
title: 'Produktbeschaffung',
|
|
desc: 'Herstellerneutrale Marktanalyse und Unterstützung bei der Komponentenwahl hinsichtlich Qualität und Preis.'
|
|
}
|
|
].map((item, i) => (
|
|
<motion.div
|
|
key={i}
|
|
variants={fadeInUp}
|
|
className="card-modern group motion-fix hover:-translate-y-2 transition-transform duration-300"
|
|
>
|
|
<div className="w-16 h-16 rounded-2xl bg-accent/10 text-accent flex items-center justify-center mb-8 group-hover:bg-accent group-hover:text-white transition-colors">
|
|
{item.icon}
|
|
</div>
|
|
<h3 className="text-2xl font-bold text-primary mb-4">{item.title}</h3>
|
|
<p className="text-slate-600 leading-relaxed">
|
|
{item.desc}
|
|
</p>
|
|
</motion.div>
|
|
))}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Expertise Section */}
|
|
<section className="bg-white">
|
|
<div className="container-custom">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 items-center gap-16 md:gap-24">
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -20 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.8 }}
|
|
className="relative"
|
|
>
|
|
<div className="absolute -inset-4 bg-accent/10 rounded-3xl -rotate-2 z-0" />
|
|
<img
|
|
src="/media/cables/HS Kabel.png"
|
|
alt="Technical Engineering"
|
|
className="relative z-10 w-full h-[400px] md:h-[500px] object-cover rounded-2xl shadow-2xl"
|
|
/>
|
|
</motion.div>
|
|
<motion.div
|
|
initial="initial"
|
|
whileInView="animate"
|
|
viewport={{ once: true }}
|
|
variants={stagger}
|
|
>
|
|
<motion.span variants={fadeInUp} className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Expertise</motion.span>
|
|
<motion.h2 variants={fadeInUp} className="text-4xl md:text-5xl font-bold text-primary mb-8">Anwendungen & Zielgruppen</motion.h2>
|
|
<motion.p variants={fadeInUp} className="text-slate-600 text-lg md:text-xl mb-12">
|
|
Wir unterstützen Akteure der Energiewende bei der Realisierung komplexer Kabelprojekte mit höchster Präzision.
|
|
</motion.p>
|
|
<motion.div
|
|
variants={stagger}
|
|
className="grid grid-cols-1 sm:grid-cols-2 gap-4"
|
|
>
|
|
{[
|
|
'Energieversorger',
|
|
'Ingenieurbüros',
|
|
'Tiefbauunternehmen',
|
|
'Industrie',
|
|
'Projektierer EE',
|
|
'Planungsbüros'
|
|
].map((item, i) => (
|
|
<motion.div
|
|
key={i}
|
|
variants={fadeInUp}
|
|
className="flex items-center gap-4 p-4 bg-slate-50 rounded-xl border border-slate-100 hover:border-accent/30 transition-colors group"
|
|
>
|
|
<div className="w-8 h-8 rounded-full bg-white flex items-center justify-center shadow-sm group-hover:bg-accent group-hover:text-white transition-colors">
|
|
<CheckCircle2 size={16} />
|
|
</div>
|
|
<span className="text-primary font-semibold">{item}</span>
|
|
</motion.div>
|
|
))}
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Technical Specs Section */}
|
|
<section className="relative py-24 md:py-32 text-white overflow-hidden bg-slate-900">
|
|
<div className="absolute inset-0 opacity-20">
|
|
<img
|
|
src="/media/drums/iStock-487538226 (1).jpg"
|
|
alt="Background"
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-b from-slate-900 via-slate-900/80 to-slate-900" />
|
|
</div>
|
|
|
|
<div className="container-custom relative z-10">
|
|
<motion.div
|
|
initial="initial"
|
|
whileInView="animate"
|
|
viewport={{ once: true }}
|
|
variants={fadeInUp}
|
|
className="mb-20"
|
|
>
|
|
<span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Spezifikationen</span>
|
|
<h2 className="text-4xl md:text-5xl font-bold text-white mb-6">Technische Expertise</h2>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
variants={stagger}
|
|
initial="initial"
|
|
whileInView="animate"
|
|
viewport={{ once: true }}
|
|
className="grid grid-cols-1 md:grid-cols-3 gap-8"
|
|
>
|
|
{[
|
|
{ label: 'Kabeltypen', value: 'N2XS(FL)2Y, N2X(F)KLD2Y...', desc: 'Umfassende Expertise im Design gängiger Hochspannungskabel.' },
|
|
{ label: 'Spannungsebenen', value: '64/110 kV & Mittelspannung', desc: 'Spezialisierte Beratung für komplexe Infrastrukturprojekte.' },
|
|
{ label: 'Leitertechnologie', value: 'Massiv-, Mehrdraht- & Milliken', desc: 'Optimierung des Leiterdesigns hinsichtlich Stromtragfähigkeit.' }
|
|
].map((item, i) => (
|
|
<motion.div
|
|
key={i}
|
|
variants={fadeInUp}
|
|
className="p-10 rounded-3xl bg-white/5 border border-white/10 backdrop-blur-sm hover:bg-white/10 transition-colors"
|
|
>
|
|
<h4 className="text-accent font-bold text-xs uppercase tracking-widest mb-6">
|
|
{item.label}
|
|
</h4>
|
|
<p className="text-2xl font-bold text-white mb-4 leading-tight">
|
|
{item.value}
|
|
</p>
|
|
<p className="text-slate-400 leading-relaxed">
|
|
{item.desc}
|
|
</p>
|
|
</motion.div>
|
|
))}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA Section */}
|
|
<section className="bg-white">
|
|
<div className="container-custom">
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.95 }}
|
|
whileInView={{ opacity: 1, scale: 1 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.8 }}
|
|
className="relative rounded-[2.5rem] bg-primary p-12 md:p-24 overflow-hidden"
|
|
>
|
|
<div className="absolute top-0 right-0 w-1/2 h-full opacity-10 pointer-events-none">
|
|
<svg viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="400" cy="0" r="400" stroke="white" strokeWidth="2" />
|
|
<circle cx="400" cy="0" r="300" stroke="white" strokeWidth="2" />
|
|
<circle cx="400" cy="0" r="200" stroke="white" strokeWidth="2" />
|
|
</svg>
|
|
</div>
|
|
|
|
<div className="relative z-10">
|
|
<h2 className="text-4xl md:text-6xl font-bold text-white mb-8 leading-tight">
|
|
Bereit für Ihr nächstes Projekt?
|
|
</h2>
|
|
<p className="text-slate-300 text-xl mb-12 leading-relaxed">
|
|
Lassen Sie uns gemeinsam die optimale Lösung für Ihre Energieinfrastruktur finden. Wir beraten Sie herstellerneutral und kompetent.
|
|
</p>
|
|
<Link href="/kontakt" className="btn-accent !px-10 !py-5 text-lg group">
|
|
Jetzt Kontakt aufnehmen
|
|
<ArrowRight className="ml-3 transition-transform group-hover:translate-x-2" size={24} />
|
|
</Link>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|