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

55
components/HomeContent.tsx
View File

@@ -1,11 +1,13 @@
'use client';
import Link from 'next/link';
import { ArrowRight, Shield, Zap, BarChart3, CheckCircle2, ChevronRight } from 'lucide-react';
import { Shield, Zap, BarChart3, CheckCircle2, ChevronRight } from 'lucide-react';
import { motion } from 'framer-motion';
import { Reveal, Stagger } from './Reveal';
import { TechBackground } from './TechBackground';
import { Counter } from './Counter';
import { Button } from './Button';
import { TileGrid } from './TileGrid';
export default function Home() {
const serviceJsonLd = {
@@ -62,6 +64,7 @@ export default function Home() {
style={{ backgroundImage: 'url("/media/business/iStock-1068752548.jpg")' }}
/>
<div className="absolute inset-0 bg-gradient-to-r from-white via-white/95 to-white/40 md:to-transparent" />
<TileGrid />
<TechBackground />
</div>
@@ -92,13 +95,12 @@ export default function Home() {
<Reveal delay={0.4}>
<div className="flex flex-wrap gap-4">
<Link href="/kontakt" className="btn-accent group">
Projekt anfragen
<ArrowRight className="ml-2 transition-transform group-hover:translate-x-1" size={20} />
</Link>
<Link href="/ueber-uns" className="btn-primary bg-slate-100 !text-primary hover:bg-slate-200">
<Button href="/kontakt" variant="accent" showArrow>
Projekt anfragen
</Button>
<Button href="/ueber-uns" variant="ghost">
Mehr erfahren
</Link>
</Button>
</div>
</Reveal>
</div>
@@ -106,19 +108,19 @@ export default function Home() {
</section>
{/* Portfolio 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={2} className="section-number" />
<Counter value={2} className="section-number !text-white/5" />
<Reveal className="flex flex-col md:flex-row md:items-end justify-between gap-8 mb-16">
<div>
<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>
<p className="text-slate-600 text-lg md:text-xl">
<h2 className="text-4xl md:text-5xl font-bold text-white mb-6">Unsere Leistungen</h2>
<p className="text-slate-400 text-lg md:text-xl">
Beratung durch unabhängige Experten mit jahrzehntelanger Erfahrung aus Engineering, Normengremien, Planung und Produktion.
</p>
</div>
<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-accent font-bold flex items-center gap-2 hover:text-white transition-colors group">
Alle Details ansehen <ChevronRight className="transition-transform group-hover:translate-x-1" size={20} />
</Link>
</Reveal>
@@ -142,13 +144,13 @@ export default function Home() {
}
].map((item, i) => (
<Reveal key={i} delay={i * 0.1}>
<div className="card-modern group hover:-translate-y-2 transition-[box-shadow,transform] duration-300 h-full relative overflow-hidden tech-card-border">
<div className="bg-white/5 p-8 rounded-2xl border border-white/10 group hover:-translate-y-2 transition-[box-shadow,transform] duration-300 h-full relative overflow-hidden">
<div className="absolute top-0 right-0 w-16 h-16 bg-accent/5 -mr-8 -mt-8 rounded-full group-hover:bg-accent/10 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 relative z-10">
{item.icon}
</div>
<h3 className="text-2xl font-bold text-primary mb-4 relative z-10">{item.title}</h3>
<p className="text-slate-600 leading-relaxed relative z-10">
<h3 className="text-2xl font-bold text-white mb-4 relative z-10">{item.title}</h3>
<p className="text-slate-400 leading-relaxed relative z-10">
{item.desc}
</p>
</div>
@@ -276,9 +278,21 @@ export default function Home() {
<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" />
<circle cx="400" cy="0" r="300" stroke="white" strokeWidth="2" />
<circle cx="400" cy="0" r="200" stroke="white" strokeWidth="2" />
<motion.circle
animate={{ r: [400, 410, 400], opacity: [0.1, 0.2, 0.1] }}
transition={{ duration: 5, repeat: Infinity, ease: "easeInOut" }}
cx="400" cy="0" r="400" stroke="white" strokeWidth="2"
/>
<motion.circle
animate={{ r: [300, 310, 300], opacity: [0.1, 0.2, 0.1] }}
transition={{ duration: 4, repeat: Infinity, ease: "easeInOut", delay: 0.5 }}
cx="400" cy="0" r="300" stroke="white" strokeWidth="2"
/>
<motion.circle
animate={{ r: [200, 210, 200], opacity: [0.1, 0.2, 0.1] }}
transition={{ duration: 3, repeat: Infinity, ease: "easeInOut", delay: 1 }}
cx="400" cy="0" r="200" stroke="white" strokeWidth="2"
/>
</svg>
</div>
@@ -289,10 +303,9 @@ export default function Home() {
<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">
<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>