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

reveals

Browse Source
This commit is contained in:
Marc Mintel
2026-01-29 01:16:43 +01:00
parent 0e0f25e476
commit 100d656f91
5 changed files with 405 additions and 479 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
components/AboutContent.tsx
View File

@@ -2,22 +2,8 @@
import React from 'react'; import React from 'react';
import { Award, Clock, Lightbulb, Linkedin, MessageSquare, ShieldCheck, Truck, ArrowRight } from 'lucide-react'; import { Award, Clock, Lightbulb, Linkedin, MessageSquare, ShieldCheck, Truck, ArrowRight } from 'lucide-react';
import { motion } from 'framer-motion';
import Link from 'next/link'; import Link from 'next/link';
import { Reveal } from './Reveal';
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() { export default function About() {
return ( return (
@@ -33,31 +19,23 @@ export default function About() {
</div> </div>
<div className="container-custom relative z-10"> <div className="container-custom relative z-10">
<motion.div <div className="text-left">
initial="initial" <Reveal delay={0.1}>
animate="animate" <span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">
variants={stagger}
className="text-left"
>
<motion.span
variants={fadeInUp}
className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block"
>
Über uns Über uns
</motion.span> </span>
<motion.h1 </Reveal>
variants={fadeInUp} <Reveal delay={0.2}>
className="text-5xl md:text-6xl font-extrabold text-primary mb-8 leading-tight" <h1 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 Wir gestalten die <span className="text-accent">Infrastruktur</span> der Zukunft
</motion.h1> </h1>
<motion.p </Reveal>
variants={fadeInUp} <Reveal delay={0.3}>
className="text-slate-600 text-xl md:text-2xl leading-relaxed mb-8" <p className="text-slate-600 text-xl md:text-2xl leading-relaxed mb-8">
> MB Grid Solution steht for technische Exzellenz in der Energiekabeltechnologie. Wir verstehen uns als Ihr technischer Lotse.
MB Grid Solution steht für technische Exzellenz in der Energiekabeltechnologie. Wir verstehen uns als Ihr technischer Lotse. </p>
</motion.p> </Reveal>
</motion.div> </div>
</div> </div>
</section> </section>
@@ -65,32 +43,23 @@ 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">
<motion.div <Reveal direction="right">
initial={{ opacity: 0, x: -20 }} <div className="space-y-6 text-lg text-slate-600 leading-relaxed">
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>
</motion.div> </div>
<motion.div </Reveal>
variants={stagger} <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
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) => (
<motion.div key={i} variants={fadeInUp} className="card-modern !p-6"> <Reveal key={i} delay={i * 0.1}>
<div className="card-modern !p-6 hover:-translate-y-1 transition-[box-shadow,transform] duration-300">
<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">
@@ -98,9 +67,10 @@ 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>
</motion.div> </div>
</Reveal>
))} ))}
</motion.div> </div>
</div> </div>
</div> </div>
</section> </section>
@@ -108,25 +78,13 @@ 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">
<motion.div <Reveal className="mb-20">
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> <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>
</motion.div> </Reveal>
<motion.div <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
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.' },
@@ -135,33 +93,26 @@ export default function About() {
{ 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 <Reveal key={i} delay={i * 0.1}>
key={i} <div className="bg-white p-10 rounded-3xl border border-slate-100 shadow-sm hover:shadow-md hover:-translate-y-1 transition-[box-shadow,transform] duration-300 h-full motion-fix">
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"> <div className="text-accent mb-6">
<item.icon 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> </div>
</Reveal>
))} ))}
</motion.div> </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">
<motion.div <Reveal>
initial={{ opacity: 0, scale: 0.95 }} <div className="relative rounded-[2.5rem] bg-slate-900 p-12 md:p-24 overflow-hidden">
whileInView={{ opacity: 1, scale: 1 }} <div className="relative z-10 max-w-2xl">
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"> <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?
</h2> </h2>
@@ -173,7 +124,8 @@ 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>
</motion.div> </div>
</Reveal>
</div> </div>
</section> </section>
</div> </div>

97
components/ContactContent.tsx
View File

