Bob AI: Add fancy hover animations to images in the hero section. In

Merge version_2 into main

src/app/page.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import HeroSplit from '@/components/sections/hero/HeroSplit';
+import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
 import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
 import SplitAbout from '@/components/sections/about/SplitAbout';
 import TeamCardOne from '@/components/sections/team/TeamCardOne';
@@ -43,36 +43,43 @@ export default function RealEstatePage() {
       </div>
 
       <div id="hero-section" data-section="hero-section">
-        <HeroSplit
-          title="Find Your Dream Home with Expert Guidance"
-          description="Specializing in premium properties across the city's most desirable neighborhoods, we provide personalized service to help you buy or sell with confidence."
-          background={{ variant: 'radial-gradient' }}
-          tag="Trusted by 500+ Clients"
+        <HeroBillboardRotatedCarousel
+          title="Discover Your Perfect Waterfront Property"
+          description="Explore AquaView Realty's exclusive collection of premium waterfront homes and investment properties. Our expert agents specialize in luxury coastal real estate with unmatched market knowledge."
+          background={{ variant: "radial-gradient" }}
+          tag="Waterfront Specialists"
           tagIcon={CheckCircle}
           tagAnimation="slide-up"
           buttons={[
-            {"text": "View Listings", "href": "#features-section"},
-            {"text": "Schedule Consultation", "href": "#contact-section"}
+            { text: "Browse Listings", href: "#listings", dataWebildId: "btn_browse_listings" },
+            { text: "Contact an Agent", href: "#contact", dataWebildId: "btn_contact_agent" }
           ]}
           buttonAnimation="slide-up"
-          avatars={[
-            {"src": "http://img.b2bpic.net/free-photo/couple-together-kitchen-drinking-coffee_1303-22267.jpg", "alt": "Sarah Johnson, Real Estate Agent"},
-            {"src": "http://img.b2bpic.net/free-photo/joyful-male-applicant-happily-shaking-employer-hand-young-handsome-man-white-shirt-getting-new-job-after-interview-modern-office_574295-5881.jpg", "alt": "Michael Chen, Property Specialist"}
+          carouselItems={[
+            {
+              id: "property-1",
+              imageSrc: "https://img.b2bpic.net/free-photo/luxury-pool-villa-spectacular-contemporary-design-digital-art-real-estate-home-house-property-ge_1258-150759.jpg?_wi=1",
+              imageAlt: "Luxury waterfront villa with ocean view"
+            },
+            {
+              id: "property-2",
+              imageSrc: "https://img.b2bpic.net/free-photo/abstract-luxury-gradient-blue-background_53876-120942.jpg?_wi=1",
+              imageAlt: "Modern beachfront property"
+            },
+            {
+              id: "property-3",
+              imageSrc: "https://img.b2bpic.net/free-photo/luxury-pool-villa-spectacular-contemporary-design-digital-art-real-estate-home-house-property-ge_1258-150759.jpg?_wi=2",
+              imageAlt: "Contemporary coastal residence"
+            },
+            {
+              id: "property-4",
+              imageSrc: "https://img.b2bpic.net/free-photo/abstract-luxury-gradient-blue-background_53876-120942.jpg?_wi=2",
+              imageAlt: "Premium waterfront investment"
+            }
           ]}
-          avatarText="Our award-winning team is here to guide you"
-          imageSrc="http://img.b2bpic.net/free-photo/luxury-pool-villa-spectacular-contemporary-design-digital-art-real-estate-home-house-property-ge_1258-150759.jpg"
-          imageAlt="Modern luxury home interior with city view"
-          mediaAnimation="slide-up"
-          imagePosition="right"
-          fixedMediaHeight={true}
-          marqueeItems={[
-            {"type": "text-icon", "text": "Market Insights", "icon": TrendingUp},
-            {"type": "text", "text": "24/7 Support"},
-            {"type": "text-icon", "text": "Expert Negotiation", "icon": Handshake},
-            {"type": "text", "text": "Seamless Process"}
-          ]}
-          marqueeSpeed={30}
-          showMarqueeCard={true}
+          autoPlay={true}
+          autoPlayInterval={5000}
+          ariaLabel="AquaView Realty featured properties carousel"
         />
       </div>
 

src/components/sections/hero/HeroBillboardRotatedCarousel.tsx

@@ -116,6 +116,7 @@ const HeroBillboardRotatedCarousel = ({
           autoPlay={autoPlay}
           autoPlayInterval={autoPlayInterval}
           className={carouselClassName}
+          imageClassName="transition-all duration-500 ease-out hover:scale-110 hover:rotate-1 hover:shadow-2xl hover:[filter:drop-shadow(0_0_20px_rgba(59,130,246,0.5))] cursor-pointer"
         />
       </div>
     </section>