design

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;

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 (
-    <div className="bg-slate-50 min-h-screen pt-32 pb-20">
-      <div className="container-custom">
+    <div className="bg-slate-50 min-h-screen pt-32 pb-20 relative overflow-hidden">
+      <TechBackground />
+      <div className="container-custom relative z-10">
         <motion.div 
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.6 }}
-          className="max-w-4xl mx-auto bg-white p-8 md:p-16 rounded-[2.5rem] shadow-sm border border-slate-100"
+          transition={{ type: "spring", stiffness: 50, damping: 20 }}
+          className="max-w-4xl mx-auto bg-white p-8 md:p-16 rounded-[2.5rem] shadow-sm border border-slate-100 relative overflow-hidden group"
         >
-          <h1 className="text-4xl font-extrabold text-primary mb-12">Impressum</h1>
+          <div className="tech-corner top-8 left-8 border-t-2 border-l-2 opacity-20" />
+          <div className="tech-corner bottom-8 right-8 border-b-2 border-r-2 opacity-20" />
           
-          <div className="space-y-12 text-slate-600 leading-relaxed">
+          <h1 className="text-4xl font-extrabold text-primary mb-12 relative z-10">Impressum</h1>
+          
+          <div className="space-y-12 text-slate-600 leading-relaxed relative z-10">
             <section>
               <h2 className="text-xl font-bold text-primary mb-4">Angaben gemäß § 5 TMG</h2>
               <p>

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 (
-    <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?

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 (
-    <div className="overflow-hidden">
+    <div className="overflow-hidden relative">
       {/* Hero Section */}
-      <section className="relative min-h-[40vh] flex items-center pt-32 pb-20">
+      <section className="relative min-h-[40vh] 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/laying/iStock-1282259999.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">Kontakt</span>
             </Reveal>
@@ -65,16 +69,18 @@ export default function Contact() {
         </div>
       </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={2} className="section-number" />
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 md:gap-24">
             <div className="space-y-8">
               <Reveal delay={0.1}>
-                <div className="card-modern !p-8 flex gap-6 items-start hover:translate-x-1 transition-transform duration-300">
-                  <div className="w-14 h-14 rounded-2xl bg-accent/10 text-accent flex items-center justify-center shrink-0">
+                <div className="card-modern !p-8 flex gap-6 items-start hover:translate-x-1 transition-transform duration-300 relative overflow-hidden tech-card-border">
+                  <div className="w-14 h-14 rounded-2xl bg-accent/10 text-accent flex items-center justify-center shrink-0 relative z-10">
                     <Mail size={24} />
                   </div>
-                  <div>
+                  <div className="relative z-10">
                     <h4 className="text-slate-500 font-bold text-xs uppercase tracking-widest mb-2">E-Mail</h4>
                     <a href="mailto:info@mb-grid-solutions.com" className="text-primary text-xl font-bold hover:text-accent transition-colors">
                       info@mb-grid-solutions.com
@@ -84,11 +90,11 @@ export default function Contact() {
               </Reveal>
 
               <Reveal delay={0.2}>
-                <div className="card-modern !p-8 flex gap-6 items-start hover:translate-x-1 transition-transform duration-300">
-                  <div className="w-14 h-14 rounded-2xl bg-accent/10 text-accent flex items-center justify-center shrink-0">
+                <div className="card-modern !p-8 flex gap-6 items-start hover:translate-x-1 transition-transform duration-300 relative overflow-hidden tech-card-border">
+                  <div className="w-14 h-14 rounded-2xl bg-accent/10 text-accent flex items-center justify-center shrink-0 relative z-10">
                     <MapPin size={24} />
                   </div>
-                  <div>
+                  <div className="relative z-10">
                     <h4 className="text-slate-500 font-bold text-xs uppercase tracking-widest mb-2">Anschrift</h4>
                     <p className="text-primary text-xl font-bold leading-relaxed">
                       MB Grid Solutions GmbH<br />
@@ -100,14 +106,15 @@ export default function Contact() {
               </Reveal>
 
               <Reveal delay={0.3}>
-                <div className="w-full h-[300px] rounded-[2.5rem] overflow-hidden border border-slate-100 shadow-sm grayscale hover:grayscale-0 transition-all duration-700">
-                  <iframe
-                    width="100%"
-                    height="100%"
-                    frameBorder="0"
-                    scrolling="no"
-                    marginHeight={0}
-                    marginWidth={0}
+                <div className="w-full h-[300px] rounded-[2.5rem] overflow-hidden border border-slate-100 shadow-sm grayscale hover:grayscale-0 transition-all duration-700 relative group">
+                  <div className="absolute inset-0 border-2 border-accent/0 group-hover:border-accent/20 transition-all duration-500 z-10 pointer-events-none rounded-[2.5rem]" />
+                  <iframe 
+                    width="100%" 
+                    height="100%" 
+                    frameBorder="0" 
+                    scrolling="no" 
+                    marginHeight={0} 
+                    marginWidth={0} 
                     src="https://www.openstreetmap.org/export/embed.html?bbox=9.445,48.815,9.465,48.825&layer=mapnik&marker=48.8198,9.4552"
                   ></iframe>
                 </div>
@@ -115,7 +122,10 @@ export default function Contact() {
             </div>
 
             <Reveal delay={0.4}>
-              <div className="bg-white p-8 md:p-12 rounded-[2.5rem] border border-slate-100 shadow-xl">
+              <div className="bg-white p-8 md:p-12 rounded-[2.5rem] border border-slate-100 shadow-xl relative overflow-hidden group">
+                <div className="tech-corner top-6 left-6 border-t-2 border-l-2 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+                <div className="tech-corner bottom-6 right-6 border-b-2 border-r-2 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+                
                 {submitted ? (
                   <div className="text-center py-12">
                     <div className="w-20 h-20 rounded-full bg-accent/10 text-accent flex items-center justify-center mx-auto mb-8">
@@ -133,7 +143,7 @@ export default function Contact() {
                     </button>
                   </div>
                 ) : (
-                  <form onSubmit={handleSubmit} className="space-y-6">
+                  <form onSubmit={handleSubmit} className="space-y-6 relative z-10">
                     <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                       <div className="space-y-2">
                         <label htmlFor="name" className="text-sm font-bold text-slate-700 ml-1">Name *</label>
@@ -195,7 +205,7 @@ export default function Contact() {
                       * Pflichtfelder. Mit dem Absenden erklären Sie sich mit unserer{' '}
                       <Link href="/datenschutz" className="text-accent hover:underline font-semibold">
                         Datenschutzerklärung
-                      </Link>{' '}
+                    </Link>{' '}
                       einverstanden.
                     </p>
                   </form>

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 (
+    <span ref={ref} className={className}>
+      {displayValue < 10 ? `0${displayValue}` : displayValue}
+    </span>
+  );
+};

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 (
-    <div className="overflow-hidden">
+    <div className="overflow-hidden relative">
       <script
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(serviceJsonLd) }}
       />
+      
       {/* Hero Section */}
-      <section className="relative min-h-[90vh] flex items-center pt-32 pb-20">
+      <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")' }}
           />
           <div className="absolute inset-0 bg-gradient-to-r from-white via-white/95 to-white/40 md:to-transparent" />
+          <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="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-accent/10 text-accent text-xs font-bold uppercase tracking-wider mb-6">
                 <span className="relative flex h-2 w-2">
@@ -100,8 +106,10 @@ export default function Home() {
       </section>
 
       {/* Portfolio 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={2} className="section-number" />
           <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>
@@ -134,12 +142,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">
-                  <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">
+                <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="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">{item.title}</h3>
-                  <p className="text-slate-600 leading-relaxed">
+                  <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">
                     {item.desc}
                   </p>
                 </div>
@@ -150,16 +159,21 @@ export default function Home() {
       </section>
 
       {/* Expertise 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={3} className="section-number" />
           <div className="grid grid-cols-1 lg:grid-cols-2 items-center gap-16 md:gap-24">
             <Reveal direction="right">
-              <div className="relative overflow-hidden rounded-2xl shadow-lg">
+              <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"
                   alt="Technical Engineering"
                   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" />
+                <div className="tech-corner bottom-4 right-4 border-b-2 border-r-2 z-20" />
               </div>
             </Reveal>
             <div>
@@ -180,7 +194,8 @@ export default function Home() {
                   'Planungsbüros'
                 ].map((item, i) => (
                   <Reveal key={i} delay={i * 0.05}>
-                    <div className="flex items-center gap-4 p-4 bg-slate-50 rounded-xl border border-slate-100 hover:border-accent/30 transition-colors group">
+                    <div className="flex items-center gap-4 p-4 bg-slate-50 rounded-xl border border-slate-100 hover:border-accent/30 transition-colors group relative overflow-hidden">
+                      <div className="absolute top-0 left-0 w-1 h-full bg-accent/0 group-hover:bg-accent/100 transition-all duration-300" />
                       <div className="w-8 h-8 rounded-full bg-white flex items-center justify-center shadow-sm group-hover:bg-accent group-hover:text-white transition-colors">
                         <CheckCircle2 size={16} />
                       </div>
@@ -204,8 +219,14 @@ export default function Home() {
           />
           <div className="absolute inset-0 bg-gradient-to-b from-slate-900 via-slate-900/80 to-slate-900" />
         </div>
+        <TechBackground />
         
         <div className="container-custom relative z-10">
+          <Counter value={4} className="section-number !text-white/5" />
+          {/* Data Stream Effect */}
+          <div className="absolute -top-10 right-0 w-px h-64 bg-gradient-to-b from-transparent via-accent/50 to-transparent animate-pulse" />
+          <div className="absolute -bottom-10 left-10 w-px h-64 bg-gradient-to-b from-transparent via-accent/30 to-transparent animate-pulse delay-700" />
+
           <Reveal className="mb-20">
             <span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Spezifikationen</span>
             <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">Technische Expertise</h2>
@@ -218,7 +239,8 @@ export default function Home() {
               { label: 'Leitertechnologie', value: 'Massiv-, Mehrdraht- & Milliken', desc: 'Optimierung des Leiterdesigns hinsichtlich Stromtragfähigkeit.' }
             ].map((item, i) => (
               <Reveal key={i} delay={i * 0.1}>
-                <div className="p-10 rounded-3xl bg-white/5 border border-white/10 backdrop-blur-sm hover:bg-white/10 transition-colors h-full">
+                <div className="p-10 rounded-3xl bg-white/5 border border-white/10 backdrop-blur-sm hover:bg-white/10 transition-colors h-full relative group 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" />
                   <h4 className="text-accent font-bold text-xs uppercase tracking-widest mb-6">
                     {item.label}
                   </h4>
@@ -236,10 +258,22 @@ export default function Home() {
       </section>
 
       {/* CTA Section */}
-      <section className="bg-white">
-        <div className="container-custom">
+      <section className="bg-white relative overflow-hidden">
+        <TechBackground />
+        {/* Decorative Background Elements */}
+        <div className="absolute top-0 left-0 w-64 h-64 bg-accent/5 rounded-full blur-3xl -translate-x-1/2 -translate-y-1/2" />
+        <div className="absolute bottom-0 right-0 w-96 h-96 bg-primary/5 rounded-full blur-3xl translate-x-1/2 translate-y-1/2" />
+
+        <div className="container-custom relative z-10">
+          <Counter value={5} className="section-number" />
           <Reveal>
-            <div className="relative rounded-[2.5rem] bg-primary p-12 md:p-24 overflow-hidden">
+            <div className="relative rounded-[2.5rem] bg-primary p-12 md:p-24 overflow-hidden group">
+              {/* Corner Accents */}
+              <div className="tech-corner top-8 left-8 border-t-2 border-l-2" />
+              <div className="tech-corner top-8 right-8 border-t-2 border-r-2" />
+              <div className="tech-corner bottom-8 left-8 border-b-2 border-l-2" />
+              <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">
                 <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" />

components/TechBackground.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+
+export const TechBackground = () => {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return (
+      <div className="absolute inset-0 pointer-events-none overflow-hidden z-0">
+        <div className="absolute inset-0 grid-pattern opacity-[0.15]" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="absolute inset-0 pointer-events-none overflow-hidden z-0">
+      <div className="absolute inset-0 grid-pattern opacity-[0.15]" />
+      
+      {/* Animated Tech Lines */}
+      {[...Array(5)].map((_, i) => (
+        <motion.div
+          key={`line-${i}`}
+          initial={{ x: '-100%', opacity: 0 }}
+          animate={{ x: '100%', opacity: [0, 0.4, 0] }}
+          transition={{ 
+            duration: 8 + i * 2, 
+            repeat: Infinity, 
+            ease: "linear",
+            delay: i * 2
+          }}
+          className="absolute h-[2px] bg-gradient-to-r from-transparent via-accent/40 to-transparent w-full"
+          style={{ top: `${20 * (i + 1)}%` }}
+        />
+      ))}
+
+      {/* Floating Tech Squares */}
+      {[...Array(8)].map((_, i) => (
+        <motion.div
+          key={`square-${i}`}
+          initial={{ opacity: 0, scale: 0 }}
+          animate={{ 
+            opacity: [0, 0.2, 0],
+            scale: [0, 1, 0],
+            rotate: [0, 90, 180],
+            x: [0, Math.random() * 200 - 100, 0],
+            y: [0, Math.random() * 200 - 100, 0]
+          }}
+          transition={{ 
+            duration: 8 + Math.random() * 4, 
+            repeat: Infinity, 
+            ease: "easeInOut",
+            delay: i * 2
+          }}
+          className="absolute w-8 h-8 border border-accent/10 rounded-sm"
+          style={{ 
+            left: `${Math.random() * 100}%`, 
+            top: `${Math.random() * 100}%` 
+          }}
+        />
+      ))}
+
+      {/* Pulsing Dots */}
+      {[...Array(15)].map((_, i) => (
+        <motion.div
+          key={`dot-${i}`}
+          animate={{ 
+            opacity: [0.1, 0.4, 0.1],
+            scale: [1, 1.5, 1]
+          }}
+          transition={{ 
+            duration: 3 + Math.random() * 2, 
+            repeat: Infinity, 
+            ease: "easeInOut",
+            delay: i * 0.5
+          }}
+          className="tech-dot"
+          style={{ 
+            left: `${Math.random() * 100}%`, 
+            top: `${Math.random() * 100}%` 
+          }}
+        />
+      ))}
+    </div>
+  );
+};