Bob AI (stub): I want a premium blue color theme

Merge version_8_1780416382501 into main

src/index.css

@@ -4,6 +4,25 @@
 @import "./styles/animations.css";
 
 :root {
+  --background: 222 47% 11%;
+  --foreground: 210 40% 98%;
+  --card: 223 47% 14%;
+  --card-foreground: 210 40% 98%;
+  --popover: 223 47% 14%;
+  --popover-foreground: 210 40% 98%;
+  --primary: 217 91% 60%;
+  --primary-foreground: 222 47% 11%;
+  --secondary: 217 33% 17%;
+  --secondary-foreground: 210 40% 98%;
+  --muted: 217 33% 17%;
+  --muted-foreground: 215 20% 65%;
+  --accent: 217 33% 17%;
+  --accent-foreground: 210 40% 98%;
+  --destructive: 0 63% 31%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 217 33% 17%;
+  --input: 217 33% 17%;
+  --ring: 224 76% 48%;
   /* @colorThemes/lightTheme/grayNavyBlue */
   --background: #0a0a0a;
   --card: #1a1a1a;

src/pages/HomePage.tsx

@@ -16,6 +16,9 @@ import ContactSection from './HomePage/sections/Contact';
 
 
 
+
+{/* webild-stub @2026-06-02T16:12:07.363Z: I want a premium blue color theme */}
+
 {/* webild-stub @2026-06-02T16:01:32.987Z: change the about section's image to rotate every 5 seconds and add a progress bar at the bottom of the image */}
 
 {/* webild-stub @2026-06-02T15:58:48.008Z: change the about section's image to rotate every 5 seconds and add a progress bar at the bottom */}

src/pages/HomePage/sections/About.tsx

@@ -9,9 +9,29 @@ import ScrollReveal from "@/components/ui/ScrollReveal";
 import { CheckCircle2 } from "lucide-react";
 
 export default function AboutSection(): React.JSX.Element {
+  const [currentIndex, setCurrentIndex] = React.useState(0);
+  const IMAGES = [
+    "https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&q=80",
+    "https://images.unsplash.com/photo-1582719478250-c894e4dc24a5?auto=format&fit=crop&q=80",
+    "https://images.unsplash.com/photo-1542314831-c6a4d14d8c85?auto=format&fit=crop&q=80"
+  ];
+
+  React.useEffect(() => {
+    const timer = setInterval(() => {
+      setCurrentIndex((prev) => (prev + 1) % IMAGES.length);
+    }, 5000);
+    return () => clearInterval(timer);
+  }, []);
+
   return (
     <div id="about" data-section="about" className="py-24 bg-background">
       <SectionErrorBoundary name="about">
+        <style>{`
+          @keyframes progress-bar {
+            0% { width: 0%; }
+            100% { width: 100%; }
+          }
+        `}</style>
         <div className="container mx-auto px-4">
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
             <ScrollReveal variant="slide-up">
@@ -40,10 +60,27 @@ export default function AboutSection(): React.JSX.Element {
             </ScrollReveal>
             <ScrollReveal variant="fade-blur">
               <div className="relative h-[500px] rounded-2xl overflow-hidden">
-                <ImageOrVideo 
+                {IMAGES.map((src, index) => (
-                  imageSrc="https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&q=80"
+                  <div
-                  className="w-full h-full object-cover"
+                    key={src}
-                />
+                    className={`absolute inset-0 transition-opacity duration-1000 ${
+                      index === currentIndex ? "opacity-100 z-10" : "opacity-0 z-0"
+                    }`}
+                  >
+                    <ImageOrVideo 
+                      imageSrc={src}
+                      className="w-full h-full object-cover"
+                    />
+                  </div>
+                ))}
+                
+                <div className="absolute bottom-0 left-0 right-0 h-1.5 bg-black/40 z-20">
+                  <div 
+                    key={currentIndex}
+                    className="h-full bg-primary"
+                    style={{ animation: 'progress-bar 5s linear' }}
+                  />
+                </div>
               </div>
             </ScrollReveal>
           </div>