Update src/app/styles/variables.css

Merge version_1 into main

src/app/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import { Camera, Heart, Shield, Sparkles, TrendingUp, Zap } from "lucide-react";
+import { Camera, Heart, Shield, Sparkles, TrendingUp, Zap, Facebook, Twitter, Instagram, Linkedin } from "lucide-react";
 import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
 import HeroBillboard from "@/components/sections/hero/HeroBillboard";
 import FeatureCardNine from "@/components/sections/feature/FeatureCardNine";
@@ -12,6 +12,54 @@ import TestimonialCardFifteen from "@/components/sections/testimonial/Testimonia
 import FooterBase from "@/components/sections/footer/FooterBase";
 
 export default function SpiderManPage() {
+  const spiderWebSVG = (
+    <svg
+      viewBox="0 0 1200 100"
+      preserveAspectRatio="none"
+      className="w-full h-auto"
+      aria-hidden="true"
+    >
+      {/* Spider web pattern */}
+      <defs>
+        <linearGradient id="webGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" stopColor="var(--primary-cta)" stopOpacity="0.3" />
+          <stop offset="50%" stopColor="var(--accent)" stopOpacity="0.5" />
+          <stop offset="100%" stopColor="var(--primary-cta)" stopOpacity="0.3" />
+        </linearGradient>
+      </defs>
+      
+      {/* Radial web lines */}
+      <line x1="100" y1="50" x2="200" y2="10" stroke="url(#webGradient)" strokeWidth="1.5" />
+      <line x1="100" y1="50" x2="180" y2="90" stroke="url(#webGradient)" strokeWidth="1.5" />
+      <line x1="300" y1="50" x2="380" y2="15" stroke="url(#webGradient)" strokeWidth="1.5" />
+      <line x1="300" y1="50" x2="380" y2="85" stroke="url(#webGradient)" strokeWidth="1.5" />
+      <line x1="500" y1="50" x2="580" y2="10" stroke="url(#webGradient)" strokeWidth="1.5" />
+      <line x1="500" y1="50" x2="580" y2="90" stroke="url(#webGradient)" strokeWidth="1.5" />
+      <line x1="700" y1="50" x2="780" y2="15" stroke="url(#webGradient)" strokeWidth="1.5" />
+      <line x1="700" y1="50" x2="780" y2="85" stroke="url(#webGradient)" strokeWidth="1.5" />
+      <line x1="900" y1="50" x2="980" y2="10" stroke="url(#webGradient)" strokeWidth="1.5" />
+      <line x1="900" y1="50" x2="980" y2="90" stroke="url(#webGradient)" strokeWidth="1.5" />
+      <line x1="1100" y1="50" x2="1180" y2="15" stroke="url(#webGradient)" strokeWidth="1.5" />
+      <line x1="1100" y1="50" x2="1180" y2="85" stroke="url(#webGradient)" strokeWidth="1.5" />
+      
+      {/* Circular web lines */}
+      <circle cx="100" cy="50" r="40" fill="none" stroke="url(#webGradient)" strokeWidth="1" opacity="0.4" />
+      <circle cx="300" cy="50" r="35" fill="none" stroke="url(#webGradient)" strokeWidth="1" opacity="0.4" />
+      <circle cx="500" cy="50" r="38" fill="none" stroke="url(#webGradient)" strokeWidth="1" opacity="0.4" />
+      <circle cx="700" cy="50" r="36" fill="none" stroke="url(#webGradient)" strokeWidth="1" opacity="0.4" />
+      <circle cx="900" cy="50" r="40" fill="none" stroke="url(#webGradient)" strokeWidth="1" opacity="0.4" />
+      <circle cx="1100" cy="50" r="35" fill="none" stroke="url(#webGradient)" strokeWidth="1" opacity="0.4" />
+      
+      {/* Spider body nodes */}
+      <circle cx="100" cy="50" r="4" fill="var(--primary-cta)" opacity="0.8" />
+      <circle cx="300" cy="50" r="4" fill="var(--primary-cta)" opacity="0.8" />
+      <circle cx="500" cy="50" r="4" fill="var(--primary-cta)" opacity="0.8" />
+      <circle cx="700" cy="50" r="4" fill="var(--primary-cta)" opacity="0.8" />
+      <circle cx="900" cy="50" r="4" fill="var(--primary-cta)" opacity="0.8" />
+      <circle cx="1100" cy="50" r="4" fill="var(--primary-cta)" opacity="0.8" />
+    </svg>
+  );
+
   return (
     <ThemeProvider
       defaultButtonVariant="directional-hover"
@@ -187,6 +235,12 @@ export default function SpiderManPage() {
         />
       </div>
 
+      <div className="relative py-8 overflow-hidden" aria-hidden="true">
+        <div className="opacity-60 hover:opacity-100 transition-opacity duration-500">
+          {spiderWebSVG}
+        </div>
+      </div>
+
       <div id="footer" data-section="footer">
         <FooterBase
           logoText="Spider-Man"
@@ -209,11 +263,11 @@ export default function SpiderManPage() {
               ]
             },
             {
-              title: "Follow",              items: [
+              title: "Follow Us",              items: [
+                { label: "Facebook", href: "https://facebook.com" },
                 { label: "Twitter", href: "https://twitter.com" },
                 { label: "Instagram", href: "https://instagram.com" },
-                { label: "YouTube", href: "https://youtube.com" },
-                { label: "TikTok", href: "https://tiktok.com" }
+                { label: "LinkedIn", href: "https://linkedin.com" }
               ]
             }
           ]}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #080200;
-  --card: #1a0d0b;
-  --foreground: #ffe6d5;
-  --primary-cta: #ffaa70;
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #ffffff;
+  --primary-cta: #dc2626;
   --primary-cta-text: #080200;
-  --secondary-cta: #170b07;
+  --secondary-cta: #0052cc;
   --secondary-cta-text: #ffe6d5;
-  --accent: #7b5e4a;
-  --background-accent: #b8541e;
+  --accent: #ff3d4a;
+  --background-accent: #1f1f2e;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);