redesign
This commit is contained in:
@@ -1,337 +1,151 @@
|
||||
import { Award, Clock, Lightbulb, Linkedin, MessageSquare, ShieldCheck, Truck } from 'lucide-react';
|
||||
'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.6, ease: [0.22, 1, 0.36, 1] }
|
||||
};
|
||||
|
||||
const stagger = {
|
||||
animate: {
|
||||
transition: {
|
||||
staggerChildren: 0.1
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default function About() {
|
||||
return (
|
||||
<div>
|
||||
<section style={{
|
||||
background: 'linear-gradient(to right, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0.7) 100%), url("/media/drums/iStock-487538226 (1).jpg")',
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
minHeight: 'clamp(60vh, 70vh, 80vh)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-start'
|
||||
}}>
|
||||
<div className="container" style={{ margin: '0 auto', display: 'flex', justifyContent: 'flex-start' }}>
|
||||
<div className="about-hero-content" style={{ maxWidth: '700px', textAlign: 'left', paddingLeft: 0, marginLeft: 0 }}>
|
||||
<h1 className="no-underline">Über uns</h1>
|
||||
<p style={{
|
||||
fontSize: 'clamp(1.125rem, 2.5vw, 1.25rem)',
|
||||
color: 'var(--text-secondary)',
|
||||
marginBottom: 'var(--spacing-xl)',
|
||||
lineHeight: 1.6
|
||||
}}>
|
||||
Wir verbinden Energie, Know-how und Innovation, um die Infrastruktur der Zukunft zu gestalten.
|
||||
</p>
|
||||
<p style={{
|
||||
marginBottom: 'var(--spacing-lg)',
|
||||
lineHeight: 1.7,
|
||||
fontSize: 'clamp(0.9375rem, 2vw, 1rem)'
|
||||
}}>
|
||||
MB Grid Solution steht für technische Exzellenz in der Energiekabeltechnologie. Wir verstehen uns als Ihr technischer Lotse, der mit jahrzehntelanger Erfahrung und einem klaren Blick für zukunftsweisende Entwicklungen komplexe Projekte sicher zum Ziel führt.
|
||||
</p>
|
||||
<p style={{
|
||||
lineHeight: 1.7,
|
||||
fontSize: 'clamp(0.9375rem, 2vw, 1rem)'
|
||||
}}>
|
||||
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 und bei Bedarf darüber hinaus zu realisieren.
|
||||
</p>
|
||||
</div>
|
||||
<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="max-w-3xl"
|
||||
>
|
||||
<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>
|
||||
|
||||
<section>
|
||||
<div className="container">
|
||||
<div style={{
|
||||
textAlign: 'center',
|
||||
marginBottom: 'clamp(3rem, 6vw, 4rem)'
|
||||
}}>
|
||||
<h2 className="no-underline">Die Köpfe und Koordinatoren hinter MB Grid Solution</h2>
|
||||
</div>
|
||||
<div className="grid team-grid" style={{
|
||||
gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))',
|
||||
gap: 'var(--spacing-xl)'
|
||||
}}>
|
||||
<div className="card">
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.5rem' }}>
|
||||
<h3 style={{ marginBottom: 0 }}>Michael Bodemer</h3>
|
||||
<a
|
||||
href="https://www.linkedin.com/in/michael-bodemer-33b493122/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
style={{ color: '#0077b5', display: 'flex' }}
|
||||
aria-label="Michael Bodemer auf LinkedIn"
|
||||
>
|
||||
<Linkedin size={20} />
|
||||
</a>
|
||||
</div>
|
||||
<p style={{
|
||||
color: 'var(--accent-green)',
|
||||
fontWeight: 600,
|
||||
fontSize: 'clamp(0.8125rem, 2vw, 0.85rem)',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.05em',
|
||||
}}>
|
||||
Geschäftsführung und Inhaber
|
||||
{/* Content Section */}
|
||||
<section className="bg-white">
|
||||
<div className="container-custom">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||||
<div 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>
|
||||
</div>
|
||||
<div 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) => (
|
||||
<div key={i} 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>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="card">
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.5rem' }}>
|
||||
<h3 style={{ marginBottom: 0 }}>Klaus Mintel</h3>
|
||||
<a
|
||||
href="https://www.linkedin.com/in/klaus-mintel-b80a8b193/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
style={{ color: '#0077b5', display: 'flex' }}
|
||||
aria-label="Klaus Mintel auf LinkedIn"
|
||||
>
|
||||
<Linkedin size={20} />
|
||||
</a>
|
||||
</div>
|
||||
<p style={{
|
||||
color: 'var(--accent-green)',
|
||||
fontWeight: 600,
|
||||
fontSize: 'clamp(0.8125rem, 2vw, 0.85rem)',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.05em',
|
||||
}}>
|
||||
Geschäftsführung
|
||||
{/* Manifest Section */}
|
||||
<section className="bg-slate-50">
|
||||
<div className="container-custom">
|
||||
<div className="text-center max-w-3xl mx-auto 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>
|
||||
</div>
|
||||
|
||||
<div 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}
|
||||
whileHover={{ y: -5 }}
|
||||
className="bg-white p-10 rounded-3xl border border-slate-100 shadow-sm hover:shadow-md transition-all"
|
||||
>
|
||||
<div className="text-accent mb-6">
|
||||
{React.cloneElement(item.icon as React.ReactElement, { 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>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="bg-white">
|
||||
<div className="container-custom">
|
||||
<div className="relative rounded-[2.5rem] bg-slate-900 p-12 md:p-24 overflow-hidden text-center">
|
||||
<div className="relative z-10 max-w-2xl mx-auto">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style={{ background: 'white' }}>
|
||||
<div className="container">
|
||||
<div style={{
|
||||
textAlign: 'center',
|
||||
marginBottom: 'clamp(3rem, 8vw, 5rem)'
|
||||
}}>
|
||||
<h2 className="no-underline">Unser Manifest</h2>
|
||||
<p style={{
|
||||
color: 'var(--text-secondary)',
|
||||
fontSize: 'clamp(1rem, 2.5vw, 1.1rem)'
|
||||
}}>
|
||||
Werte, die unsere tägliche Arbeit leiten.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid manifest-grid" style={{
|
||||
gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
|
||||
gap: 'var(--spacing-2xl)'
|
||||
}}>
|
||||
<div className="manifest-item" style={{
|
||||
display: 'flex',
|
||||
gap: 'var(--spacing-lg)'
|
||||
}}>
|
||||
<div style={{
|
||||
color: 'var(--accent-green)',
|
||||
flexShrink: 0
|
||||
}}>
|
||||
<Award size={32} strokeWidth={2} />
|
||||
</div>
|
||||
<div>
|
||||
<h4 style={{
|
||||
marginBottom: 'var(--spacing-xs)',
|
||||
fontSize: 'clamp(1rem, 2.5vw, 1.1rem)',
|
||||
fontWeight: 600
|
||||
}}>
|
||||
1. Kompetenz
|
||||
</h4>
|
||||
<p style={{
|
||||
fontSize: 'clamp(0.875rem, 2vw, 0.9rem)',
|
||||
color: 'var(--text-secondary)',
|
||||
lineHeight: 1.7
|
||||
}}>
|
||||
Jahrzehntelange Erfahrung kombiniert mit europaweitem Know-how. Wir arbeiten mit Partnern für modernste Anlagen und Testlabore bis 525 kV.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="manifest-item" style={{
|
||||
display: 'flex',
|
||||
gap: 'var(--spacing-lg)'
|
||||
}}>
|
||||
<div style={{
|
||||
color: 'var(--accent-green)',
|
||||
flexShrink: 0
|
||||
}}>
|
||||
<Clock size={32} strokeWidth={2} />
|
||||
</div>
|
||||
<div>
|
||||
<h4 style={{
|
||||
marginBottom: 'var(--spacing-xs)',
|
||||
fontSize: 'clamp(1rem, 2.5vw, 1.1rem)',
|
||||
fontWeight: 600
|
||||
}}>
|
||||
2. Verfügbarkeit
|
||||
</h4>
|
||||
<p style={{
|
||||
fontSize: 'clamp(0.875rem, 2vw, 0.9rem)',
|
||||
color: 'var(--text-secondary)',
|
||||
lineHeight: 1.7
|
||||
}}>
|
||||
Schnelle und verlässliche Unterstützung ohne unnötige Verzögerungen. Wir sind für Sie da, wenn es darauf ankommt.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="manifest-item" style={{
|
||||
display: 'flex',
|
||||
gap: 'var(--spacing-lg)'
|
||||
}}>
|
||||
<div style={{
|
||||
color: 'var(--accent-green)',
|
||||
flexShrink: 0
|
||||
}}>
|
||||
<Lightbulb size={32} strokeWidth={2} />
|
||||
</div>
|
||||
<div>
|
||||
<h4 style={{
|
||||
marginBottom: 'var(--spacing-xs)',
|
||||
fontSize: 'clamp(1rem, 2.5vw, 1.1rem)',
|
||||
fontWeight: 600
|
||||
}}>
|
||||
3. Lösungen
|
||||
</h4>
|
||||
<p style={{
|
||||
fontSize: 'clamp(0.875rem, 2vw, 0.9rem)',
|
||||
color: 'var(--text-secondary)',
|
||||
lineHeight: 1.7
|
||||
}}>
|
||||
Wir stellen die richtigen Fragen – an Sie, an Hersteller und an uns selbst. Nur wer hinterfragt, findet die technisch und wirtschaftlich beste Lösung. Und reduziert Risiken.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="manifest-item" style={{
|
||||
display: 'flex',
|
||||
gap: 'var(--spacing-lg)'
|
||||
}}>
|
||||
<div style={{
|
||||
color: 'var(--accent-green)',
|
||||
flexShrink: 0
|
||||
}}>
|
||||
<Truck size={32} strokeWidth={2} />
|
||||
</div>
|
||||
<div>
|
||||
<h4 style={{
|
||||
marginBottom: 'var(--spacing-xs)',
|
||||
fontSize: 'clamp(1rem, 2.5vw, 1.1rem)',
|
||||
fontWeight: 600
|
||||
}}>
|
||||
4. Logistik & Überwachung
|
||||
</h4>
|
||||
<p style={{
|
||||
fontSize: 'clamp(0.875rem, 2vw, 0.9rem)',
|
||||
color: 'var(--text-secondary)',
|
||||
lineHeight: 1.7
|
||||
}}>
|
||||
Von der Fertigungsüberwachung bis zum Fracht-Tracking und der termingerechten Anlieferung – wir steuern den gesamten Prozess professionell.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="manifest-item" style={{
|
||||
display: 'flex',
|
||||
gap: 'var(--spacing-lg)'
|
||||
}}>
|
||||
<div style={{
|
||||
color: 'var(--accent-green)',
|
||||
flexShrink: 0
|
||||
}}>
|
||||
<MessageSquare size={32} strokeWidth={2} />
|
||||
</div>
|
||||
<div>
|
||||
<h4 style={{
|
||||
marginBottom: 'var(--spacing-xs)',
|
||||
fontSize: 'clamp(1rem, 2.5vw, 1.1rem)',
|
||||
fontWeight: 600
|
||||
}}>
|
||||
5. Offenheit
|
||||
</h4>
|
||||
<p style={{
|
||||
fontSize: 'clamp(0.875rem, 2vw, 0.9rem)',
|
||||
color: 'var(--text-secondary)',
|
||||
lineHeight: 1.7
|
||||
}}>
|
||||
Wir hören zu und passen unsere Prozesse kontinuierlich an. Stillstand ist für uns keine Option – wir optimieren für Ihren Erfolg.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="manifest-item" style={{
|
||||
display: 'flex',
|
||||
gap: 'var(--spacing-lg)'
|
||||
}}>
|
||||
<div style={{
|
||||
color: 'var(--accent-green)',
|
||||
flexShrink: 0
|
||||
}}>
|
||||
<ShieldCheck size={32} strokeWidth={2} />
|
||||
</div>
|
||||
<div>
|
||||
<h4 style={{
|
||||
marginBottom: 'var(--spacing-xs)',
|
||||
fontSize: 'clamp(1rem, 2.5vw, 1.1rem)',
|
||||
fontWeight: 600
|
||||
}}>
|
||||
6. Zuverlässigkeit
|
||||
</h4>
|
||||
<p style={{
|
||||
fontSize: 'clamp(0.875rem, 2vw, 0.9rem)',
|
||||
color: 'var(--text-secondary)',
|
||||
lineHeight: 1.7
|
||||
}}>
|
||||
Wir halten, was wir versprechen – ohne Ausnahme. Verbindlichkeit ist das Fundament unserer Zusammenarbeit.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div className="container">
|
||||
<div className="card" style={{
|
||||
background: 'var(--primary-color)',
|
||||
color: 'white',
|
||||
textAlign: 'left',
|
||||
padding: 'clamp(3rem, 6vw, 4rem)'
|
||||
}}>
|
||||
<h2
|
||||
className="no-underline"
|
||||
style={{
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
padding: 0,
|
||||
marginBottom: 'var(--spacing-lg)',
|
||||
fontSize: 'clamp(1.5rem, 6vw, 2rem)',
|
||||
position: 'relative',
|
||||
textAlign: 'left'
|
||||
}}
|
||||
>
|
||||
Bereit für Ihr nächstes Projekt?
|
||||
</h2>
|
||||
<p style={{
|
||||
marginBottom: 'var(--spacing-2xl)',
|
||||
opacity: 0.9,
|
||||
fontSize: 'clamp(1rem, 2.5vw, 1.1rem)',
|
||||
lineHeight: 1.65,
|
||||
textAlign: 'left'
|
||||
}}>
|
||||
Lassen Sie uns gemeinsam die optimale Lösung für Ihre Energieinfrastruktur finden.
|
||||
</p>
|
||||
<a
|
||||
href="/kontakt"
|
||||
className="cta-button"
|
||||
style={{
|
||||
background: 'white',
|
||||
color: 'var(--primary-color)'
|
||||
}}
|
||||
aria-label="Jetzt Kontakt aufnehmen"
|
||||
>
|
||||
Jetzt Kontakt aufnehmen
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user