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:26:21 +01:00
parent 8f97e62016
commit 22e49faa16
7 changed files with 285 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
components/AboutContent.tsx
View File

@@ -4,22 +4,26 @@ import React from 'react';
import { Award, Clock, Lightbulb, Linkedin, MessageSquare, ShieldCheck, Truck, ArrowRight } from 'lucide-react';
import Link from 'next/link';
import { Reveal } from './Reveal';
import { TechBackground } from './TechBackground';
import { Counter } from './Counter';
export default function About() {
return (
<div className="overflow-hidden">
<div className="overflow-hidden relative">
{/* Hero Section */}
<section className="relative min-h-[60vh] flex items-center pt-32 pb-20">
<section className="relative min-h-[60vh] flex items-center pt-32 pb-20 overflow-hidden">
<div className="absolute inset-0 z-0">
<div
className="absolute inset-0 bg-cover bg-center"
style={{ backgroundImage: 'url("/media/drums/iStock-487538226 (1).jpg")' }}
/>
<div className="absolute inset-0 bg-gradient-to-r from-white via-white/95 to-white/40" />
<TechBackground />
</div>
<div className="container-custom relative z-10">
<div className="text-left">
<div className="text-left relative">
<Counter value={1} className="section-number" />
<Reveal delay={0.1}>
<span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">
Über uns
@@ -40,11 +44,14 @@ export default function About() {
</section>
{/* Content Section */}
<section className="bg-white">
<div className="container-custom">
<section className="bg-white relative overflow-hidden">
<TechBackground />
<div className="container-custom relative z-10">
<Counter value={2} className="section-number" />
<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">
<div className="space-y-6 text-lg text-slate-600 leading-relaxed relative">
<div className="absolute -left-4 top-0 w-1 h-full bg-accent/10" />
<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.
</p>
@@ -59,14 +66,14 @@ export default function About() {
{ name: 'Klaus Mintel', role: 'Geschäftsführung', linkedin: 'https://www.linkedin.com/in/klaus-mintel-b80a8b193/' }
].map((person, i) => (
<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="card-modern !p-6 hover:-translate-y-1 transition-[box-shadow,transform] duration-300 relative overflow-hidden tech-card-border">
<div className="flex justify-between items-start mb-4 relative z-10">
<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">
<Linkedin size={20} />
</a>
</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 relative z-10">{person.role}</p>
</div>
</Reveal>
))}
@@ -76,8 +83,10 @@ export default function About() {
</section>
{/* Manifest Section */}
<section className="bg-slate-50">
<div className="container-custom">
<section className="bg-slate-50 relative overflow-hidden">
<TechBackground />
<div className="container-custom relative z-10">
<Counter value={3} className="section-number" />
<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>
@@ -94,7 +103,8 @@ 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">
<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="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>
@@ -108,10 +118,14 @@ export default function About() {
</section>
{/* CTA Section */}
<section className="bg-white">
<div className="container-custom">
<section className="bg-white relative overflow-hidden">
<TechBackground />
<div className="container-custom relative z-10">
<Counter value={4} className="section-number" />
<Reveal>
<div className="relative rounded-[2.5rem] bg-slate-900 p-12 md:p-24 overflow-hidden">
<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" />
<div className="tech-corner bottom-8 right-8 border-b-2 border-r-2" />
<div className="relative z-10 max-w-2xl">
<h2 className="text-4xl md:text-5xl font-bold text-white mb-8">
Bereit für Ihr nächstes Projekt?