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

182
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} Über uns
className="text-left" </span>
> </Reveal>
<motion.span <Reveal delay={0.2}>
variants={fadeInUp} <h1 className="text-5xl md:text-6xl font-extrabold text-primary mb-8 leading-tight">
className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block" Wir gestalten die <span className="text-accent">Infrastruktur</span> der Zukunft
> </h1>
Über uns </Reveal>
</motion.span> <Reveal delay={0.3}>
<motion.h1 <p className="text-slate-600 text-xl md:text-2xl leading-relaxed mb-8">
variants={fadeInUp} MB Grid Solution steht for technische Exzellenz in der Energiekabeltechnologie. Wir verstehen uns als Ihr technischer Lotse.
className="text-5xl md:text-6xl font-extrabold text-primary mb-8 leading-tight" </p>
> </Reveal>
Wir gestalten die <span className="text-accent">Infrastruktur</span> der Zukunft </div>
</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> </div>
</section> </section>
@@ -65,42 +43,34 @@ 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 }} <p>
viewport={{ once: true }} 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.
transition={{ duration: 0.8 }} </p>
className="space-y-6 text-lg text-slate-600 leading-relaxed" <p>
> Wir verstehen die Herausforderungen der Energiewende und bieten herstellerneutrale Beratung, die auf Fakten, Normen und jahrzehntelanger Erfahrung basiert.
<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. </div>
</p> </Reveal>
<p> <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
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: '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="flex justify-between items-start mb-4"> <div className="card-modern !p-6 hover:-translate-y-1 transition-[box-shadow,transform] duration-300">
<h3 className="text-xl font-bold text-primary">{person.name}</h3> <div className="flex justify-between items-start mb-4">
<a href={person.linkedin} target="_blank" rel="noopener noreferrer" className="text-[#0077b5] hover:scale-110 transition-transform"> <h3 className="text-xl font-bold text-primary">{person.name}</h3>
<Linkedin size={20} /> <a href={person.linkedin} target="_blank" rel="noopener noreferrer" className="text-[#0077b5] hover:scale-110 transition-transform">
</a> <Linkedin size={20} />
</a>
</div>
<p className="text-accent text-sm font-bold uppercase tracking-wider">{person.role}</p>
</div> </div>
<p className="text-accent text-sm font-bold uppercase tracking-wider">{person.role}</p> </Reveal>
</motion.div>
))} ))}
</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,45 +93,39 @@ 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} <div className="text-accent mb-6">
className="bg-white p-10 rounded-3xl border border-slate-100 shadow-sm hover:shadow-md hover:-translate-y-1 transition-all motion-fix" <item.icon size={32} />
> </div>
<div className="text-accent mb-6"> <h4 className="text-xl font-bold text-primary mb-4">{i + 1}. {item.title}</h4>
<item.icon size={32} /> <p className="text-slate-600 leading-relaxed">{item.desc}</p>
</div> </div>
<h4 className="text-xl font-bold text-primary mb-4">{i + 1}. {item.title}</h4> </Reveal>
<p className="text-slate-600 leading-relaxed">{item.desc}</p>
</motion.div>
))} ))}
</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 }} <h2 className="text-4xl md:text-5xl font-bold text-white mb-8">
transition={{ duration: 0.8 }} Bereit für Ihr nächstes Projekt?
className="relative rounded-[2.5rem] bg-slate-900 p-12 md:p-24 overflow-hidden" </h2>
> <p className="text-slate-400 text-xl mb-12">
<div className="relative z-10"> Lassen Sie uns gemeinsam die optimale Lösung für Ihre Energieinfrastruktur finden.
<h2 className="text-4xl md:text-5xl font-bold text-white mb-8"> </p>
Bereit für Ihr nächstes Projekt? <Link href="/kontakt" className="btn-accent !px-10 !py-5 text-lg group">
</h2> Jetzt Kontakt aufnehmen
<p className="text-slate-400 text-xl mb-12"> <ArrowRight className="ml-3 transition-transform group-hover:translate-x-2" size={24} />
Lassen Sie uns gemeinsam die optimale Lösung für Ihre Energieinfrastruktur finden. </Link>
</p> </div>
<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>
</motion.div> </Reveal>
</div> </div>
</section> </section>
</div> </div>

