Bob AI: add section with our team after hero

src/app/page.tsx

@@ -11,6 +11,7 @@ import FaqBase from '@/components/sections/faq/FaqBase';
 import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 import { Sparkles, Package, Zap, Star, CreditCard, Crown, Smartphone, HelpCircle, Mail } from "lucide-react";
+import TeamSection from '@/components/sections/team/TeamSection';
 
 export default function LandingPage() {
   return (
@@ -235,6 +236,15 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="team" data-section="team">
+        <TeamSection title="Meet Our Team" subtitle="Our dedicated team is here to ensure you have the best iPhone experience." teamMembers={[
+          {name: "John Doe", role: "CEO", image: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80"},
+          {name: "Jane Smith", role: "Head of Sales", image: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80"},
+          {name: "Mike Johnson", role: "Customer Support Manager", image: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80"},
+          {name: "Emily Davis", role: "Marketing Director", image: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80"}
+        ]} />
+      </div>
+
       <div id="footer" data-section="footer">
         <FooterLogoReveal
           logoText="iPhone Store"

src/app/styles/variables.css

@@ -10,13 +10,13 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #fcf6ec;
+  --background: #f6e6ff;
-  --card: #f3ede2;
+  --card: #e6c3ff;
   --foreground: #2e2521;
   --primary-cta: #2e2521;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #ffffcc;
-  --accent: #b2a28b;
+  --accent: #ffffcc;
-  --background-accent: #b2a28b;
+  --background-accent: #ffffcc;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

src/components/sections/hero/HeroOverlay.tsx

@@ -43,7 +43,7 @@ const HeroOverlay = ({
   tag,
   tagIcon,
   buttons,
-  imageSrc,
+  imageSrc = "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1920&q=80",
   videoSrc,
   imageAlt = "",
   videoAriaLabel = "Hero video",
@@ -69,10 +69,11 @@ const HeroOverlay = ({
     <section
       aria-label={ariaLabel}
       className={cls("relative w-full h-svh overflow-hidden flex flex-col justify-end", className)}
+      style={{ backgroundImage: `url(${imageSrc})` }}
     >
       <div className={cls("absolute inset-0 w-full h-full", mediaWrapperClassName)}>
         {showDimOverlay && (
-          <div className={cls("absolute top-0 left-0 w-full h-full bg-background/20 pointer-events-none select-none", dimOverlayClassName)} />
+          <div className={cls("absolute top-0 left-0 w-full h-full bg-green-500/20 pointer-events-none select-none", dimOverlayClassName)} />
         )}
         <MediaContent
           imageSrc={imageSrc}