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

performance
All checks were successful
Build & Deploy MB Grid Solutions / build-and-deploy (push) Successful in 1m38s
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-01-29 17:08:45 +01:00
parent e033fd6290
commit 25759f3d4a
16 changed files with 95 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
components/HomeContent.tsx
View File

@@ -1,7 +1,8 @@
'use client';
import { motion } from 'framer-motion';
import { m, LazyMotion, domAnimation } from 'framer-motion';
import { BarChart3, CheckCircle2, ChevronRight, Shield, Zap } from 'lucide-react';
import Image from 'next/image';
import Link from 'next/link';
import { Button } from './Button';
import { Counter } from './Counter';
@@ -59,9 +60,13 @@ export default function Home() {
{/* Hero Section */}
<section className="relative min-h-[90vh] 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/business/iStock-1068752548.jpg")' }}
<Image
src="/media/business/hero-bg.jpg"
alt="MB Grid Solutions Hero"
fill
className="object-cover"
priority
quality={90}
/>
<div className="absolute inset-0 bg-gradient-to-r from-slate-100/80 via-white/90 to-white/40 md:to-transparent" />
<TechBackground />
@@ -169,9 +174,11 @@ export default function Home() {
<Reveal direction="right">
<div className="relative overflow-hidden rounded-2xl shadow-lg group">
<div className="absolute inset-0 bg-accent/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-10 pointer-events-none" />
<img
src="/media/cables/HS Kabel.png"
<Image
src="/media/cables/hs-kabel.png"
alt="Technical Engineering"
width={800}
height={600}
className="w-full h-[400px] md:h-[500px] object-cover hover:scale-105 transition-transform duration-700"
/>
<div className="tech-corner top-4 left-4 border-t-2 border-l-2 z-20" />
@@ -214,10 +221,11 @@ export default function Home() {
{/* Technical Specs Section */}
<section className="relative py-24 md:py-32 text-white overflow-hidden bg-slate-900">
<div className="absolute inset-0 opacity-20">
<img
src="/media/drums/iStock-487538226 (1).jpg"
alt="Background"
className="w-full h-full object-cover"
<Image
src="/media/drums/about-hero.jpg"
alt="Background"
fill
className="object-cover"
/>
<div className="absolute inset-0 bg-gradient-to-b from-slate-900 via-slate-900/80 to-slate-900" />
</div>
@@ -277,23 +285,25 @@ export default function Home() {
<div className="tech-corner bottom-8 right-8 border-b-2 border-r-2" />
<div className="absolute top-0 right-0 w-1/2 h-full opacity-10 pointer-events-none">
<LazyMotion features={domAnimation}>
<svg viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
<motion.circle
<m.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"
cx="400" cy="0" r="400" stroke="white" strokeWidth="2"
/>
<motion.circle
<m.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"
cx="400" cy="0" r="300" stroke="white" strokeWidth="2"
/>
<motion.circle
<m.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"
cx="400" cy="0" r="200" stroke="white" strokeWidth="2"
/>
</svg>
</LazyMotion>
</div>
<div className="relative z-10">