diff --git a/app/globals.css b/app/globals.css index 93def65..c3de8bb 100644 --- a/app/globals.css +++ b/app/globals.css @@ -42,6 +42,41 @@ perspective: 1000px; } + .grid-pattern { + background-image: radial-gradient(circle, var(--color-border) 1px, transparent 1px); + background-size: 40px 40px; + } + + .tech-line { + @apply absolute h-px bg-accent/20; + } + + .tech-dot { + @apply absolute w-1 h-1 bg-accent/30 rounded-full; + } + + .tech-corner { + @apply absolute w-4 h-4 border-accent/30; + } + + .section-number { + @apply absolute -left-12 top-0 text-6xl font-black text-slate-100 select-none pointer-events-none hidden lg:block; + font-family: monospace; + } + + .tech-card-border { + @apply relative; + } + + .tech-card-border::before { + content: ''; + @apply absolute -inset-px bg-gradient-to-br from-accent/20 via-transparent to-accent/20 rounded-[inherit] opacity-0 transition-opacity duration-500; + } + + .tech-card-border:hover::before { + @apply opacity-100; + } + h1, h2, h3, h4, h5, h6 { @apply font-bold tracking-tight text-primary; text-wrap: balance; diff --git a/app/impressum/page.tsx b/app/impressum/page.tsx index 4b0223c..620ddfa 100644 --- a/app/impressum/page.tsx +++ b/app/impressum/page.tsx @@ -1,20 +1,25 @@ 'use client'; import { motion } from 'framer-motion'; +import { TechBackground } from '@/components/TechBackground'; export default function Legal() { return ( -
-
+
+ +
-

Impressum

+
+
-
+

Impressum

+ +

Angaben gemäß § 5 TMG

diff --git a/components/AboutContent.tsx b/components/AboutContent.tsx index bbb4e11..a7ba833 100644 --- a/components/AboutContent.tsx +++ b/components/AboutContent.tsx @@ -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 ( -

+
{/* Hero Section */} -
+
+
-
+
+ Über uns @@ -40,11 +44,14 @@ export default function About() {
{/* Content Section */} -
-
+
+ +
+
-
+
+

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.

@@ -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) => ( -
-
+
+

{person.name}

-

{person.role}

+

{person.role}

))} @@ -76,8 +83,10 @@ export default function About() {
{/* Manifest Section */} -
-
+
+ +
+ Werte

Unser Manifest

@@ -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) => ( -
+
+
@@ -108,10 +118,14 @@ export default function About() {
{/* CTA Section */} -
-
+
+ +
+ -
+
+
+

Bereit für Ihr nächstes Projekt? diff --git a/components/ContactContent.tsx b/components/ContactContent.tsx index 9349bd3..be458e7 100644 --- a/components/ContactContent.tsx +++ b/components/ContactContent.tsx @@ -4,6 +4,8 @@ import { CheckCircle, Mail, MapPin, Send, ArrowRight } from 'lucide-react'; import React, { useState } from 'react'; import Link from 'next/link'; import { Reveal } from './Reveal'; +import { TechBackground } from './TechBackground'; +import { Counter } from './Counter'; export default function Contact() { const [submitted, setSubmitted] = useState(false); @@ -35,19 +37,21 @@ export default function Contact() { }; return ( -
+
{/* Hero Section */} -
+
+
-
+
+ Kontakt @@ -65,16 +69,18 @@ export default function Contact() {
-
-
+
+ +
+
-
-
+
+
-
+

E-Mail

info@mb-grid-solutions.com @@ -84,11 +90,11 @@ export default function Contact() { -
-
+
+
-
+

Anschrift

MB Grid Solutions GmbH
@@ -100,14 +106,15 @@ export default function Contact() { -

-
@@ -115,7 +122,10 @@ export default function Contact() {
-
+
+
+
+ {submitted ? (
@@ -133,7 +143,7 @@ export default function Contact() {
) : ( -
+
@@ -195,7 +205,7 @@ export default function Contact() { * Pflichtfelder. Mit dem Absenden erklären Sie sich mit unserer{' '} Datenschutzerklärung - {' '} + {' '} einverstanden.

diff --git a/components/Counter.tsx b/components/Counter.tsx new file mode 100644 index 0000000..67b9ed1 --- /dev/null +++ b/components/Counter.tsx @@ -0,0 +1,36 @@ +'use client'; + +import React, { useEffect, useRef, useState } from 'react'; +import { useInView, animate } from 'framer-motion'; + +interface CounterProps { + value: number; + className?: string; +} + +export const Counter = ({ value, className = '' }: CounterProps) => { + const ref = useRef(null); + const isInView = useInView(ref, { once: true, margin: "-50px" }); + const [displayValue, setDisplayValue] = useState(0); + + useEffect(() => { + if (isInView) { + const controls = animate(0, value, { + type: "spring", + stiffness: 50, + damping: 20, + mass: 1, + onUpdate: (latest) => { + setDisplayValue(Math.round(latest)); + } + }); + return () => controls.stop(); + } + }, [isInView, value]); + + return ( + + {displayValue < 10 ? `0${displayValue}` : displayValue} + + ); +}; diff --git a/components/HomeContent.tsx b/components/HomeContent.tsx index fb2f7ad..0f59798 100644 --- a/components/HomeContent.tsx +++ b/components/HomeContent.tsx @@ -2,7 +2,10 @@ import Link from 'next/link'; import { ArrowRight, 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'; export default function Home() { const serviceJsonLd = { @@ -45,23 +48,26 @@ export default function Home() { }; return ( -
+