Bob AI: I want a light beige color theme

Merge version_19_1780496743813 into main

src/index.css

@@ -5,10 +5,10 @@
 
 :root {
   /* @colorThemes/lightTheme/grayNavyBlue */
-  --background: #0a0a0a;
-  --card: #1a1a1a;
-  --foreground: #f5f5f5;
-  --primary-cta: #ffdf7d;
+  --background: #f5f5dc;
+  --card: #ffffff;
+  --foreground: #333333;
+  --primary-cta: #d2b48c;
   --primary-cta-text: #0a0a0a;
   --secondary-cta: #1a1a1a;
   --secondary-cta-text: #ffffff;

src/pages/HomePage.tsx

@@ -14,6 +14,12 @@ import FaqSection from './HomePage/sections/Faq';
 import ContactSection from './HomePage/sections/Contact';
 
 
+
+
+{/* webild-stub @2026-06-03T14:26:06.808Z: make the hero section use width content width, like w-content-width */}
+
+{/* webild-stub @2026-06-03T14:17:28.384Z: make the hero section the same width as all the other sections */}
+
 {/* webild-stub @2026-06-03T13:49:00.110Z: change the hero section so each image in the carousel has its own progress bar, and all progress bars are visible at the same time */}
 
 export default function HomePage(): React.JSX.Element {

src/pages/HomePage/sections/Hero.tsx

@@ -71,7 +71,7 @@ export default function HeroSection(): React.JSX.Element {
                             </div>
                         ))}
                     </div>
-                    <div className="absolute bottom-6 left-1/2 -translate-x-1/2 flex gap-3 w-full max-w-md px-4 z-20">
+                    <div className="absolute bottom-6 left-1/2 -translate-x-1/2 flex gap-3 w-full px-4 z-20">
                         {images.map((_, index) => (
                             <div key={index} className="h-1.5 flex-1 bg-white/30 rounded-full overflow-hidden cursor-pointer" onClick={() => { setCurrentIndex(index); setProgress(0); }}>
                                 <div