mmintel/mb-grid-solutions.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

reveals
Some checks failed
Build & Deploy MB Grid Solutions / build-and-deploy (push) Failing after 24s
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-01-29 01:00:58 +01:00
parent 36c432606f
commit 912e430725
6 changed files with 194 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/globals.css
View File

@@ -32,10 +32,16 @@
} }
body { body {
@apply bg-surface text-text-main antialiased selection:bg-accent/20 selection:text-accent; @apply bg-surface text-text-main antialiased selection:bg-accent/20 selection:text-accent overflow-x-hidden;
font-feature-settings: "cv02", "cv03", "cv04", "cv11"; font-feature-settings: "cv02", "cv03", "cv04", "cv11";
} }
.motion-fix {
backface-visibility: hidden;
transform-style: preserve-3d;
perspective: 1000px;
}
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
@apply font-bold tracking-tight text-primary; @apply font-bold tracking-tight text-primary;
text-wrap: balance; text-wrap: balance;

13
app/impressum/page.tsx
View File

@@ -1,8 +1,17 @@
'use client';
import { motion } from 'framer-motion';
export default function Legal() { export default function Legal() {
return ( return (
<div className="bg-slate-50 min-h-screen pt-32 pb-20"> <div className="bg-slate-50 min-h-screen pt-32 pb-20">
<div className="container-custom"> <div className="container-custom">
<div className="max-w-4xl mx-auto bg-white p-8 md:p-16 rounded-[2.5rem] shadow-sm border border-slate-100"> <motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
className="max-w-4xl mx-auto bg-white p-8 md:p-16 rounded-[2.5rem] shadow-sm border border-slate-100"
>
<h1 className="text-4xl font-extrabold text-primary mb-12">Impressum</h1> <h1 className="text-4xl font-extrabold text-primary mb-12">Impressum</h1>
<div className="space-y-12 text-slate-600 leading-relaxed"> <div className="space-y-12 text-slate-600 leading-relaxed">
@@ -47,7 +56,7 @@ export default function Legal() {
</p> </p>
</section> </section>
</div> </div>
</div> </motion.div>
</div> </div>
</div> </div>
); );

48
app/kontakt/page.tsx
View File

@@ -11,6 +11,14 @@ const fadeInUp = {
transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] } transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] }
}; };
const stagger = {
animate: {
transition: {
staggerChildren: 0.1
}
}
};
export default function Contact() { export default function Contact() {
const [submitted, setSubmitted] = useState(false); const [submitted, setSubmitted] = useState(false);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
@@ -56,16 +64,22 @@ export default function Contact() {
<motion.div <motion.div
initial="initial" initial="initial"
animate="animate" animate="animate"
variants={fadeInUp} variants={stagger}
className="max-w-3xl" className="max-w-3xl"
> >
<span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Kontakt</span> <motion.span variants={fadeInUp} className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Kontakt</motion.span>
<h1 className="text-5xl md:text-6xl font-extrabold text-primary mb-8 leading-tight"> <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> Lassen Sie uns <span className="text-accent">sprechen</span>
</h1> </motion.h1>
<p className="text-slate-600 text-xl md:text-2xl leading-relaxed"> <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. Haben Sie Fragen zu einem Projekt oder benötigen Sie technische Beratung? Wir freuen uns auf Ihre Nachricht.
</p> </motion.p>
</motion.div> </motion.div>
</div> </div>
</section> </section>
@@ -73,8 +87,15 @@ export default function Contact() {
<section className="bg-slate-50"> <section className="bg-slate-50">
<div className="container-custom"> <div className="container-custom">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 md:gap-24"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 md:gap-24">
<div className="space-y-8"> <motion.div
variants={stagger}
initial="initial"
whileInView="animate"
viewport={{ once: true }}
className="space-y-8"
>
<motion.div <motion.div
variants={fadeInUp}
whileHover={{ x: 5 }} whileHover={{ x: 5 }}
className="card-modern !p-8 flex gap-6 items-start" className="card-modern !p-8 flex gap-6 items-start"
> >
@@ -90,6 +111,7 @@ export default function Contact() {
</motion.div> </motion.div>
<motion.div <motion.div
variants={fadeInUp}
whileHover={{ x: 5 }} whileHover={{ x: 5 }}
className="card-modern !p-8 flex gap-6 items-start" className="card-modern !p-8 flex gap-6 items-start"
> >
@@ -105,9 +127,15 @@ export default function Contact() {
</p> </p>
</div> </div>
</motion.div> </motion.div>
</div> </motion.div>
<div className="bg-white p-8 md:p-12 rounded-[2.5rem] border border-slate-100 shadow-xl"> <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 ? ( {submitted ? (
<motion.div <motion.div
initial={{ opacity: 0, scale: 0.9 }} initial={{ opacity: 0, scale: 0.9 }}
@@ -196,7 +224,7 @@ export default function Contact() {
</p> </p>
</form> </form>
)} )}
</div> </motion.div>
</div> </div>
</div> </div>
</section> </section>

99
app/page.tsx
View File

@@ -7,7 +7,7 @@ import { motion } from 'framer-motion';
const fadeInUp = { const fadeInUp = {
initial: { opacity: 0, y: 20 }, initial: { opacity: 0, y: 20 },
animate: { opacity: 1, y: 0 }, animate: { opacity: 1, y: 0 },
transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] } transition: { duration: 0.8, ease: [0.22, 1, 0.36, 1] }
}; };
const stagger = { const stagger = {
@@ -82,7 +82,13 @@ export default function Home() {
{/* Portfolio Section */} {/* Portfolio Section */}
<section className="bg-slate-50"> <section className="bg-slate-50">
<div className="container-custom"> <div className="container-custom">
<div className="flex flex-col md:flex-row md:items-end justify-between gap-8 mb-16"> <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 className="max-w-2xl"> <div className="max-w-2xl">
<span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Portfolio</span> <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> <h2 className="text-4xl md:text-5xl font-bold text-primary mb-6">Unsere Leistungen</h2>
@@ -93,9 +99,15 @@ export default function Home() {
<Link href="/ueber-uns" className="text-primary font-bold flex items-center gap-2 hover:text-accent transition-colors group"> <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} /> Alle Details ansehen <ChevronRight className="transition-transform group-hover:translate-x-1" size={20} />
</Link> </Link>
</div> </motion.div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8"> <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} />, icon: <Zap size={32} />,
@@ -115,8 +127,9 @@ export default function Home() {
].map((item, i) => ( ].map((item, i) => (
<motion.div <motion.div
key={i} key={i}
variants={fadeInUp}
whileHover={{ y: -8 }} whileHover={{ y: -8 }}
className="card-modern group" className="card-modern group motion-fix"
> >
<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"> <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} {item.icon}
@@ -127,7 +140,7 @@ export default function Home() {
</p> </p>
</motion.div> </motion.div>
))} ))}
</div> </motion.div>
</div> </div>
</section> </section>
@@ -135,21 +148,35 @@ export default function Home() {
<section className="bg-white"> <section className="bg-white">
<div className="container-custom"> <div className="container-custom">
<div className="grid grid-cols-1 lg:grid-cols-2 items-center gap-16 md:gap-24"> <div className="grid grid-cols-1 lg:grid-cols-2 items-center gap-16 md:gap-24">
<div className="relative"> <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" /> <div className="absolute -inset-4 bg-accent/10 rounded-3xl -rotate-2 z-0" />
<img <img
src="/media/cables/HS Kabel.png" src="/media/cables/HS Kabel.png"
alt="Technical Engineering" alt="Technical Engineering"
className="relative z-10 w-full h-[400px] md:h-[500px] object-cover rounded-2xl shadow-2xl" className="relative z-10 w-full h-[400px] md:h-[500px] object-cover rounded-2xl shadow-2xl"
/> />
</div> </motion.div>
<div> <motion.div
<span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Expertise</span> initial="initial"
<h2 className="text-4xl md:text-5xl font-bold text-primary mb-8">Anwendungen & Zielgruppen</h2> whileInView="animate"
<p className="text-slate-600 text-lg md:text-xl mb-12"> 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. Wir unterstützen Akteure der Energiewende bei der Realisierung komplexer Kabelprojekte mit höchster Präzision.
</p> </motion.p>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> <motion.div
variants={stagger}
className="grid grid-cols-1 sm:grid-cols-2 gap-4"
>
{[ {[
'Energieversorger', 'Energieversorger',
'Ingenieurbüros', 'Ingenieurbüros',
@@ -158,18 +185,19 @@ export default function Home() {
'Projektierer EE', 'Projektierer EE',
'Planungsbüros' 'Planungsbüros'
].map((item, i) => ( ].map((item, i) => (
<div <motion.div
key={i} 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" 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"> <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} /> <CheckCircle2 size={16} />
</div> </div>
<span className="text-primary font-semibold">{item}</span> <span className="text-primary font-semibold">{item}</span>
</div> </motion.div>
))} ))}
</div> </motion.div>
</div> </motion.div>
</div> </div>
</div> </div>
</section> </section>
@@ -186,19 +214,32 @@ export default function Home() {
</div> </div>
<div className="container-custom relative z-10"> <div className="container-custom relative z-10">
<div className="text-center max-w-3xl mx-auto mb-20"> <motion.div
initial="initial"
whileInView="animate"
viewport={{ once: true }}
variants={fadeInUp}
className="text-center max-w-3xl mx-auto mb-20"
>
<span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Spezifikationen</span> <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> <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">Technische Expertise</h2>
</div> </motion.div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8"> <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: '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: '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.' } { label: 'Leitertechnologie', value: 'Massiv-, Mehrdraht- & Milliken', desc: 'Optimierung des Leiterdesigns hinsichtlich Stromtragfähigkeit.' }
].map((item, i) => ( ].map((item, i) => (
<div <motion.div
key={i} 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" 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"> <h4 className="text-accent font-bold text-xs uppercase tracking-widest mb-6">
@@ -210,16 +251,22 @@ export default function Home() {
<p className="text-slate-400 leading-relaxed"> <p className="text-slate-400 leading-relaxed">
{item.desc} {item.desc}
</p> </p>
</div> </motion.div>
))} ))}
</div> </motion.div>
</div> </div>
</section> </section>
{/* CTA Section */} {/* CTA Section */}
<section className="bg-white"> <section className="bg-white">
<div className="container-custom"> <div className="container-custom">
<div className="relative rounded-[2.5rem] bg-primary p-12 md:p-24 overflow-hidden"> <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"> <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"> <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="400" stroke="white" strokeWidth="2" />
@@ -240,7 +287,7 @@ export default function Home() {
<ArrowRight className="ml-3 transition-transform group-hover:translate-x-2" size={24} /> <ArrowRight className="ml-3 transition-transform group-hover:translate-x-2" size={24} />
</Link> </Link>
</div> </div>
</div> </motion.div>
</div> </div>
</section> </section>
</div> </div>

73
app/ueber-uns/page.tsx
View File

@@ -8,7 +8,7 @@ import Link from 'next/link';
const fadeInUp = { const fadeInUp = {
initial: { opacity: 0, y: 20 }, initial: { opacity: 0, y: 20 },
animate: { opacity: 1, y: 0 }, animate: { opacity: 1, y: 0 },
transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] } transition: { duration: 0.8, ease: [0.22, 1, 0.36, 1] }
}; };
const stagger = { const stagger = {
@@ -65,20 +65,32 @@ export default function About() {
<section className="bg-white"> <section className="bg-white">
<div className="container-custom"> <div className="container-custom">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center"> <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"> <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> <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. 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>
<p> <p>
Wir verstehen die Herausforderungen der Energiewende und bieten herstellerneutrale Beratung, die auf Fakten, Normen und jahrzehntelanger Erfahrung basiert. Wir verstehen die Herausforderungen der Energiewende und bieten herstellerneutrale Beratung, die auf Fakten, Normen und jahrzehntelanger Erfahrung basiert.
</p> </p>
</div> </motion.div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6"> <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: '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/' } { name: 'Klaus Mintel', role: 'Geschäftsführung', linkedin: 'https://www.linkedin.com/in/klaus-mintel-b80a8b193/' }
].map((person, i) => ( ].map((person, i) => (
<div key={i} className="card-modern !p-6"> <motion.div key={i} variants={fadeInUp} className="card-modern !p-6">
<div className="flex justify-between items-start mb-4"> <div className="flex justify-between items-start mb-4">
<h3 className="text-xl font-bold text-primary">{person.name}</h3> <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"> <a href={person.linkedin} target="_blank" rel="noopener noreferrer" className="text-[#0077b5] hover:scale-110 transition-transform">
@@ -86,9 +98,9 @@ export default function About() {
</a> </a>
</div> </div>
<p className="text-accent text-sm font-bold uppercase tracking-wider">{person.role}</p> <p className="text-accent text-sm font-bold uppercase tracking-wider">{person.role}</p>
</div> </motion.div>
))} ))}
</div> </motion.div>
</div> </div>
</div> </div>
</section> </section>
@@ -96,41 +108,60 @@ export default function About() {
{/* Manifest Section */} {/* Manifest Section */}
<section className="bg-slate-50"> <section className="bg-slate-50">
<div className="container-custom"> <div className="container-custom">
<div className="text-center max-w-3xl mx-auto mb-20"> <motion.div
initial="initial"
whileInView="animate"
viewport={{ once: true }}
variants={fadeInUp}
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> <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> <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> <p className="text-slate-600 text-lg">Werte, die unsere tägliche Arbeit leiten und den Erfolg Ihrer Projekte sichern.</p>
</div> </motion.div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <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: 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: 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: 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: 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: 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.' } { icon: ShieldCheck, title: 'Zuverlässigkeit', desc: 'Wir halten, was wir versprechen – ohne Ausnahme. Verbindlichkeit ist unser Fundament.' }
].map((item, i) => ( ].map((item, i) => (
<motion.div <motion.div
key={i} key={i}
variants={fadeInUp}
whileHover={{ y: -5 }} whileHover={{ y: -5 }}
className="bg-white p-10 rounded-3xl border border-slate-100 shadow-sm hover:shadow-md transition-all" className="bg-white p-10 rounded-3xl border border-slate-100 shadow-sm hover:shadow-md transition-all motion-fix"
> >
<div className="text-accent mb-6"> <div className="text-accent mb-6">
{React.cloneElement(item.icon as React.ReactElement, { size: 32 })} <item.icon size={32} />
</div> </div>
<h4 className="text-xl font-bold text-primary mb-4">{i + 1}. {item.title}</h4> <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> <p className="text-slate-600 leading-relaxed">{item.desc}</p>
</motion.div> </motion.div>
))} ))}
</div> </motion.div>
</div> </div>
</section> </section>
{/* CTA Section */} {/* CTA Section */}
<section className="bg-white"> <section className="bg-white">
<div className="container-custom"> <div className="container-custom">
<div className="relative rounded-[2.5rem] bg-slate-900 p-12 md:p-24 overflow-hidden text-center"> <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 text-center"
>
<div className="relative z-10 max-w-2xl mx-auto"> <div className="relative z-10 max-w-2xl mx-auto">
<h2 className="text-4xl md:text-5xl font-bold text-white mb-8"> <h2 className="text-4xl md:text-5xl font-bold text-white mb-8">
Bereit für Ihr nächstes Projekt? Bereit für Ihr nächstes Projekt?
@@ -143,7 +174,7 @@ export default function About() {
<ArrowRight className="ml-3 transition-transform group-hover:translate-x-2" size={24} /> <ArrowRight className="ml-3 transition-transform group-hover:translate-x-2" size={24} />
</Link> </Link>
</div> </div>
</div> </motion.div>
</div> </div>
</section> </section>
</div> </div>

17
components/Layout.tsx
View File

@@ -40,7 +40,10 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
return ( return (
<div className="min-h-screen flex flex-col font-sans"> <div className="min-h-screen flex flex-col font-sans">
<header <motion.header
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1, ease: [0.22, 1, 0.36, 1] }}
className={`fixed top-0 left-0 right-0 z-[100] transition-all duration-300 flex items-center py-1 ${ className={`fixed top-0 left-0 right-0 z-[100] transition-all duration-300 flex items-center py-1 ${
isScrolled isScrolled
? 'bg-white/80 backdrop-blur-lg border-b border-slate-200' ? 'bg-white/80 backdrop-blur-lg border-b border-slate-200'
@@ -93,7 +96,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
{isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />} {isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
</button> </button>
</div> </div>
</header> </motion.header>
{/* Mobile Menu Overlay */} {/* Mobile Menu Overlay */}
<AnimatePresence> <AnimatePresence>
@@ -144,7 +147,13 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
<ArrowUp size={20} strokeWidth={2.5} /> <ArrowUp size={20} strokeWidth={2.5} />
</button> </button>
<footer className="bg-slate-900 text-slate-300 py-16 md:py-24"> <motion.footer
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true }}
transition={{ duration: 1 }}
className="bg-slate-900 text-slate-300 py-16 md:py-24"
>
<div className="container-custom"> <div className="container-custom">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-16"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-16">
<div className="lg:col-span-2"> <div className="lg:col-span-2">
@@ -190,7 +199,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
</p> </p>
</div> </div>
</div> </div>
</footer> </motion.footer>
</div> </div>
); );
}; };