Bob AI: add a light ray blue animated background element on the hero section

Merge version_4_1778307536844 into main

src/components/Layout.tsx

@@ -128,3 +128,4 @@ export default function Layout() {
     </StyleProvider>
   );
 }
+

src/components/ui/NavbarInline.tsx

@@ -21,7 +21,7 @@ const NavbarInline = ({ logo, navItems, ctaButton }: NavbarInlineProps) => {
       <div className="flex items-center justify-between p-2 xl:p-3 2xl:p-4 rounded backdrop-blur-sm card">
         <a href="/" className="pl-2 text-xl font-medium text-foreground">{logo}</a>
 
-        <div className="hidden md:flex absolute left-1/2 -translate-x-1/2 items-center gap-6">
+        <div className="hidden md:flex absolute left-1/2 -translate-x-1/2 items-center gap-4">
           {navItems.map((item) => (
             <a
               key={item.name}

src/pages/HomePage.tsx

@@ -1,6 +1,6 @@
 import AboutTestimonial from '@/components/sections/about/AboutTestimonial';
 import ContactCta from '@/components/sections/contact/ContactCta';
-import FeaturesBento from '@/components/sections/features/FeaturesBento';
+import FeaturesArrowCards from '@/components/sections/features/FeaturesArrowCards';
 import HeroSplit from '@/components/sections/hero/HeroSplit';
 import PricingMediaCards from '@/components/sections/pricing/PricingMediaCards';
 import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
@@ -44,40 +44,34 @@ export default function HomePage() {
 
   <div id="features" data-section="features">
     <SectionErrorBoundary name="features">
-          <FeaturesBento
+          <FeaturesArrowCards
       tag="Club Amenities & Activities"
       title="Unrivaled Yachting Experience"
       description="From world-class regattas to serene sunset cruises, our club provides an array of experiences for every maritime enthusiast and their family."
-      features={[
+      items={[
         {
           title: "Thrilling Regattas",
-          description: "Participate in competitive and exciting races.",
-          bentoComponent: "media-stack",
-          mediaItems: [
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/sailing-yacht-race-yachting-sailing-regatta_654080-1676.jpg",
-            },
+          tags: [
+            "Competitive",
+            "Exciting",
           ],
+          imageSrc: "http://img.b2bpic.net/free-photo/sailing-yacht-race-yachting-sailing-regatta_654080-1676.jpg",
         },
         {
           title: "Expert Sailing Lessons",
-          description: "Learn from the best and grow your skills on the water.",
-          bentoComponent: "media-stack",
-          mediaItems: [
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/man-pulling-tent-zipper-enter-inside_23-2148301362.jpg",
-            },
+          tags: [
+            "Learn",
+            "Grow",
           ],
+          imageSrc: "http://img.b2bpic.net/free-photo/man-pulling-tent-zipper-enter-inside_23-2148301362.jpg",
         },
         {
           title: "Vibrant Social Events",
-          description: "Connect with the community and network with fellow members.",
-          bentoComponent: "media-stack",
-          mediaItems: [
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/life-after-covid-freedom-concept_23-2149068557.jpg",
-            },
+          tags: [
+            "Community",
+            "Networking",
           ],
+          imageSrc: "http://img.b2bpic.net/free-photo/life-after-covid-freedom-concept_23-2149068557.jpg",
         },
       ]}
     />