@@ -3,21 +3,7 @@
import { CheckCircle, Mail, MapPin, Send, ArrowRight } from 'lucide-react'; import { CheckCircle, Mail, MapPin, Send, ArrowRight } from 'lucide-react';
import React, { useState } from 'react'; import React, { useState } from 'react';
import Link from 'next/link'; import Link from 'next/link';
import { motion } from 'framer-motion'; import { Reveal } from './Reveal';
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() { export default function Contact() {
const [submitted, setSubmitted] = useState(false); const [submitted, setSubmitted] = useState(false);
@@ -61,44 +47,30 @@ export default function Contact() {
</div> </div>
<div className="container-custom relative z-10"> <div className="container-custom relative z-10">
<motion.div <div className="text-left">
initial="initial" <Reveal delay={0.1}>
animate="animate" <span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Kontakt</span>
variants={stagger} </Reveal>
className="max-w-3xl" <Reveal delay={0.2}>
> <h1 className="text-5xl md:text-6xl font-extrabold text-primary mb-8 leading-tight">
<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> Lassen Sie uns <span className="text-accent">sprechen</span>
</motion.h1> </h1>
<motion.p </Reveal>
variants={fadeInUp} <Reveal delay={0.3}>
className="text-slate-600 text-xl md:text-2xl leading-relaxed" <p 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.
</motion.p> </p>
</motion.div> </Reveal>
</div>
</div> </div>
</section> </section>
<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">
<motion.div <div className="space-y-8">
variants={stagger} <Reveal delay={0.1}>
initial="initial" <div className="card-modern !p-8 flex gap-6 items-start hover:translate-x-1 transition-transform duration-300">
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"> <div className="w-14 h-14 rounded-2xl bg-accent/10 text-accent flex items-center justify-center shrink-0">
<Mail size={24} /> <Mail size={24} />
</div> </div>
@@ -108,13 +80,11 @@ export default function Contact() {
info@mb-grid-solutions.com info@mb-grid-solutions.com
</a> </a>
</div> </div>
</motion.div> </div>
</Reveal>
<motion.div <Reveal delay={0.2}>
variants={fadeInUp} <div className="card-modern !p-8 flex gap-6 items-start hover:translate-x-1 transition-transform duration-300">
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"> <div className="w-14 h-14 rounded-2xl bg-accent/10 text-accent flex items-center justify-center shrink-0">
<MapPin size={24} /> <MapPin size={24} />
</div> </div>
@@ -126,22 +96,14 @@ export default function Contact() {
73630 Remshalden 73630 Remshalden
</p> </p>
</div> </div>
</motion.div> </div>
</motion.div> </Reveal>
</div>
<motion.div <Reveal delay={0.3}>
initial={{ opacity: 0, y: 20 }} <div className="bg-white p-8 md:p-12 rounded-[2.5rem] border border-slate-100 shadow-xl">
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 <div className="text-center py-12">
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"> <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} /> <CheckCircle size={40} />
</div> </div>
@@ -155,7 +117,7 @@ export default function Contact() {
> >
Weitere Nachricht Weitere Nachricht
</button> </button>
</motion.div> </div>
) : ( ) : (
<form onSubmit={handleSubmit} className="space-y-6"> <form onSubmit={handleSubmit} className="space-y-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -224,7 +186,8 @@ export default function Contact() {
</p> </p>
</form> </form>
)} )}
</motion.div> </div>
</Reveal>
</div> </div>
</div> </div>
</section> </section>

181
components/HomeContent.tsx
View File

@@ -2,21 +2,7 @@
import Link from 'next/link'; import Link from 'next/link';
import { ArrowRight, Shield, Zap, BarChart3, CheckCircle2, ChevronRight } from 'lucide-react'; import { ArrowRight, Shield, Zap, BarChart3, CheckCircle2, ChevronRight } from 'lucide-react';
import { motion } from 'framer-motion'; import { Reveal, Stagger } from './Reveal';
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() { export default function Home() {
const serviceJsonLd = { const serviceJsonLd = {
@@ -75,41 +61,31 @@ export default function Home() {
</div> </div>
<div className="container-custom relative z-10"> <div className="container-custom relative z-10">
<motion.div <div className="text-left">
initial="initial" <Reveal delay={0.1}>
animate="animate" <span 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">
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="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="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 className="relative inline-flex rounded-full h-2 w-2 bg-accent"></span>
</span> </span>
Engineering Excellence Engineering Excellence
</motion.span> </span>
</Reveal>
<motion.h1 <Reveal delay={0.2}>
variants={fadeInUp} <h1 className="text-5xl md:text-7xl font-extrabold text-primary mb-8 leading-[1.1]">
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> Spezialisierter Partner für <span className="text-accent">Energiekabelprojekte</span>
</motion.h1> </h1>
</Reveal>
<motion.p <Reveal delay={0.3}>
variants={fadeInUp} <p className="text-slate-600 text-xl md:text-2xl leading-relaxed mb-12 max-w-2xl">
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. Herstellerneutrale technische Beratung für Ihre Projekte in Mittel- und Hochspannungsnetzen bis zu 110 kV.
</motion.p> </p>
</Reveal>
<motion.div <Reveal delay={0.4}>
variants={fadeInUp} <div className="flex flex-wrap gap-4">
className="flex flex-wrap gap-4"
>
<Link href="/kontakt" className="btn-accent group"> <Link href="/kontakt" className="btn-accent group">
Projekt anfragen Projekt anfragen
<ArrowRight className="ml-2 transition-transform group-hover:translate-x-1" size={20} /> <ArrowRight className="ml-2 transition-transform group-hover:translate-x-1" size={20} />
@@ -117,21 +93,16 @@ export default function Home() {
<Link href="/ueber-uns" className="btn-primary bg-slate-100 !text-primary hover:bg-slate-200"> <Link href="/ueber-uns" className="btn-primary bg-slate-100 !text-primary hover:bg-slate-200">
Mehr erfahren Mehr erfahren
</Link> </Link>
</motion.div> </div>
</motion.div> </Reveal>
</div>
</div> </div>
</section> </section>
{/* Portfolio Section */} {/* Portfolio Section */}
<section className="bg-slate-50"> <section className="bg-slate-50">
<div className="container-custom"> <div className="container-custom">
<motion.div <Reveal className="flex flex-col md:flex-row md:items-end justify-between gap-8 mb-16">
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> <div>
<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>
@@ -142,15 +113,9 @@ 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>
</motion.div> </Reveal>
<motion.div <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
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} />,
@@ -168,11 +133,8 @@ export default function Home() {
desc: 'Herstellerneutrale Marktanalyse und Unterstützung bei der Komponentenwahl hinsichtlich Qualität und Preis.' desc: 'Herstellerneutrale Marktanalyse und Unterstützung bei der Komponentenwahl hinsichtlich Qualität und Preis.'
} }
].map((item, i) => ( ].map((item, i) => (
<motion.div <Reveal key={i} delay={i * 0.1}>
key={i} <div className="card-modern group hover:-translate-y-2 transition-[box-shadow,transform] duration-300 h-full">
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"> <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}
</div> </div>
@@ -180,9 +142,10 @@ export default function Home() {
<p className="text-slate-600 leading-relaxed"> <p className="text-slate-600 leading-relaxed">
{item.desc} {item.desc}
</p> </p>
</motion.div> </div>
</Reveal>
))} ))}
</motion.div> </div>
</div> </div>
</section> </section>
@@ -190,35 +153,25 @@ 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">
<motion.div <Reveal direction="right">
initial={{ opacity: 0, x: -20 }} <div className="relative">
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"
/> />
</motion.div> </div>
<motion.div </Reveal>
initial="initial" <div>
whileInView="animate" <Reveal>
viewport={{ once: true }} <span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Expertise</span>
variants={stagger} <h2 className="text-4xl md:text-5xl font-bold text-primary mb-8">Anwendungen & Zielgruppen</h2>
> <p className="text-slate-600 text-lg md:text-xl mb-12">
<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.
</motion.p> </p>
<motion.div </Reveal>
variants={stagger} <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
className="grid grid-cols-1 sm:grid-cols-2 gap-4"
>
{[ {[
'Energieversorger', 'Energieversorger',
'Ingenieurbüros', 'Ingenieurbüros',
@@ -227,19 +180,17 @@ export default function Home() {
'Projektierer EE', 'Projektierer EE',
'Planungsbüros' 'Planungsbüros'
].map((item, i) => ( ].map((item, i) => (
<motion.div <Reveal key={i} delay={i * 0.05}>
key={i} <div className="flex items-center gap-4 p-4 bg-slate-50 rounded-xl border border-slate-100 hover:border-accent/30 transition-colors group">
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"> <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>
</motion.div> </div>
</Reveal>
))} ))}
</motion.div> </div>
</motion.div> </div>
</div> </div>
</div> </div>
</section> </section>
@@ -256,34 +207,19 @@ export default function Home() {
</div> </div>
<div className="container-custom relative z-10"> <div className="container-custom relative z-10">
<motion.div <Reveal className="mb-20">
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> <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>
</motion.div> </Reveal>
<motion.div <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
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) => (
<motion.div <Reveal key={i} delay={i * 0.1}>
key={i} <div className="p-10 rounded-3xl bg-white/5 border border-white/10 backdrop-blur-sm hover:bg-white/10 transition-colors h-full">
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"> <h4 className="text-accent font-bold text-xs uppercase tracking-widest mb-6">
{item.label} {item.label}
</h4> </h4>
@@ -293,22 +229,18 @@ export default function Home() {
<p className="text-slate-400 leading-relaxed"> <p className="text-slate-400 leading-relaxed">
{item.desc} {item.desc}
</p> </p>
</motion.div> </div>
</Reveal>
))} ))}
</motion.div> </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">
<motion.div <Reveal>
initial={{ opacity: 0, scale: 0.95 }} <div className="relative rounded-[2.5rem] bg-primary p-12 md:p-24 overflow-hidden">
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" />
@@ -329,7 +261,8 @@ 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>
</motion.div> </div>
</Reveal>
</div> </div>
</section> </section>
</div> </div>

