Fast fertig

src/components/Navigation.tsx

@@ -33,11 +33,13 @@ const Navigation = () => {
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex items-center justify-between h-16">
           {/* Logo */}
-          <Link to="/" className="flex items-center space-x-2">
-            <div className="w-8 h-8 bg-neon rounded-lg flex items-center justify-center">
-              <span className="text-neon-foreground font-bold text-sm">BA</span>
-            </div>
-            <span className="font-heading font-bold text-lg text-foreground">
+          <Link to="/" className="flex items-center space-x-3">
+            <img 
+              src="/logo_bayarea.svg" 
+              alt="Bay Area Affiliates Logo" 
+              className="w-8 h-8 opacity-90 hover:opacity-100 transition-opacity duration-300"
+            />
+            <span className="font-heading font-bold text-lg text-white">
               Bay Area Affiliates
             </span>
           </Link>
@@ -51,7 +53,7 @@ const Navigation = () => {
                 className={`font-medium transition-colors duration-200 ${
                   isActive(item.path)
                     ? 'text-neon'
-                    : 'text-foreground-muted hover:text-neon'
+                    : 'text-white hover:text-neon'
                 }`}
               >
                 {item.name}
@@ -68,7 +70,7 @@ const Navigation = () => {
           {/* Mobile menu button */}
           <button
             onClick={() => setIsOpen(!isOpen)}
-            className="md:hidden text-foreground hover:text-neon transition-colors"
+            className="md:hidden text-white hover:text-neon transition-colors"
             aria-label="Toggle navigation menu"
           >
             {isOpen ? <X size={24} /> : <Menu size={24} />}
@@ -87,7 +89,7 @@ const Navigation = () => {
                   className={`block px-3 py-2 rounded-md text-base font-medium transition-colors ${
                     isActive(item.path)
                       ? 'text-neon bg-neon/10'
-                      : 'text-foreground-muted hover:text-neon hover:bg-neon/5'
+                      : 'text-white hover:text-neon hover:bg-neon/5'
                   }`}
                 >
                   {item.name}

src/components/home/HeroSection.tsx

@@ -20,53 +20,45 @@ const HeroSection = () => {
   }, []);
 
   return (
-    <section className="section-pin grid-overlay">
+    <section className="section-pin">
       <div className="relative h-full flex items-center justify-center overflow-hidden">
         {/* Background image with parallax */}
         <div className="absolute inset-0 overflow-hidden">
           <img 
             ref={imageRef}
-            src={heroNetwork} 
+            src="/serverroom.png" 
             alt="Modern IT infrastructure with network connections" 
-            className="w-full h-[110%] object-cover opacity-20 will-change-transform"
+            className="w-full h-[110%] object-cover will-change-transform"
             style={{ transform: 'translateY(0px) scale(1.1)' }}
           />
-          <div className="absolute inset-0 bg-gradient-to-b from-background/40 via-background/60 to-background"></div>
-        </div>
-
-        {/* Particle field effect */}
-        <div className="absolute inset-0 opacity-30">
-          {Array.from({ length: 50 }).map((_, i) => (
-            <div
-              key={i}
-              className="absolute w-1 h-1 bg-neon rounded-full animate-float"
-              style={{
-                left: `${Math.random() * 100}%`,
-                top: `${Math.random() * 100}%`,
-                animationDelay: `${Math.random() * 6}s`,
-                animationDuration: `${6 + Math.random() * 4}s`,
-              }}
-            />
-          ))}
         </div>
 
         {/* Main content */}
         <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
           <div className="max-w-4xl mx-auto">
+            {/* Logo */}
+            <div className="flex justify-center mb-8">
+              <img 
+                src="/logo_bayarea.svg" 
+                alt="Bay Area Affiliates Logo" 
+                className="w-20 h-20 sm:w-24 sm:h-24 opacity-95 hover:opacity-100 transition-opacity duration-300 drop-shadow-[0_0_10px_rgba(255,255,255,0.3)]"
+              />
+            </div>
+            
             {/* Badge */}
-            <div className="inline-flex items-center px-4 py-2 rounded-full bg-neon/10 border border-neon/30 text-neon text-sm font-medium mb-8">
+            <div className="inline-flex items-center px-4 py-2 rounded-full bg-neon/20 border border-neon/40 text-neon text-sm font-medium mb-8 drop-shadow-[0_0_10px_rgba(51,102,255,0.5)]">
               <span className="w-2 h-2 bg-neon rounded-full mr-2 animate-glow-pulse"></span>
               Serving the Coastal Bend since 2010
             </div>
 
             {/* Main headline */}
-            <h1 className="font-heading font-bold text-5xl sm:text-6xl lg:text-7xl text-foreground mb-6 text-balance">
+            <h1 className="font-heading font-bold text-5xl sm:text-6xl lg:text-7xl text-white mb-6 text-balance drop-shadow-[0_0_20px_rgba(255,255,255,0.3)]">
               Modern IT that keeps your{' '}
-              <span className="text-neon text-glow">business moving</span>
+              <span className="text-neon text-glow drop-shadow-[0_0_30px_rgba(51,102,255,0.8)]">business moving</span>
             </h1>
 
             {/* Subheadline */}
-            <p className="text-xl sm:text-2xl text-foreground-muted mb-12 max-w-3xl mx-auto leading-relaxed">
+            <p className="text-xl sm:text-2xl text-white/95 mb-12 max-w-3xl mx-auto leading-relaxed drop-shadow-[0_0_15px_rgba(255,255,255,0.2)]">
               From fast devices to secure remote access and resilient networks — we design, 
               run and protect your tech so you can focus on growth.
             </p>
@@ -88,11 +80,11 @@ const HeroSection = () => {
             </div>
 
             {/* Trust indicators */}
-            <div className="mt-16 pt-8 border-t border-border/30">
-              <p className="text-sm text-foreground-muted mb-6">Trusted by businesses across Corpus Christi</p>
-              <div className="flex flex-wrap justify-center items-center gap-8 opacity-60">
-                {['Healthcare', 'Manufacturing', 'Professional Services', 'Non-Profit'].map((industry) => (
-                  <span key={industry} className="text-sm font-medium text-foreground-muted">
+            <div className="mt-16 pt-8 border-t border-white/30">
+              <p className="text-sm text-white/90 mb-6 drop-shadow-[0_0_10px_rgba(255,255,255,0.2)]">Trusted by businesses across Corpus Christi</p>
+              <div className="flex flex-wrap justify-center items-center gap-8">
+                {['Healthcare', 'Manufacturing', 'Professional Services'].map((industry) => (
+                  <span key={industry} className="text-base font-bold text-white drop-shadow-[0_0_20px_rgba(255,255,255,0.6)] drop-shadow-[0_0_40px_rgba(255,255,255,0.3)]">
                     {industry}
                   </span>
                 ))}
@@ -103,7 +95,7 @@ const HeroSection = () => {
 
         {/* Scroll indicator */}
         <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2">
-          <div className="w-6 h-10 border-2 border-neon/50 rounded-full flex justify-center">
+          <div className="w-6 h-10 border-2 border-neon/60 rounded-full flex justify-center drop-shadow-[0_0_10px_rgba(51,102,255,0.3)]">
             <div className="w-1 h-3 bg-neon rounded-full mt-2 animate-bounce"></div>
           </div>
         </div>