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

99
app/page.tsx
View File

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