24
components/Layout.tsx
View File

@@ -5,6 +5,7 @@ import React, { useEffect, useState } from 'react';
import Link from 'next/link'; import Link from 'next/link';
import { usePathname } from 'next/navigation'; import { usePathname } from 'next/navigation';
import { motion, AnimatePresence } from 'framer-motion'; import { motion, AnimatePresence } from 'framer-motion';
import { Reveal } from './Reveal';
const Layout = ({ children }: { children: React.ReactNode }) => { const Layout = ({ children }: { children: React.ReactNode }) => {
const pathname = usePathname(); const pathname = usePathname();
@@ -39,11 +40,9 @@ 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">
<motion.header <Reveal direction="down" fullWidth className="fixed top-0 left-0 right-0 z-[100]">
initial={{ opacity: 0 }} <header
animate={{ opacity: 1 }} className={`transition-all duration-300 flex items-center py-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 ${
isScrolled isScrolled
? 'bg-white/90 backdrop-blur-lg border-b border-slate-200 shadow-sm' ? 'bg-white/90 backdrop-blur-lg border-b border-slate-200 shadow-sm'
: 'bg-gradient-to-b from-white/80 via-white/40 to-transparent' : 'bg-gradient-to-b from-white/80 via-white/40 to-transparent'
@@ -96,7 +95,8 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
{isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />} {isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
</button> </button>
</div> </div>
</motion.header> </header>
</Reveal>
{/* Mobile Menu Overlay */} {/* Mobile Menu Overlay */}
<AnimatePresence> <AnimatePresence>
@@ -147,13 +147,8 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
<ArrowUp size={20} strokeWidth={2.5} /> <ArrowUp size={20} strokeWidth={2.5} />
</button> </button>
<motion.footer <Reveal fullWidth>
initial={{ opacity: 0 }} <footer className="bg-slate-900 text-slate-300 py-16 md:py-24">
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">
@@ -200,7 +195,8 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
</p> </p>
</div> </div>
</div> </div>
</motion.footer> </footer>
</Reveal>
</div> </div>
); );
}; };

82
components/Reveal.tsx Normal file
View File

@@ -0,0 +1,82 @@
'use client';
import React from 'react';
import { motion } from 'framer-motion';
interface RevealProps {
children: React.ReactNode;
className?: string;
delay?: number;
direction?: 'up' | 'down' | 'left' | 'right';
fullWidth?: boolean;
}
export const Reveal = ({
children,
className = '',
delay = 0,
direction = 'up',
fullWidth = false
}: RevealProps) => {
const directions = {
up: { y: 30 },
down: { y: -30 },
left: { x: 30 },
right: { x: -30 },
};
return (
<motion.div
initial={{
opacity: 0,
...directions[direction]
}}
whileInView={{
opacity: 1,
x: 0,
y: 0
}}
viewport={{ once: true, margin: "-50px" }}
transition={{
type: "spring",
stiffness: 50,
damping: 20,
mass: 1,
delay: delay
}}
className={`${fullWidth ? 'w-full' : ''} ${className} motion-fix`}
>
{children}
</motion.div>
);
};
interface StaggerProps {
children: React.ReactNode;
className?: string;
staggerDelay?: number;
}
export const Stagger = ({
children,
className = '',
staggerDelay = 0.1
}: StaggerProps) => {
return (
<motion.div
initial="initial"
whileInView="animate"
viewport={{ once: true, margin: "-50px" }}
variants={{
animate: {
transition: {
staggerChildren: staggerDelay,
},
},
}}
className={className}
>
{children}
</motion.div>
);
};