Update src/pages/activities/SailingSchoolPage.tsx

Adds subpages for each club activity and amenity, and adds buttons to the cards on the main page to navigate to them.

src/components/Layout.tsx

@@ -9,35 +9,39 @@ export default function Layout() {
   const navItems = [
   {
     "name": "Home",
-    "href": "#hero"
+    "href": "/"
+  },
+  {
+    "name": "Activities",
+    "href": "/activities"
   },
   {
     "name": "About",
-    "href": "#about"
+    "href": "/#about"
   },
   {
     "name": "Features",
-    "href": "#features"
+    "href": "/#features"
   },
   {
     "name": "Membership",
-    "href": "#pricing"
+    "href": "/#pricing"
   },
   {
     "name": "Team",
-    "href": "#team"
+    "href": "/#team"
   },
   {
     "name": "Testimonials",
-    "href": "#testimonials"
+    "href": "/#testimonials"
   },
   {
     "name": "Partners",
-    "href": "#social-proof"
+    "href": "/#social-proof"
   },
   {
     "name": "Contact",
-    "href": "#contact"
+    "href": "/#contact"
   }
 ];
 

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/ActivitiesPage.tsx

@@ -0,0 +1,109 @@
+import HeroSplit from '@/components/sections/hero/HeroSplit';
+import FeaturesTaggedCards from '@/components/sections/features/FeaturesTaggedCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+import TestimonialRatingCards from '@/components/sections/testimonial/TestimonialRatingCards';
+import ContactCta from '@/components/sections/contact/ContactCta';
+
+export default function ActivitiesPage() {
+  return (
+    <>
+      <div id="hero" data-section="hero">
+        <SectionErrorBoundary name="hero">
+          <HeroSplit
+            tag="Our Activities"
+            title="Discover the Vibrant Life at MBYC"
+            description="From competitive regattas to relaxed social gatherings, there's always something happening at Mission Beach Yacht Club. Explore our calendar of events and find your next adventure on and off the water."
+            primaryButton={{
+              text: "View Calendar",
+              href: "#",
+            }}
+            secondaryButton={{
+              text: "Join a Committee",
+              href: "#",
+            }}
+            imageSrc="http://img.b2bpic.net/free-photo/people-having-fun-yacht-while-sailing_637285-2145.jpg"
+          />
+        </SectionErrorBoundary>
+      </div>
+
+      <div id="activities-list" data-section="activities-list">
+        <SectionErrorBoundary name="activities-list">
+          <FeaturesTaggedCards
+            tag="What We Offer"
+            title="A Full Calendar of Events"
+            description="Our activities are designed to cater to all interests and skill levels, fostering a strong sense of community among our members."
+            items={[
+              {
+                tag: "Racing",
+                title: "Weekly Regattas",
+                description: "Test your skills and compete against fellow sailors in our exhilarating weekly regattas. All classes are welcome.",
+                imageSrc: "http://img.b2bpic.net/free-photo/sailing-yacht-race-yachting-sailing-regatta_654080-1676.jpg?_wi=1",
+                primaryButton: { text: "Learn More", href: "/activities/weekly-regattas" },
+              },
+              {
+                tag: "Cruising",
+                title: "Leisurely Cruises",
+                description: "Join our group cruises to explore the beautiful San Diego coastline, visit other clubs, and enjoy overnight trips.",
+                imageSrc: "http://img.b2bpic.net/free-photo/beautiful-shot-fluffy-clouds-sky-reflecting-calm-sea-with-boat-sailing_181624-2261.jpg?_wi=1",
+                primaryButton: { text: "Learn More", href: "/activities/leisurely-cruises" },
+              },
+              {
+                tag: "Social",
+                title: "Club Socials & Dinners",
+                description: "From holiday parties to themed dinners, our social events are the perfect opportunity to relax and connect with other members.",
+                imageSrc: "http://img.b2bpic.net/free-photo/group-friends-celebrating-together_23-2149155791.jpg?_wi=1",
+                primaryButton: { text: "Learn More", href: "/activities/club-socials" },
+              },
+              {
+                tag: "Learning",
+                title: "Sailing School & Seminars",
+                description: "Whether you're a novice or an experienced sailor, our certified instructors and guest speakers offer valuable lessons and insights.",
+                imageSrc: "http://img.b2bpic.net/free-photo/young-woman-learning-sail-boat_1303-27222.jpg?_wi=1",
+                primaryButton: { text: "Learn More", href: "/activities/sailing-school" },
+              },
+            ]}
+          />
+        </SectionErrorBoundary>
+      </div>
+
+      <div id="testimonials" data-section="testimonials">
+        <SectionErrorBoundary name="testimonials">
+          <TestimonialRatingCards
+            tag="Member Experiences"
+            title="What Members Say About Our Activities"
+            description="Hear directly from our members about their favorite club events and experiences."
+            testimonials={[
+              {
+                name: "Alex Johnson",
+                role: "Racing Enthusiast",
+                quote: "The regattas are world-class. The competition is friendly but fierce, and it's the highlight of my week. The race committee does an amazing job.",
+                rating: 5,
+                imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-handsome-man-sits-yacht_1157-48002.jpg",
+              },
+              {
+                name: "Samantha Bee",
+                role: "Cruising Family",
+                quote: "We love the weekend cruises. It's a fantastic way for our family to spend quality time together and explore new places with the safety and camaraderie of the club.",
+                rating: 5,
+                imageSrc: "http://img.b2bpic.net/free-photo/happy-family-sailing-yacht_1098-15951.jpg",
+              },
+            ]}
+          />
+        </SectionErrorBoundary>
+      </div>
+
+      <div id="contact" data-section="contact">
+        <SectionErrorBoundary name="contact">
+          <ContactCta
+            tag="Get Involved"
+            text="Have an idea for a new activity or want to volunteer? We'd love to hear from you. Reach out to our events committee and help shape the future of the club."
+            primaryButton={{
+              text: "Contact Events Committee",
+              href: "mailto:events@missionbeachyachtclub.com",
+            }}
+          />
+        </SectionErrorBoundary>
+      </div>
+    </>
+  );
+}

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,58 +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?_wi=1",
-            },
-            {
+          tags: [
+            "Competitive",
+            "Exciting",
+          ],
           imageSrc: "http://img.b2bpic.net/free-photo/sailing-yacht-race-yachting-sailing-regatta_654080-1676.jpg?_wi=2",
         },
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/sailing-yacht-race-yachting-sailing-regatta_654080-1676.jpg?_wi=3",
-            },
-          ],
-        },
         {
           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?_wi=1",
-            },
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/man-pulling-tent-zipper-enter-inside_23-2148301362.jpg?_wi=2",
-            },
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/man-pulling-tent-zipper-enter-inside_23-2148301362.jpg?_wi=3",
-            },
+          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?_wi=1",
-            },
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/life-after-covid-freedom-concept_23-2149068557.jpg?_wi=2",
-            },
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/life-after-covid-freedom-concept_23-2149068557.jpg?_wi=3",
-            },
+          tags: [
+            "Community",
+            "Networking",
           ],
