feat: Add subpages for each club amenity and activity and buttons on each card to navigate to them.

Merge version_8_1778308738222 into main

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

@@ -1,6 +1,5 @@
 "use client";
 
-import { motion } from "motion/react";
 import { useButtonClick } from "@/hooks/useButtonClick";
 import { cls } from "@/lib/utils";
 
@@ -37,18 +36,7 @@ const ButtonShift = ({ text, variant = "primary", href = "#", onClick, animate =
     </a>
   );
 
-  if (!animate) return button;
+  return button;
-
-  return (
-    <motion.div
-      initial={{ opacity: 0, y: 20 }}
-      whileInView={{ opacity: 1, y: 0 }}
-      viewport={{ once: true }}
-      transition={{ duration: 0.6, delay: animationDelay, ease: "easeOut" }}
-    >
-      {button}
-    </motion.div>
-  );
 };
 
 export default ButtonShift;

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

@@ -55,7 +55,7 @@ export default function HomePage() {
             "Competitive",
             "Exciting",
           ],
-          imageSrc: "http://img.b2bpic.net/free-photo/sailing-yacht-race-yachting-sailing-regatta_654080-1676.jpg",
+          imageSrc: "http://img.b2bpic.net/free-photo/sailing-yacht-race-yachting-sailing-regatta_654080-1676.jpg?_wi=2",
         },
         {
           title: "Expert Sailing Lessons",

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' },
 ];