design

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" />