This commit is contained in:
@@ -1,233 +1,11 @@
|
||||
'use client';
|
||||
import { Metadata } from "next";
|
||||
import ContactContent from "@/components/ContactContent";
|
||||
|
||||
import { CheckCircle, Mail, MapPin, Send, ArrowRight } from 'lucide-react';
|
||||
import React, { useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
const fadeInUp = {
|
||||
initial: { opacity: 0, y: 20 },
|
||||
animate: { opacity: 1, y: 0 },
|
||||
transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] }
|
||||
export const metadata: Metadata = {
|
||||
title: "Kontakt",
|
||||
description: "Haben Sie Fragen zu einem Projekt oder benötigen Sie technische Beratung? Wir freuen uns auf Ihre Nachricht.",
|
||||
};
|
||||
|
||||
const stagger = {
|
||||
animate: {
|
||||
transition: {
|
||||
staggerChildren: 0.1
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default function Contact() {
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
const formData = new FormData(e.currentTarget);
|
||||
const data = Object.fromEntries(formData.entries());
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/contact', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
if (response.ok) {
|
||||
setSubmitted(true);
|
||||
} else {
|
||||
const err = await response.json();
|
||||
alert(`Fehler: ${err.error || 'Es gab einen Fehler beim Senden Ihrer Nachricht.'}`);
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Es gab einen Fehler beim Senden Ihrer Nachricht.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="overflow-hidden">
|
||||
{/* Hero Section */}
|
||||
<section className="relative min-h-[40vh] 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/laying/iStock-1282259999.jpg")' }}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-white via-white/95 to-white/40" />
|
||||
</div>
|
||||
|
||||
<div className="container-custom relative z-10">
|
||||
<motion.div
|
||||
initial="initial"
|
||||
animate="animate"
|
||||
variants={stagger}
|
||||
className="max-w-3xl"
|
||||
>
|
||||
<motion.span variants={fadeInUp} className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Kontakt</motion.span>
|
||||
<motion.h1
|
||||
variants={fadeInUp}
|
||||
className="text-5xl md:text-6xl font-extrabold text-primary mb-8 leading-tight"
|
||||
>
|
||||
Lassen Sie uns <span className="text-accent">sprechen</span>
|
||||
</motion.h1>
|
||||
<motion.p
|
||||
variants={fadeInUp}
|
||||
className="text-slate-600 text-xl md:text-2xl leading-relaxed"
|
||||
>
|
||||
Haben Sie Fragen zu einem Projekt oder benötigen Sie technische Beratung? Wir freuen uns auf Ihre Nachricht.
|
||||
</motion.p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="bg-slate-50">
|
||||
<div className="container-custom">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 md:gap-24">
|
||||
<motion.div
|
||||
variants={stagger}
|
||||
initial="initial"
|
||||
whileInView="animate"
|
||||
viewport={{ once: true }}
|
||||
className="space-y-8"
|
||||
>
|
||||
<motion.div
|
||||
variants={fadeInUp}
|
||||
whileHover={{ x: 5 }}
|
||||
className="card-modern !p-8 flex gap-6 items-start"
|
||||
>
|
||||
<div className="w-14 h-14 rounded-2xl bg-accent/10 text-accent flex items-center justify-center shrink-0">
|
||||
<Mail size={24} />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-slate-500 font-bold text-xs uppercase tracking-widest mb-2">E-Mail</h4>
|
||||
<a href="mailto:info@mb-grid-solutions.com" className="text-primary text-xl font-bold hover:text-accent transition-colors">
|
||||
info@mb-grid-solutions.com
|
||||
</a>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
variants={fadeInUp}
|
||||
whileHover={{ x: 5 }}
|
||||
className="card-modern !p-8 flex gap-6 items-start"
|
||||
>
|
||||
<div className="w-14 h-14 rounded-2xl bg-accent/10 text-accent flex items-center justify-center shrink-0">
|
||||
<MapPin size={24} />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-slate-500 font-bold text-xs uppercase tracking-widest mb-2">Anschrift</h4>
|
||||
<p className="text-primary text-xl font-bold leading-relaxed">
|
||||
MB Grid Solutions GmbH<br />
|
||||
Raiffeisenstraße 22<br />
|
||||
73630 Remshalden
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="bg-white p-8 md:p-12 rounded-[2.5rem] border border-slate-100 shadow-xl"
|
||||
>
|
||||
{submitted ? (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
className="text-center py-12"
|
||||
>
|
||||
<div className="w-20 h-20 rounded-full bg-accent/10 text-accent flex items-center justify-center mx-auto mb-8">
|
||||
<CheckCircle size={40} />
|
||||
</div>
|
||||
<h3 className="text-3xl font-bold text-primary mb-4">Nachricht gesendet</h3>
|
||||
<p className="text-slate-600 text-lg mb-10">
|
||||
Vielen Dank für Ihre Anfrage. Wir werden uns in Kürze bei Ihnen melden.
|
||||
</p>
|
||||
<button
|
||||
onClick={() => setSubmitted(false)}
|
||||
className="btn-primary"
|
||||
>
|
||||
Weitere Nachricht
|
||||
</button>
|
||||
</motion.div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="name" className="text-sm font-bold text-slate-700 ml-1">Name *</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
required
|
||||
placeholder="Ihr Name"
|
||||
className="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:outline-none focus:border-accent focus:ring-4 focus:ring-accent/5 transition-all"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="company" className="text-sm font-bold text-slate-700 ml-1">Firma</label>
|
||||
<input
|
||||
type="text"
|
||||
id="company"
|
||||
name="company"
|
||||
placeholder="Ihr Unternehmen"
|
||||
className="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:outline-none focus:border-accent focus:ring-4 focus:ring-accent/5 transition-all"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="email" className="text-sm font-bold text-slate-700 ml-1">E-Mail *</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
required
|
||||
placeholder="ihre@email.de"
|
||||
className="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:outline-none focus:border-accent focus:ring-4 focus:ring-accent/5 transition-all"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="message" className="text-sm font-bold text-slate-700 ml-1">Nachricht *</label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
required
|
||||
rows={5}
|
||||
placeholder="Wie können wir Ihnen helfen?"
|
||||
className="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:outline-none focus:border-accent focus:ring-4 focus:ring-accent/5 transition-all resize-none"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="btn-accent w-full py-5 text-lg group"
|
||||
>
|
||||
{loading ? 'Wird gesendet...' : 'Nachricht senden'}
|
||||
<Send className="ml-3 transition-transform group-hover:translate-x-1 group-hover:-translate-y-1" size={20} />
|
||||
</button>
|
||||
|
||||
<p className="text-xs text-slate-400 text-center">
|
||||
* Pflichtfelder. Mit dem Absenden erklären Sie sich mit unserer{' '}
|
||||
<Link href="/datenschutz" className="text-accent hover:underline font-semibold">
|
||||
Datenschutzerklärung
|
||||
</Link>{' '}
|
||||
einverstanden.
|
||||
</p>
|
||||
</form>
|
||||
)}
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
export default function Page() {
|
||||
return <ContactContent />;
|
||||
}
|
||||
|
||||
@@ -10,8 +10,53 @@ const inter = Inter({
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "MB Grid Solutions | Ihr Partner für Energiekabelprojekte",
|
||||
description: "Spezialisierter Partner für Energiekabelprojekte bis 110 kV. Herstellerneutrale technische Beratung und Projektbegleitung.",
|
||||
title: {
|
||||
default: "MB Grid Solutions | Energiekabelprojekte & Technische Beratung",
|
||||
template: "%s | MB Grid Solutions"
|
||||
},
|
||||
description: "Ihr spezialisierter Partner für herstellerneutrale technische Beratung und Projektbegleitung bei Energiekabelprojekten bis 110 kV. Expertise in Mittel- und Hochspannungsnetzen.",
|
||||
keywords: ["Energiekabel", "Hochspannung", "Mittelspannung", "Kabelprojekte", "Technische Beratung", "Engineering", "Energiewende", "110 kV"],
|
||||
authors: [{ name: "MB Grid Solutions GmbH" }],
|
||||
creator: "MB Grid Solutions GmbH",
|
||||
publisher: "MB Grid Solutions GmbH",
|
||||
formatDetection: {
|
||||
email: false,
|
||||
address: false,
|
||||
telephone: false,
|
||||
},
|
||||
openGraph: {
|
||||
type: "website",
|
||||
locale: "de_DE",
|
||||
url: "https://www.mb-grid-solutions.com",
|
||||
siteName: "MB Grid Solutions",
|
||||
title: "MB Grid Solutions | Energiekabelprojekte & Technische Beratung",
|
||||
description: "Spezialisierter Partner für Energiekabelprojekte bis 110 kV. Herstellerneutrale technische Beratung und Projektbegleitung.",
|
||||
images: [
|
||||
{
|
||||
url: "/assets/logo.png",
|
||||
width: 800,
|
||||
height: 600,
|
||||
alt: "MB Grid Solutions Logo",
|
||||
},
|
||||
],
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
title: "MB Grid Solutions | Energiekabelprojekte & Technische Beratung",
|
||||
description: "Spezialisierter Partner für Energiekabelprojekte bis 110 kV.",
|
||||
images: ["/assets/logo.png"],
|
||||
},
|
||||
robots: {
|
||||
index: true,
|
||||
follow: true,
|
||||
googleBot: {
|
||||
index: true,
|
||||
follow: true,
|
||||
'max-video-preview': -1,
|
||||
'max-image-preview': 'large',
|
||||
'max-snippet': -1,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
@@ -19,8 +64,35 @@ export default function RootLayout({
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
const jsonLd = {
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Organization",
|
||||
"name": "MB Grid Solutions GmbH",
|
||||
"url": "https://www.mb-grid-solutions.com",
|
||||
"logo": "https://www.mb-grid-solutions.com/assets/logo.png",
|
||||
"description": "Ihr spezialisierter Partner für herstellerneutrale technische Beratung und Projektbegleitung bei Energiekabelprojekten bis 110 kV.",
|
||||
"address": {
|
||||
"@type": "PostalAddress",
|
||||
"streetAddress": "Raiffeisenstraße 22",
|
||||
"addressLocality": "Remshalden",
|
||||
"postalCode": "73630",
|
||||
"addressCountry": "DE"
|
||||
},
|
||||
"contactPoint": {
|
||||
"@type": "ContactPoint",
|
||||
"email": "info@mb-grid-solutions.com",
|
||||
"contactType": "customer service"
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<html lang="de" className={`${inter.variable}`}>
|
||||
<head>
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
|
||||
/>
|
||||
</head>
|
||||
<body className="antialiased">
|
||||
<Layout>
|
||||
{children}
|
||||
|
||||
297
app/page.tsx
297
app/page.tsx
@@ -1,294 +1,11 @@
|
||||
'use client';
|
||||
import { Metadata } from "next";
|
||||
import HomeContent from "@/components/HomeContent";
|
||||
|
||||
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] }
|
||||
export const metadata: Metadata = {
|
||||
title: "MB Grid Solutions | Energiekabelprojekte & Technische Beratung",
|
||||
description: "Ihr spezialisierter Partner für herstellerneutrale technische Beratung und Projektbegleitung bei Energiekabelprojekten bis 110 kV.",
|
||||
};
|
||||
|
||||
const stagger = {
|
||||
animate: {
|
||||
transition: {
|
||||
staggerChildren: 0.1
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="overflow-hidden">
|
||||
{/* 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>
|
||||
);
|
||||
export default function Page() {
|
||||
return <HomeContent />;
|
||||
}
|
||||
|
||||
11
app/robots.ts
Normal file
11
app/robots.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
import { MetadataRoute } from 'next';
|
||||
|
||||
export default function robots(): MetadataRoute.Robots {
|
||||
return {
|
||||
rules: {
|
||||
userAgent: '*',
|
||||
allow: '/',
|
||||
},
|
||||
sitemap: 'https://www.mb-grid-solutions.com/sitemap.xml',
|
||||
};
|
||||
}
|
||||
44
app/sitemap.ts
Normal file
44
app/sitemap.ts
Normal file
@@ -0,0 +1,44 @@
|
||||
import { MetadataRoute } from 'next';
|
||||
|
||||
export default function sitemap(): MetadataRoute.Sitemap {
|
||||
const baseUrl = 'https://www.mb-grid-solutions.com';
|
||||
|
||||
return [
|
||||
{
|
||||
url: baseUrl,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: 'monthly',
|
||||
priority: 1,
|
||||
},
|
||||
{
|
||||
url: `${baseUrl}/ueber-uns`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: 'monthly',
|
||||
priority: 0.8,
|
||||
},
|
||||
{
|
||||
url: `${baseUrl}/kontakt`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: 'monthly',
|
||||
priority: 0.8,
|
||||
},
|
||||
{
|
||||
url: `${baseUrl}/impressum`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: 'yearly',
|
||||
priority: 0.3,
|
||||
},
|
||||
{
|
||||
url: `${baseUrl}/datenschutz`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: 'yearly',
|
||||
priority: 0.3,
|
||||
},
|
||||
{
|
||||
url: `${baseUrl}/agb`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: 'yearly',
|
||||
priority: 0.3,
|
||||
},
|
||||
];
|
||||
}
|
||||
@@ -1,181 +1,11 @@
|
||||
'use client';
|
||||
import { Metadata } from "next";
|
||||
import AboutContent from "@/components/AboutContent";
|
||||
|
||||
import React from 'react';
|
||||
import { Award, Clock, Lightbulb, Linkedin, MessageSquare, ShieldCheck, Truck, ArrowRight } from 'lucide-react';
|
||||
import { motion } from 'framer-motion';
|
||||
import Link from 'next/link';
|
||||
|
||||
const fadeInUp = {
|
||||
initial: { opacity: 0, y: 20 },
|
||||
animate: { opacity: 1, y: 0 },
|
||||
transition: { duration: 0.8, ease: [0.22, 1, 0.36, 1] }
|
||||
export const metadata: Metadata = {
|
||||
title: "Über uns",
|
||||
description: "Erfahren Sie mehr über MB Grid Solutions, unsere Expertise und unser Manifest für technische Exzellenz.",
|
||||
};
|
||||
|
||||
const stagger = {
|
||||
animate: {
|
||||
transition: {
|
||||
staggerChildren: 0.1
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default function About() {
|
||||
return (
|
||||
<div className="overflow-hidden">
|
||||
{/* Hero Section */}
|
||||
<section className="relative min-h-[60vh] 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/drums/iStock-487538226 (1).jpg")' }}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-white via-white/95 to-white/40" />
|
||||
</div>
|
||||
|
||||
<div className="container-custom relative z-10">
|
||||
<motion.div
|
||||
initial="initial"
|
||||
animate="animate"
|
||||
variants={stagger}
|
||||
className="text-left"
|
||||
>
|
||||
<motion.span
|
||||
variants={fadeInUp}
|
||||
className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block"
|
||||
>
|
||||
Über uns
|
||||
</motion.span>
|
||||
<motion.h1
|
||||
variants={fadeInUp}
|
||||
className="text-5xl md:text-6xl font-extrabold text-primary mb-8 leading-tight"
|
||||
>
|
||||
Wir gestalten die <span className="text-accent">Infrastruktur</span> der Zukunft
|
||||
</motion.h1>
|
||||
<motion.p
|
||||
variants={fadeInUp}
|
||||
className="text-slate-600 text-xl md:text-2xl leading-relaxed mb-8"
|
||||
>
|
||||
MB Grid Solution steht für technische Exzellenz in der Energiekabeltechnologie. Wir verstehen uns als Ihr technischer Lotse.
|
||||
</motion.p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Content Section */}
|
||||
<section className="bg-white">
|
||||
<div className="container-custom">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="space-y-6 text-lg text-slate-600 leading-relaxed"
|
||||
>
|
||||
<p>
|
||||
Unsere Wurzeln liegen in der tiefen praktischen Erfahrung unserer technischen Berater und unserer Netzwerke im globalem Kabelmarkt. Wir vereinen Tradition mit modernster Innovation, um zuverlässige Energielösungen für Projekte bis 110 kV zu realisieren.
|
||||
</p>
|
||||
<p>
|
||||
Wir verstehen die Herausforderungen der Energiewende und bieten herstellerneutrale Beratung, die auf Fakten, Normen und jahrzehntelanger Erfahrung basiert.
|
||||
</p>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
variants={stagger}
|
||||
initial="initial"
|
||||
whileInView="animate"
|
||||
viewport={{ once: true }}
|
||||
className="grid grid-cols-1 sm:grid-cols-2 gap-6"
|
||||
>
|
||||
{[
|
||||
{ name: 'Michael Bodemer', role: 'Geschäftsführung & Inhaber', linkedin: 'https://www.linkedin.com/in/michael-bodemer-33b493122/' },
|
||||
{ name: 'Klaus Mintel', role: 'Geschäftsführung', linkedin: 'https://www.linkedin.com/in/klaus-mintel-b80a8b193/' }
|
||||
].map((person, i) => (
|
||||
<motion.div key={i} variants={fadeInUp} className="card-modern !p-6">
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<h3 className="text-xl font-bold text-primary">{person.name}</h3>
|
||||
<a href={person.linkedin} target="_blank" rel="noopener noreferrer" className="text-[#0077b5] hover:scale-110 transition-transform">
|
||||
<Linkedin size={20} />
|
||||
</a>
|
||||
</div>
|
||||
<p className="text-accent text-sm font-bold uppercase tracking-wider">{person.role}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Manifest Section */}
|
||||
<section className="bg-slate-50">
|
||||
<div className="container-custom">
|
||||
<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">Werte</span>
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-primary mb-6">Unser Manifest</h2>
|
||||
<p className="text-slate-600 text-lg">Werte, die unsere tägliche Arbeit leiten und den Erfolg Ihrer Projekte sichern.</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
variants={stagger}
|
||||
initial="initial"
|
||||
whileInView="animate"
|
||||
viewport={{ once: true }}
|
||||
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
|
||||
>
|
||||
{[
|
||||
{ icon: Award, title: 'Kompetenz', desc: 'Jahrzehntelange Erfahrung kombiniert mit europaweitem Know-how in modernsten Anlagen.' },
|
||||
{ icon: Clock, title: 'Verfügbarkeit', desc: 'Schnelle und verlässliche Unterstützung ohne unnötige Verzögerungen.' },
|
||||
{ icon: Lightbulb, title: 'Lösungen', desc: 'Wir stellen die richtigen Fragen, um die technisch und wirtschaftlich beste Lösung zu finden.' },
|
||||
{ icon: Truck, title: 'Logistik', desc: 'Von der Fertigungsüberwachung bis zum termingerechten Fracht-Tracking.' },
|
||||
{ icon: MessageSquare, title: 'Offenheit', desc: 'Wir hören zu und passen unsere Prozesse kontinuierlich an Ihren Erfolg an.' },
|
||||
{ icon: ShieldCheck, title: 'Zuverlässigkeit', desc: 'Wir halten, was wir versprechen – ohne Ausnahme. Verbindlichkeit ist unser Fundament.' }
|
||||
].map((item, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
variants={fadeInUp}
|
||||
className="bg-white p-10 rounded-3xl border border-slate-100 shadow-sm hover:shadow-md hover:-translate-y-1 transition-all motion-fix"
|
||||
>
|
||||
<div className="text-accent mb-6">
|
||||
<item.icon size={32} />
|
||||
</div>
|
||||
<h4 className="text-xl font-bold text-primary mb-4">{i + 1}. {item.title}</h4>
|
||||
<p className="text-slate-600 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-slate-900 p-12 md:p-24 overflow-hidden"
|
||||
>
|
||||
<div className="relative z-10">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-white mb-8">
|
||||
Bereit für Ihr nächstes Projekt?
|
||||
</h2>
|
||||
<p className="text-slate-400 text-xl mb-12">
|
||||
Lassen Sie uns gemeinsam die optimale Lösung für Ihre Energieinfrastruktur finden.
|
||||
</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>
|
||||
);
|
||||
export default function Page() {
|
||||
return <AboutContent />;
|
||||
}
|
||||
|
||||
181
components/AboutContent.tsx
Normal file
181
components/AboutContent.tsx
Normal file
@@ -0,0 +1,181 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { Award, Clock, Lightbulb, Linkedin, MessageSquare, ShieldCheck, Truck, ArrowRight } from 'lucide-react';
|
||||
import { motion } from 'framer-motion';
|
||||
import Link from 'next/link';
|
||||
|
||||
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 About() {
|
||||
return (
|
||||
<div className="overflow-hidden">
|
||||
{/* Hero Section */}
|
||||
<section className="relative min-h-[60vh] 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/drums/iStock-487538226 (1).jpg")' }}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-white via-white/95 to-white/40" />
|
||||
</div>
|
||||
|
||||
<div className="container-custom relative z-10">
|
||||
<motion.div
|
||||
initial="initial"
|
||||
animate="animate"
|
||||
variants={stagger}
|
||||
className="text-left"
|
||||
>
|
||||
<motion.span
|
||||
variants={fadeInUp}
|
||||
className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block"
|
||||
>
|
||||
Über uns
|
||||
</motion.span>
|
||||
<motion.h1
|
||||
variants={fadeInUp}
|
||||
className="text-5xl md:text-6xl font-extrabold text-primary mb-8 leading-tight"
|
||||
>
|
||||
Wir gestalten die <span className="text-accent">Infrastruktur</span> der Zukunft
|
||||
</motion.h1>
|
||||
<motion.p
|
||||
variants={fadeInUp}
|
||||
className="text-slate-600 text-xl md:text-2xl leading-relaxed mb-8"
|
||||
>
|
||||
MB Grid Solution steht für technische Exzellenz in der Energiekabeltechnologie. Wir verstehen uns als Ihr technischer Lotse.
|
||||
</motion.p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Content Section */}
|
||||
<section className="bg-white">
|
||||
<div className="container-custom">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="space-y-6 text-lg text-slate-600 leading-relaxed"
|
||||
>
|
||||
<p>
|
||||
Unsere Wurzeln liegen in der tiefen praktischen Erfahrung unserer technischen Berater und unserer Netzwerke im globalem Kabelmarkt. Wir vereinen Tradition mit modernster Innovation, um zuverlässige Energielösungen für Projekte bis 110 kV zu realisieren.
|
||||
</p>
|
||||
<p>
|
||||
Wir verstehen die Herausforderungen der Energiewende und bieten herstellerneutrale Beratung, die auf Fakten, Normen und jahrzehntelanger Erfahrung basiert.
|
||||
</p>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
variants={stagger}
|
||||
initial="initial"
|
||||
whileInView="animate"
|
||||
viewport={{ once: true }}
|
||||
className="grid grid-cols-1 sm:grid-cols-2 gap-6"
|
||||
>
|
||||
{[
|
||||
{ name: 'Michael Bodemer', role: 'Geschäftsführung & Inhaber', linkedin: 'https://www.linkedin.com/in/michael-bodemer-33b493122/' },
|
||||
{ name: 'Klaus Mintel', role: 'Geschäftsführung', linkedin: 'https://www.linkedin.com/in/klaus-mintel-b80a8b193/' }
|
||||
].map((person, i) => (
|
||||
<motion.div key={i} variants={fadeInUp} className="card-modern !p-6">
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<h3 className="text-xl font-bold text-primary">{person.name}</h3>
|
||||
<a href={person.linkedin} target="_blank" rel="noopener noreferrer" className="text-[#0077b5] hover:scale-110 transition-transform">
|
||||
<Linkedin size={20} />
|
||||
</a>
|
||||
</div>
|
||||
<p className="text-accent text-sm font-bold uppercase tracking-wider">{person.role}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Manifest Section */}
|
||||
<section className="bg-slate-50">
|
||||
<div className="container-custom">
|
||||
<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">Werte</span>
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-primary mb-6">Unser Manifest</h2>
|
||||
<p className="text-slate-600 text-lg">Werte, die unsere tägliche Arbeit leiten und den Erfolg Ihrer Projekte sichern.</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
variants={stagger}
|
||||
initial="initial"
|
||||
whileInView="animate"
|
||||
viewport={{ once: true }}
|
||||
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
|
||||
>
|
||||
{[
|
||||
{ icon: Award, title: 'Kompetenz', desc: 'Jahrzehntelange Erfahrung kombiniert mit europaweitem Know-how in modernsten Anlagen.' },
|
||||
{ icon: Clock, title: 'Verfügbarkeit', desc: 'Schnelle und verlässliche Unterstützung ohne unnötige Verzögerungen.' },
|
||||
{ icon: Lightbulb, title: 'Lösungen', desc: 'Wir stellen die richtigen Fragen, um die technisch und wirtschaftlich beste Lösung zu finden.' },
|
||||
{ icon: Truck, title: 'Logistik', desc: 'Von der Fertigungsüberwachung bis zum termingerechten Fracht-Tracking.' },
|
||||
{ icon: MessageSquare, title: 'Offenheit', desc: 'Wir hören zu und passen unsere Prozesse kontinuierlich an Ihren Erfolg an.' },
|
||||
{ icon: ShieldCheck, title: 'Zuverlässigkeit', desc: 'Wir halten, was wir versprechen – ohne Ausnahme. Verbindlichkeit ist unser Fundament.' }
|
||||
].map((item, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
variants={fadeInUp}
|
||||
className="bg-white p-10 rounded-3xl border border-slate-100 shadow-sm hover:shadow-md hover:-translate-y-1 transition-all motion-fix"
|
||||
>
|
||||
<div className="text-accent mb-6">
|
||||
<item.icon size={32} />
|
||||
</div>
|
||||
<h4 className="text-xl font-bold text-primary mb-4">{i + 1}. {item.title}</h4>
|
||||
<p className="text-slate-600 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-slate-900 p-12 md:p-24 overflow-hidden"
|
||||
>
|
||||
<div className="relative z-10">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-white mb-8">
|
||||
Bereit für Ihr nächstes Projekt?
|
||||
</h2>
|
||||
<p className="text-slate-400 text-xl mb-12">
|
||||
Lassen Sie uns gemeinsam die optimale Lösung für Ihre Energieinfrastruktur finden.
|
||||
</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>
|
||||
);
|
||||
}
|
||||
233
components/ContactContent.tsx
Normal file
233
components/ContactContent.tsx
Normal file
@@ -0,0 +1,233 @@
|
||||
'use client';
|
||||
|
||||
import { CheckCircle, Mail, MapPin, Send, ArrowRight } from 'lucide-react';
|
||||
import React, { useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
const fadeInUp = {
|
||||
initial: { opacity: 0, y: 20 },
|
||||
animate: { opacity: 1, y: 0 },
|
||||
transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] }
|
||||
};
|
||||
|
||||
const stagger = {
|
||||
animate: {
|
||||
transition: {
|
||||
staggerChildren: 0.1
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default function Contact() {
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
const formData = new FormData(e.currentTarget);
|
||||
const data = Object.fromEntries(formData.entries());
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/contact', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
if (response.ok) {
|
||||
setSubmitted(true);
|
||||
} else {
|
||||
const err = await response.json();
|
||||
alert(`Fehler: ${err.error || 'Es gab einen Fehler beim Senden Ihrer Nachricht.'}`);
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Es gab einen Fehler beim Senden Ihrer Nachricht.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="overflow-hidden">
|
||||
{/* Hero Section */}
|
||||
<section className="relative min-h-[40vh] 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/laying/iStock-1282259999.jpg")' }}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-white via-white/95 to-white/40" />
|
||||
</div>
|
||||
|
||||
<div className="container-custom relative z-10">
|
||||
<motion.div
|
||||
initial="initial"
|
||||
animate="animate"
|
||||
variants={stagger}
|
||||
className="max-w-3xl"
|
||||
>
|
||||
<motion.span variants={fadeInUp} className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Kontakt</motion.span>
|
||||
<motion.h1
|
||||
variants={fadeInUp}
|
||||
className="text-5xl md:text-6xl font-extrabold text-primary mb-8 leading-tight"
|
||||
>
|
||||
Lassen Sie uns <span className="text-accent">sprechen</span>
|
||||
</motion.h1>
|
||||
<motion.p
|
||||
variants={fadeInUp}
|
||||
className="text-slate-600 text-xl md:text-2xl leading-relaxed"
|
||||
>
|
||||
Haben Sie Fragen zu einem Projekt oder benötigen Sie technische Beratung? Wir freuen uns auf Ihre Nachricht.
|
||||
</motion.p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="bg-slate-50">
|
||||
<div className="container-custom">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 md:gap-24">
|
||||
<motion.div
|
||||
variants={stagger}
|
||||
initial="initial"
|
||||
whileInView="animate"
|
||||
viewport={{ once: true }}
|
||||
className="space-y-8"
|
||||
>
|
||||
<motion.div
|
||||
variants={fadeInUp}
|
||||
whileHover={{ x: 5 }}
|
||||
className="card-modern !p-8 flex gap-6 items-start"
|
||||
>
|
||||
<div className="w-14 h-14 rounded-2xl bg-accent/10 text-accent flex items-center justify-center shrink-0">
|
||||
<Mail size={24} />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-slate-500 font-bold text-xs uppercase tracking-widest mb-2">E-Mail</h4>
|
||||
<a href="mailto:info@mb-grid-solutions.com" className="text-primary text-xl font-bold hover:text-accent transition-colors">
|
||||
info@mb-grid-solutions.com
|
||||
</a>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
variants={fadeInUp}
|
||||
whileHover={{ x: 5 }}
|
||||
className="card-modern !p-8 flex gap-6 items-start"
|
||||
>
|
||||
<div className="w-14 h-14 rounded-2xl bg-accent/10 text-accent flex items-center justify-center shrink-0">
|
||||
<MapPin size={24} />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-slate-500 font-bold text-xs uppercase tracking-widest mb-2">Anschrift</h4>
|
||||
<p className="text-primary text-xl font-bold leading-relaxed">
|
||||
MB Grid Solutions GmbH<br />
|
||||
Raiffeisenstraße 22<br />
|
||||
73630 Remshalden
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="bg-white p-8 md:p-12 rounded-[2.5rem] border border-slate-100 shadow-xl"
|
||||
>
|
||||
{submitted ? (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
className="text-center py-12"
|
||||
>
|
||||
<div className="w-20 h-20 rounded-full bg-accent/10 text-accent flex items-center justify-center mx-auto mb-8">
|
||||
<CheckCircle size={40} />
|
||||
</div>
|
||||
<h3 className="text-3xl font-bold text-primary mb-4">Nachricht gesendet</h3>
|
||||
<p className="text-slate-600 text-lg mb-10">
|
||||
Vielen Dank für Ihre Anfrage. Wir werden uns in Kürze bei Ihnen melden.
|
||||
</p>
|
||||
<button
|
||||
onClick={() => setSubmitted(false)}
|
||||
className="btn-primary"
|
||||
>
|
||||
Weitere Nachricht
|
||||
</button>
|
||||
</motion.div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="name" className="text-sm font-bold text-slate-700 ml-1">Name *</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
required
|
||||
placeholder="Ihr Name"
|
||||
className="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:outline-none focus:border-accent focus:ring-4 focus:ring-accent/5 transition-all"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="company" className="text-sm font-bold text-slate-700 ml-1">Firma</label>
|
||||
<input
|
||||
type="text"
|
||||
id="company"
|
||||
name="company"
|
||||
placeholder="Ihr Unternehmen"
|
||||
className="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:outline-none focus:border-accent focus:ring-4 focus:ring-accent/5 transition-all"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="email" className="text-sm font-bold text-slate-700 ml-1">E-Mail *</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
required
|
||||
placeholder="ihre@email.de"
|
||||
className="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:outline-none focus:border-accent focus:ring-4 focus:ring-accent/5 transition-all"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="message" className="text-sm font-bold text-slate-700 ml-1">Nachricht *</label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
required
|
||||
rows={5}
|
||||
placeholder="Wie können wir Ihnen helfen?"
|
||||
className="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:outline-none focus:border-accent focus:ring-4 focus:ring-accent/5 transition-all resize-none"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="btn-accent w-full py-5 text-lg group"
|
||||
>
|
||||
{loading ? 'Wird gesendet...' : 'Nachricht senden'}
|
||||
<Send className="ml-3 transition-transform group-hover:translate-x-1 group-hover:-translate-y-1" size={20} />
|
||||
</button>
|
||||
|
||||
<p className="text-xs text-slate-400 text-center">
|
||||
* Pflichtfelder. Mit dem Absenden erklären Sie sich mit unserer{' '}
|
||||
<Link href="/datenschutz" className="text-accent hover:underline font-semibold">
|
||||
Datenschutzerklärung
|
||||
</Link>{' '}
|
||||
einverstanden.
|
||||
</p>
|
||||
</form>
|
||||
)}
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
337
components/HomeContent.tsx
Normal file
337
components/HomeContent.tsx
Normal file
@@ -0,0 +1,337 @@
|
||||
'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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user