291
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,170 +47,147 @@ 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> Lassen Sie uns <span className="text-accent">sprechen</span>
<motion.h1 </h1>
variants={fadeInUp} </Reveal>
className="text-5xl md:text-6xl font-extrabold text-primary mb-8 leading-tight" <Reveal delay={0.3}>
> <p className="text-slate-600 text-xl md:text-2xl leading-relaxed">
Lassen Sie uns <span className="text-accent">sprechen</span> Haben Sie Fragen zu einem Projekt oder benötigen Sie technische Beratung? Wir freuen uns auf Ihre Nachricht.
</motion.h1> </p>
<motion.p </Reveal>
variants={fadeInUp} </div>
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> </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" <div className="w-14 h-14 rounded-2xl bg-accent/10 text-accent flex items-center justify-center shrink-0">
viewport={{ once: true }} <Mail size={24} />
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> </div>
<h3 className="text-3xl font-bold text-primary mb-4">Nachricht gesendet</h3> <div>
<p className="text-slate-600 text-lg mb-10"> <h4 className="text-slate-500 font-bold text-xs uppercase tracking-widest mb-2">E-Mail</h4>
Vielen Dank für Ihre Anfrage. Wir werden uns in Kürze bei Ihnen melden. <a href="mailto:info@mb-grid-solutions.com" className="text-primary text-xl font-bold hover:text-accent transition-colors">
</p> info@mb-grid-solutions.com
<button </a>
onClick={() => setSubmitted(false)} </div>
className="btn-primary" </div>
> </Reveal>
Weitere Nachricht
</button> <Reveal delay={0.2}>
</motion.div> <div className="card-modern !p-8 flex gap-6 items-start hover:translate-x-1 transition-transform duration-300">
) : ( <div className="w-14 h-14 rounded-2xl bg-accent/10 text-accent flex items-center justify-center shrink-0">
<form onSubmit={handleSubmit} className="space-y-6"> <MapPin size={24} />
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> </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>
</div>
</Reveal>
</div>
<Reveal delay={0.3}>
<div className="bg-white p-8 md:p-12 rounded-[2.5rem] border border-slate-100 shadow-xl">
{submitted ? (
<div 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>
</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"> <div className="space-y-2">
<label htmlFor="name" className="text-sm font-bold text-slate-700 ml-1">Name *</label> <label htmlFor="email" className="text-sm font-bold text-slate-700 ml-1">E-Mail *</label>
<input <input
type="text" type="email"
id="name" id="email"
name="name" name="email"
required required
placeholder="Ihr Name" 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" 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"> <div className="space-y-2">
<label htmlFor="company" className="text-sm font-bold text-slate-700 ml-1">Firma</label> <label htmlFor="message" className="text-sm font-bold text-slate-700 ml-1">Nachricht *</label>
<input <textarea
type="text" id="message"
id="company" name="message"
name="company" required
placeholder="Ihr Unternehmen" rows={5}
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" 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> </div>
</div>
<button
<div className="space-y-2"> type="submit"
<label htmlFor="email" className="text-sm font-bold text-slate-700 ml-1">E-Mail *</label> disabled={loading}
<input className="btn-accent w-full py-5 text-lg group"
type="email" >
id="email" {loading ? 'Wird gesendet...' : 'Nachricht senden'}
name="email" <Send className="ml-3 transition-transform group-hover:translate-x-1 group-hover:-translate-y-1" size={20} />
required </button>
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" <p className="text-xs text-slate-400 text-center">
/> * Pflichtfelder. Mit dem Absenden erklären Sie sich mit unserer{' '}
</div> <Link href="/datenschutz" className="text-accent hover:underline font-semibold">
Datenschutzerklärung
<div className="space-y-2"> </Link>{' '}
<label htmlFor="message" className="text-sm font-bold text-slate-700 ml-1">Nachricht *</label> einverstanden.
<textarea </p>
id="message" </form>
name="message" )}
required </div>
rows={5} </Reveal>
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>
</div> </div>
</section> </section>

295
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,63 +61,48 @@ 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} <span className="relative flex h-2 w-2">
className="text-left" <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>
<motion.span </span>
variants={fadeInUp} Engineering Excellence
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> </span>
Engineering Excellence </Reveal>
</motion.span>
<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>
> </h1>
Spezialisierter Partner für <span className="text-accent">Energiekabelprojekte</span> </Reveal>
</motion.h1>
<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.
> </p>
Herstellerneutrale technische Beratung für Ihre Projekte in Mittel- und Hochspannungsnetzen bis zu 110 kV. </Reveal>
</motion.p>
<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">
> Projekt anfragen
<Link href="/kontakt" className="btn-accent group"> <ArrowRight className="ml-2 transition-transform group-hover:translate-x-1" size={20} />
Projekt anfragen </Link>
<ArrowRight className="ml-2 transition-transform group-hover:translate-x-1" size={20} /> <Link href="/ueber-uns" className="btn-primary bg-slate-100 !text-primary hover:bg-slate-200">
</Link> Mehr erfahren
<Link href="/ueber-uns" className="btn-primary bg-slate-100 !text-primary hover:bg-slate-200"> </Link>
Mehr erfahren </div>
</Link> </Reveal>
</motion.div> </div>
</motion.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,21 +133,19 @@ 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} <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">
className="card-modern group motion-fix hover:-translate-y-2 transition-transform duration-300" {item.icon}
> </div>
<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"> <h3 className="text-2xl font-bold text-primary mb-4">{item.title}</h3>
{item.icon} <p className="text-slate-600 leading-relaxed">
{item.desc}
</p>
</div> </div>
<h3 className="text-2xl font-bold text-primary mb-4">{item.title}</h3> </Reveal>
<p className="text-slate-600 leading-relaxed">
{item.desc}
</p>
</motion.div>
))} ))}
</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 }} <div className="absolute -inset-4 bg-accent/10 rounded-3xl -rotate-2 z-0" />
viewport={{ once: true }} <img
transition={{ duration: 0.8 }} src="/media/cables/HS Kabel.png"
className="relative" alt="Technical Engineering"
> className="relative z-10 w-full h-[400px] md:h-[500px] object-cover rounded-2xl shadow-2xl"
<div className="absolute -inset-4 bg-accent/10 rounded-3xl -rotate-2 z-0" /> />
<img </div>
src="/media/cables/HS Kabel.png" </Reveal>
alt="Technical Engineering" <div>
className="relative z-10 w-full h-[400px] md:h-[500px] object-cover rounded-2xl shadow-2xl" <Reveal>
/> <span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Expertise</span>
</motion.div> <h2 className="text-4xl md:text-5xl font-bold text-primary mb-8">Anwendungen & Zielgruppen</h2>
<motion.div <p className="text-slate-600 text-lg md:text-xl mb-12">
initial="initial" Wir unterstützen Akteure der Energiewende bei der Realisierung komplexer Kabelprojekte mit höchster Präzision.
whileInView="animate" </p>
viewport={{ once: true }} </Reveal>
variants={stagger} <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
>
<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', '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} <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">
className="flex items-center gap-4 p-4 bg-slate-50 rounded-xl border border-slate-100 hover:border-accent/30 transition-colors group" <CheckCircle2 size={16} />
> </div>
<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"> <span className="text-primary font-semibold">{item}</span>
<CheckCircle2 size={16} />
</div> </div>
<span className="text-primary font-semibold">{item}</span> </Reveal>
</motion.div>
))} ))}
</motion.div> </div>
</motion.div> </div>
</div> </div>
</div> </div>
</section> </section>
@@ -256,80 +207,62 @@ 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} <h4 className="text-accent font-bold text-xs uppercase tracking-widest mb-6">
className="p-10 rounded-3xl bg-white/5 border border-white/10 backdrop-blur-sm hover:bg-white/10 transition-colors" {item.label}
> </h4>
<h4 className="text-accent font-bold text-xs uppercase tracking-widest mb-6"> <p className="text-2xl font-bold text-white mb-4 leading-tight">
{item.label} {item.value}
</h4> </p>
<p className="text-2xl font-bold text-white mb-4 leading-tight"> <p className="text-slate-400 leading-relaxed">
{item.value} {item.desc}
</p> </p>
<p className="text-slate-400 leading-relaxed"> </div>
{item.desc} </Reveal>
</p>
</motion.div>
))} ))}
</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 }} <div className="absolute top-0 right-0 w-1/2 h-full opacity-10 pointer-events-none">
viewport={{ once: true }} <svg viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
transition={{ duration: 0.8 }} <circle cx="400" cy="0" r="400" stroke="white" strokeWidth="2" />
className="relative rounded-[2.5rem] bg-primary p-12 md:p-24 overflow-hidden" <circle cx="400" cy="0" r="300" stroke="white" strokeWidth="2" />
> <circle cx="400" cy="0" r="200" stroke="white" strokeWidth="2" />
<div className="absolute top-0 right-0 w-1/2 h-full opacity-10 pointer-events-none"> </svg>
<svg viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg"> </div>
<circle cx="400" cy="0" r="400" stroke="white" strokeWidth="2" />
<circle cx="400" cy="0" r="300" stroke="white" strokeWidth="2" /> <div className="relative z-10">
<circle cx="400" cy="0" r="200" stroke="white" strokeWidth="2" /> <h2 className="text-4xl md:text-6xl font-bold text-white mb-8 leading-tight">
</svg> 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>
</div> </div>
</Reveal>
<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> </div>
</section> </section>
</div> </div>

34
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,16 +40,14 @@ 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] }} isScrolled
className={`fixed top-0 left-0 right-0 z-[100] transition-all duration-300 flex items-center py-1 ${ ? 'bg-white/90 backdrop-blur-lg border-b border-slate-200 shadow-sm'
isScrolled : 'bg-gradient-to-b from-white/80 via-white/40 to-transparent'
? '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' >
}`}
>
<div className="container-custom flex justify-between items-center w-full relative z-10"> <div className="container-custom flex justify-between items-center w-full relative z-10">
<Link <Link
href="/" href="/"
@@ -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>
);
};