+          imageSrc: "http://img.b2bpic.net/free-photo/life-after-covid-freedom-concept_23-2149068557.jpg",
         },
       ]}
     />

src/pages/activities/ClubSocialsPage.tsx

@@ -0,0 +1,14 @@
+import HeroSplit from '@/components/sections/hero/HeroSplit';
+
+export default function ClubSocialsPage() {
+  return (
+    <div id="hero" data-section="hero">
+      <HeroSplit
+        tag="Social"
+        title="Club Socials & Dinners"
+        description="From holiday parties to themed dinners, our social events are the perfect opportunity to relax and connect with other members."
+        imageSrc="http://img.b2bpic.net/free-photo/group-friends-celebrating-together_23-2149155791.jpg?_wi=2"
+      />
+    </div>
+  );
+}

src/pages/activities/LeisurelyCruisesPage.tsx

@@ -0,0 +1,14 @@
+import HeroSplit from '@/components/sections/hero/HeroSplit';
+
+export default function LeisurelyCruisesPage() {
+  return (
+    <div id="hero" data-section="hero">
+      <HeroSplit
+        tag="Cruising"
+        title="Leisurely Cruises"
+        description="Join our group cruises to explore the beautiful San Diego coastline, visit other clubs, and enjoy overnight trips."
+        imageSrc="http://img.b2bpic.net/free-photo/beautiful-shot-fluffy-clouds-sky-reflecting-calm-sea-with-boat-sailing_181624-2261.jpg?_wi=2"
+      />
+    </div>
+  );
+}

src/pages/activities/SailingSchoolPage.tsx

@@ -0,0 +1,14 @@
+import HeroSplit from '@/components/sections/hero/HeroSplit';
+
+export default function SailingSchoolPage() {
+  return (
+    <div id="hero" data-section="hero">
+      <HeroSplit
+        tag="Learning"
+        title="Sailing School & Seminars"
+        description="Whether you're a novice or an experienced sailor, our certified instructors and guest speakers offer valuable lessons and insights."
+        imageSrc="http://img.b2bpic.net/free-photo/young-woman-learning-sail-boat_1303-27222.jpg?_wi=2"
+      />
+    </div>
+  );
+}

src/pages/activities/WeeklyRegattasPage.tsx

@@ -0,0 +1,14 @@
+import HeroSplit from '@/components/sections/hero/HeroSplit';
+
+export default function WeeklyRegattasPage() {
+  return (
+    <div id="hero" data-section="hero">
+      <HeroSplit
+        tag="Racing"
+        title="Weekly Regattas"
+        description="Test your skills and compete against fellow sailors in our exhilarating weekly regattas. All classes are welcome."
+        imageSrc="http://img.b2bpic.net/free-photo/sailing-yacht-race-yachting-sailing-regatta_654080-1676.jpg"
+      />
+    </div>
+  );
+}

src/routes.ts

@@ -6,4 +6,9 @@ export interface Route {
 
 export const routes: Route[] = [
   { path: '/', label: 'Home', pageFile: 'HomePage' },
+  { path: '/activities', label: 'Activities', pageFile: 'ActivitiesPage' },
+  { path: '/activities/weekly-regattas', label: 'Weekly Regattas', pageFile: 'activities/WeeklyRegattasPage' },
+  { path: '/activities/leisurely-cruises', label: 'Leisurely Cruises', pageFile: 'activities/LeisurelyCruisesPage' },
+  { path: '/activities/club-socials', label: 'Club Socials', pageFile: 'activities/ClubSocialsPage' },
+  { path: '/activities/sailing-school', label: 'Sailing School', pageFile: 'activities/SailingSchoolPage' },
 ];