Bob AI: Modify the carousel component to: 1) Slow down the auto-play

Merge version_4 into main

src/app/page.tsx

@@ -10,6 +10,7 @@ import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCar
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
 import { Award, BookOpen, Heart, Star, Trophy, Users, Zap } from 'lucide-react';
+import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
 
 export default function SitePage() {
   return (
@@ -34,24 +35,25 @@ export default function SitePage() {
       </div>
 
       <div id="hero-section" data-section="hero-section">
-        <HeroBillboard 
+        <HeroBillboardCarousel
           title="Elevating Excellence: Athlete & Scholar"
           description="Dedicated to achieving greatness both on the field and in the classroom. Committed to academic rigor and athletic prowess, ready to contribute to your institution's legacy of excellence."
           background={{ variant: 'radial-gradient' }}
           tag="College Recruiting Ready"
           tagIcon={Trophy}
           tagAnimation="slide-up"
-          buttons={[{text:"View Achievements",href:"#achievements-section"},{text:"Contact Me",href:"#contact-section"}]}
+          buttons={[
+            { text: "View Achievements", href: "#achievements-section", dataWebildId: "btn_view_achievements" },
+            { text: "Contact Me", href: "#contact-section", dataWebildId: "btn_contact_me" }
+          ]}
           buttonAnimation="slide-up"
-          avatars={[{src:"http://img.b2bpic.net/free-photo/portrait-smiling-young-male-athlete-standing-race-track_23-2148162079.jpg",alt:"Athletic Performance Metric"},{src:"http://img.b2bpic.net/free-photo/two-female-sprinter-athletes-running-treadmill-race-training-athletics-stadium_613910-19085.jpg",alt:"Academic Excellence Indicator"}]}
-          avatarText="2023 Academic All-American • 4.2 GPA"
-          imageSrc="http://img.b2bpic.net/free-photo/portrait-half-naked-healthy-sportsman-starting-run_171337-9443.jpg"
-          imageAlt="Professional portrait of athlete in uniform with academic achievements displayed"
-          mediaAnimation="slide-up"
-          marqueeItems={[{type: 'text-icon', text:"National Championship Participant",icon:Award},{type: 'text-icon', text:"Dean's List Recipient",icon:BookOpen},{type: 'text-icon', text:"Team Captain",icon:Users}]}
-          marqueeSpeed={40}
-          showMarqueeCard={true}
-          ariaLabel="Hero section highlighting athletic and academic excellence"
+          mediaItems={[
+            { imageSrc: "http://img.b2bpic.net/free-photo/shirtless-man-practicing-parkour-outdoors_52683-114636.jpg", imageAlt: "Athlete training outdoors with intensity" },
+            { imageSrc: "http://img.b2bpic.net/free-photo/full-shot-fit-man-training-outdoors_23-2150351926.jpg", imageAlt: "Professional athlete in training session" },
+            { imageSrc: "http://img.b2bpic.net/free-photo/man-ready-sport-night_23-2149304841.jpg", imageAlt: "Athlete preparing for competition" },
+            { imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-tying-shoelaces_23-2149142343.jpg", imageAlt: "Athlete focused on performance preparation" }
+          ]}
+          ariaLabel="Hero carousel showcasing athletic excellence and training dedication"
         />
       </div>
 

src/components/sections/hero/HeroBillboardCarousel.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useState, useRef } from "react";
 import TextBox from "@/components/Textbox";
 import MediaContent from "@/components/shared/MediaContent";
 import AutoCarousel from "@/components/cardStack/layouts/carousels/AutoCarousel";
@@ -44,6 +45,8 @@ interface HeroBillboardCarouselProps {
     buttons?: ButtonConfig[];
     buttonAnimation?: ButtonAnimationType;
     mediaItems: MediaItem[];
+    backgroundImageSrc?: string;
+    backgroundImageOpacity?: number;
     ariaLabel?: string;
     className?: string;
     containerClassName?: string;
@@ -67,6 +70,8 @@ const HeroBillboardCarousel = ({
     buttons,
     buttonAnimation,
     mediaItems,
+    backgroundImageSrc,
+    backgroundImageOpacity = 0.3,
     ariaLabel = "Hero section",
     className = "",
     containerClassName = "",
@@ -79,6 +84,8 @@ const HeroBillboardCarousel = ({
     buttonTextClassName = "",
     mediaWrapperClassName = "",
 }: HeroBillboardCarouselProps) => {
+    const [isHovered, setIsHovered] = useState(false);
+    const carouselRef = useRef<HTMLDivElement>(null);
     const renderCarouselItem = (item: MediaItem, index: number) => (
         <div
             key={index}
@@ -98,11 +105,24 @@ const HeroBillboardCarousel = ({
         <section
             aria-label={ariaLabel}
             className={cls(
-                "relative w-full py-hero-page-padding md:h-svh md:py-0",
+                "relative w-full py-hero-page-padding md:h-svh md:py-0 overflow-hidden",
                 className
             )}
         >
             <HeroBackgrounds {...background} />
+            {backgroundImageSrc && (
+                <div
+                    className="absolute inset-0 z-0"
+                    style={{
+                        backgroundImage: `url('${backgroundImageSrc}')`,
+                        backgroundSize: 'cover',
+                        backgroundPosition: 'center',
+                        opacity: backgroundImageOpacity,
+                        filter: 'blur(40px)',
+                    }}
+                    aria-hidden="true"
+                />
+            )}
             <div className={cls(
                 "mx-auto flex flex-col gap-14 md:gap-10 relative z-10",
                 "w-full md:w-content-width md:h-full md:items-center md:justify-center",
@@ -129,7 +149,12 @@ const HeroBillboardCarousel = ({
                     center={true}
                 />
 
-                <div className={cls("w-full -mx-[var(--content-padding)]", mediaWrapperClassName)}>
+                <div 
+                    ref={carouselRef}
+                    className={cls("w-full -mx-[var(--content-padding)] relative z-20", mediaWrapperClassName)}
+                    onMouseEnter={() => setIsHovered(true)}
+                    onMouseLeave={() => setIsHovered(false)}
+                >
                     <AutoCarousel
                         title=""
                         description=""
@@ -141,6 +166,8 @@ const HeroBillboardCarousel = ({
                         itemClassName="!w-55 md:!w-carousel-item-4"
                         ariaLabel="Hero carousel"
                         showTextBox={false}
+                        autoPlayInterval={isHovered ? 0 : 5000}
+                        pauseOnHover={true}
                     >
                         {mediaItems?.map(renderCarouselItem)}
                     </AutoCarousel>