feat: overhaul competence pages, unify brand colors, and polish site integrity

- Rewrote all 5 competence pages (Kabeltiefbau, Bohrtechnik, Glasfaser, Planung, Vermessung) with factual data from references - Unified brand colors: replaced toxic neon green with brand-aligned teal (#10a379) - Fixed ReferencesSlider injection in dynamic MDX pages - Enhanced Footer with icon parity, improved branding placement, and unified hover effects - Refined Header with 3D micro-animations and improved dropdown visibility - Fixed localized tracking API (rewrites for /stats/api/send) - Resolved ReferenceErrors in InteractiveGermanyMap and Header state management - Cleaned reference titles and truncated metadata in lists
2026-05-15 21:07:25 +02:00
parent 4dcd5f511a
commit 843d61cd5d
47 changed files with 1125 additions and 690 deletions
--- a/components/layout/Footer.tsx
+++ b/components/layout/Footer.tsx
@@ -1,7 +1,7 @@
 import { TransitionLink } from '@/components/ui/TransitionLink';
 import Image from 'next/image';
 import { useLocale } from 'next-intl';
-import { ShieldCheck, Leaf, Lock, Accessibility, Zap } from 'lucide-react';
+import { ShieldCheck, Leaf, Lock, Accessibility, Zap, Mail, Phone } from 'lucide-react';
 import { LanguageSwitcher } from './LanguageSwitcher';

 interface CompanyInfo {
@@ -21,7 +21,7 @@ export function Footer({ companyInfo }: FooterProps) {
    <footer className="bg-[#050B14] text-neutral-light py-10 md:py-16 relative overflow-hidden border-t border-white/5">
      {/* Subtle background tech grid */}
      <div className="absolute inset-0 bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:32px_32px] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_100%)] pointer-events-none" />
-      
+
      {/* Top glowing edge */}
      <div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-primary/40 to-transparent" />
      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-1/3 h-[200px] bg-primary/20 blur-[100px] rounded-full pointer-events-none opacity-50" />
@@ -30,7 +30,7 @@ export function Footer({ companyInfo }: FooterProps) {
        {/* Brand Column Bento */}
        <div className="col-span-1 md:col-span-4 lg:col-span-5 flex flex-col justify-between bg-white/[0.02] border border-white/5 rounded-3xl p-6 md:p-8 lg:p-10 backdrop-blur-md relative group overflow-hidden">
          <div className="absolute inset-0 bg-gradient-to-br from-white/[0.04] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700" />
-          
+
          <div className="space-y-4 md:space-y-6 relative z-10">
            <TransitionLink href={`/${locale}`} className="relative block h-12 md:h-14 w-40 md:w-48 mb-4 md:mb-6 group/logo cursor-pointer">
              <Image
@@ -41,7 +41,7 @@ export function Footer({ companyInfo }: FooterProps) {
              />
            </TransitionLink>
            <p className="text-neutral-400 text-base leading-relaxed max-w-sm">
-              {locale === 'de' 
+              {locale === 'de'
                ? 'Die Experten für Kabeltiefbau, Horizontalspülbohrungen und umfassende Infrastrukturprojekte. Qualität und Zuverlässigkeit aus Guben.'
                : 'Experts in cable construction, horizontal directional drilling, and comprehensive infrastructure projects. Quality and reliability from Guben.'}
            </p>
@@ -58,16 +58,24 @@ export function Footer({ companyInfo }: FooterProps) {
                  <p className="whitespace-pre-line font-medium text-neutral-200">{companyInfo.address}</p>
                </div>
              </div>
-              <div className="grid grid-cols-2 gap-3 md:gap-4">
-                <a href={`mailto:${companyInfo.contactEmail}`} className="flex flex-col gap-2 p-4 rounded-2xl bg-white/[0.03] border border-white/[0.05] hover:bg-white/[0.08] hover:border-primary/30 transition-all group/contact cursor-pointer">
-                  <p className="text-xs text-neutral-400 uppercase tracking-wider font-heading">E-Mail</p>
+              <a href={`mailto:${companyInfo.contactEmail}`} className="flex gap-4 p-4 rounded-2xl bg-white/[0.03] border border-white/[0.05] hover:bg-white/[0.08] hover:border-primary/30 transition-all group/contact cursor-pointer">
+                <div className="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center shrink-0 group-hover/contact:bg-primary/30 transition-colors">
+                  <Mail className="w-5 h-5 text-primary" />
+                </div>
+                <div className="min-w-0">
+                  <p className="text-xs text-neutral-400 uppercase tracking-wider mb-1 font-heading">E-Mail</p>
                  <p className="font-medium text-neutral-200 group-hover/contact:text-primary transition-colors truncate">{companyInfo.contactEmail}</p>
-                </a>
-                <a href={`tel:${companyInfo.contactPhone.replace(/\s+/g, '')}`} className="flex flex-col gap-2 p-4 rounded-2xl bg-white/[0.03] border border-white/[0.05] hover:bg-white/[0.08] hover:border-primary/30 transition-all group/contact cursor-pointer">
-                  <p className="text-xs text-neutral-400 uppercase tracking-wider font-heading">{locale === 'de' ? 'Telefon' : 'Phone'}</p>
+                </div>
+              </a>
+              <a href={`tel:${companyInfo.contactPhone.replace(/\s+/g, '')}`} className="flex gap-4 p-4 rounded-2xl bg-white/[0.03] border border-white/[0.05] hover:bg-white/[0.08] hover:border-primary/30 transition-all group/contact cursor-pointer">
+                <div className="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center shrink-0 group-hover/contact:bg-primary/30 transition-colors">
+                  <Phone className="w-5 h-5 text-primary" />
+                </div>
+                <div className="min-w-0">
+                  <p className="text-xs text-neutral-400 uppercase tracking-wider mb-1 font-heading">{locale === 'de' ? 'Telefon' : 'Phone'}</p>
                  <p className="font-medium text-neutral-200 group-hover/contact:text-primary transition-colors truncate">{companyInfo.contactPhone}</p>
-                </a>
-              </div>
+                </div>
+              </a>
              <div className="flex gap-4 p-4 rounded-2xl bg-white/[0.03] border border-white/[0.05] hover:bg-white/[0.05] transition-colors">
                <div className="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center shrink-0">
                  <svg className="w-5 h-5 text-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
@@ -86,7 +94,7 @@ export function Footer({ companyInfo }: FooterProps) {

        {/* Navigation Bento Grid */}
        <div className="col-span-1 md:col-span-4 lg:col-span-7 grid grid-cols-1 sm:grid-cols-2 gap-4 md:gap-6 lg:gap-8">
-          
+
          {/* Company Column */}
          <div className="bg-white/[0.02] border border-white/5 rounded-3xl p-6 md:p-8 lg:p-10 backdrop-blur-md relative group overflow-hidden flex flex-col">
            <div className="absolute inset-0 bg-gradient-to-bl from-white/[0.04] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" />
@@ -129,7 +137,7 @@ export function Footer({ companyInfo }: FooterProps) {
              ].map((link) => (
                <li key={link.href}>
                  <TransitionLink href={link.href} className="group/link flex items-center text-neutral-400 hover:text-white transition-colors py-1 cursor-pointer">
-                    <span className="w-0 h-px bg-neutral-500 mr-0 group-hover/link:w-3 group-hover/link:mr-3 transition-all duration-300" />
+                    <span className="w-0 h-px bg-primary mr-0 group-hover/link:w-4 group-hover/link:mr-3 transition-all duration-300" />
                    <span className="font-medium">{link.label}</span>
                  </TransitionLink>
                </li>
@@ -137,7 +145,7 @@ export function Footer({ companyInfo }: FooterProps) {
            </ul>

            {/* Built Info */}
-            
+
            {/* Legal Info removed from here */}
          </div>

@@ -148,31 +156,10 @@ export function Footer({ companyInfo }: FooterProps) {
        <div className="flex flex-col md:flex-row justify-between items-center gap-4 md:gap-6 py-4 px-5 md:py-6 md:px-8 rounded-2xl bg-white/[0.02] border border-white/5 backdrop-blur-md text-center md:text-left">
          <div className="flex flex-col md:flex-row items-center gap-4 md:gap-6 h-full">
            <p className="text-neutral-400 text-xs font-medium m-0">&copy; {new Date().getFullYear()} E-TIB GmbH. {locale === 'de' ? 'Alle Rechte vorbehalten.' : 'All rights reserved.'}</p>
-            
-            <div className="hidden md:block w-px h-3 bg-neutral-800" />
-            
-            <div className="flex items-center gap-3 text-neutral-400 text-xs">
-              <a href="https://mintel.me" target="_blank" rel="noopener noreferrer" className="hover:text-neutral-200 transition-colors flex items-center gap-2">
-                <span>Designed & Engineered by Mintel</span>
-              </a>
-              {process.env.NEXT_PUBLIC_APP_VERSION && (
-                <>
-                  <span className="w-1 h-1 rounded-full bg-white/20" />
-                  <div className="flex items-center gap-2 opacity-60">
-                    <span className="font-mono text-[10px]">v{process.env.NEXT_PUBLIC_APP_VERSION.replace(/^v/, '')}</span>
-                    {process.env.NEXT_PUBLIC_TARGET && process.env.NEXT_PUBLIC_TARGET !== 'production' && (
-                      <span className="px-1.5 py-0.5 rounded-sm bg-white/10 text-[9px] uppercase tracking-wider">
-                        {process.env.NEXT_PUBLIC_TARGET}
-                      </span>
-                    )}
-                  </div>
-                </>
-              )}
-            </div>
          </div>

          <div className="flex items-center gap-6">
-             <LanguageSwitcher isSolidMode={false} />
+            <LanguageSwitcher isSolidMode={false} />
          </div>
        </div>

@@ -183,6 +170,26 @@ export function Footer({ companyInfo }: FooterProps) {
          <div className="flex items-center gap-2"><Lock className="w-4 h-4 text-neutral-400" /><span>DSGVO Compliant</span></div>
          <div className="flex items-center gap-2"><Zap className="w-4 h-4 text-neutral-400" /><span>High Performance</span></div>
        </div>
+
+        {/* Mintel Design & Version */}
+        <div className="mt-6 flex justify-center items-center gap-3 text-neutral-500 text-[10px] md:text-xs opacity-60 hover:opacity-100 transition-opacity">
+          <a href="https://mintel.me" target="_blank" rel="noopener noreferrer" className="hover:text-neutral-300 transition-colors flex items-center gap-2">
+            <span>Designed & Engineered by Marc Mintel</span>
+          </a>
+          {process.env.NEXT_PUBLIC_APP_VERSION && (
+            <>
+              <span className="w-1 h-1 rounded-full bg-white/20" />
+              <div className="flex items-center gap-2">
+                <span className="font-mono text-[10px]">v{process.env.NEXT_PUBLIC_APP_VERSION.replace(/^v/, '')}</span>
+                {process.env.NEXT_PUBLIC_TARGET && process.env.NEXT_PUBLIC_TARGET !== 'production' && (
+                  <span className="px-1.5 py-0.5 rounded-sm bg-white/10 text-[9px] uppercase tracking-wider">
+                    {process.env.NEXT_PUBLIC_TARGET}
+                  </span>
+                )}
+              </div>
+            </>
+          )}
+        </div>
      </div>
    </footer>
  );