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

design

Browse Source
This commit is contained in:
Marc Mintel
2026-01-29 01:34:31 +01:00
parent 22e49faa16
commit 95833e2865
7 changed files with 219 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
components/AboutContent.tsx
View File

@@ -1,11 +1,11 @@
'use client';
import React from 'react';
import { Award, Clock, Lightbulb, Linkedin, MessageSquare, ShieldCheck, Truck, ArrowRight } from 'lucide-react';
import Link from 'next/link';
import { Award, Clock, Lightbulb, Linkedin, MessageSquare, ShieldCheck, Truck } from 'lucide-react';
import { Reveal } from './Reveal';
import { TechBackground } from './TechBackground';
import { Counter } from './Counter';
import { Button } from './Button';
export default function About() {
return (
@@ -47,7 +47,7 @@ export default function About() {
<section className="bg-white relative overflow-hidden">
<TechBackground />
<div className="container-custom relative z-10">
<Counter value={2} className="section-number" />
<div className="section-number">02</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<Reveal direction="right">
<div className="space-y-6 text-lg text-slate-600 leading-relaxed relative">
@@ -83,14 +83,14 @@ export default function About() {
</section>
{/* Manifest Section */}
<section className="bg-slate-50 relative overflow-hidden">
<section className="bg-slate-950 text-accent relative overflow-hidden">
<TechBackground />
<div className="container-custom relative z-10">
<Counter value={3} className="section-number" />
<Counter value={3} className="section-number !text-white/5" />
<Reveal className="mb-20">
<span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Werte</span>
<h2 className="text-4xl md:text-5xl font-bold text-primary mb-6">Unser Manifest</h2>
<p className="text-slate-600 text-lg">Werte, die unsere tägliche Arbeit leiten und den Erfolg Ihrer Projekte sichern.</p>
<h2 className="text-4xl md:text-5xl font-bold text-white mb-6">Unser Manifest</h2>
<p className="text-slate-400 text-lg">Werte, die unsere tägliche Arbeit leiten und den Erfolg Ihrer Projekte sichern.</p>
</Reveal>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
@@ -103,13 +103,13 @@ export default function About() {
{ icon: ShieldCheck, title: 'Zuverlässigkeit', desc: 'Wir halten, was wir versprechen – ohne Ausnahme. Verbindlichkeit ist unser Fundament.' }
].map((item, i) => (
<Reveal key={i} delay={i * 0.1}>
<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 relative overflow-hidden group">
<div className="bg-white/5 p-10 rounded-3xl border border-white/10 group hover:-translate-y-1 transition-[box-shadow,transform] duration-300 h-full motion-fix relative overflow-hidden">
<div className="absolute top-0 left-0 w-full h-1 bg-accent/0 group-hover:bg-accent/50 transition-all duration-500" />
<div className="text-accent mb-6">
<item.icon size={32} />
</div>
<h4 className="text-xl font-bold text-primary mb-4">{i + 1}. {item.title}</h4>
<p className="text-slate-600 leading-relaxed">{item.desc}</p>
<h4 className="text-xl font-bold text-white mb-4">{i + 1}. {item.title}</h4>
<p className="text-slate-400 leading-relaxed">{item.desc}</p>
</div>
</Reveal>
))}
@@ -121,7 +121,7 @@ export default function About() {
<section className="bg-white relative overflow-hidden">
<TechBackground />
<div className="container-custom relative z-10">
<Counter value={4} className="section-number" />
<div className="section-number">04</div>
<Reveal>
<div className="relative rounded-[2.5rem] bg-slate-900 p-12 md:p-24 overflow-hidden group">
<div className="tech-corner top-8 left-8 border-t-2 border-l-2" />
@@ -133,10 +133,9 @@ export default function About() {
<p className="text-slate-400 text-xl mb-12">
Lassen Sie uns gemeinsam die optimale Lösung für Ihre Energieinfrastruktur finden.
</p>
<Link href="/kontakt" className="btn-accent !px-10 !py-5 text-lg group">
<Button href="/kontakt" variant="accent" showArrow className="!px-10 !py-5 text-lg">
Jetzt Kontakt aufnehmen
<ArrowRight className="ml-3 transition-transform group-hover:translate-x-2" size={24} />
</Link>
</Button>
</div>
</div>
</Reveal>