feat: add subpages for activities and fix button visibility

Merge version_9_1778309203036 into main

src/components/sections/features/FeaturesTaggedCards.tsx

@@ -71,7 +71,7 @@ const FeaturesTaggedCards = ({
                   <h3 className="text-xl md:text-2xl font-medium leading-tight">{item.title}</h3>
                   <p className="text-base leading-tight">{item.description}</p>
                   {(item.primaryButton || item.secondaryButton) && (
-                    <div className="flex flex-wrap gap-3 mt-2">
+                    <div className="flex flex-wrap gap-3 mt-auto pt-4">
                       {item.primaryButton && <Button text={item.primaryButton.text} href={item.primaryButton.href} variant="primary" />}
                       {item.secondaryButton && <Button text={item.secondaryButton.text} href={item.secondaryButton.href} variant="secondary" />}
                     </div>

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 (
-    <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>
-  );
+  return button;
 };
 
 export default ButtonShift;

src/pages/ActivitiesPage.tsx

@@ -38,28 +38,28 @@ export default function ActivitiesPage() {
                 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/regattas" },
+                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",
-                primaryButton: { text: "Learn More", href: "/activities/cruises" },
+                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",
-                primaryButton: { text: "Learn More", href: "/activities/socials" },
+                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",
-                primaryButton: { text: "Learn More", href: "/activities/school" },
+                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" },
               },
             ]}
           />

src/pages/activities/ClubSocialsPage.tsx

@@ -1,14 +1,64 @@
 import HeroSplit from '@/components/sections/hero/HeroSplit';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+import ContactCta from '@/components/sections/contact/ContactCta';
+import FeaturesMinimalCards from '@/components/sections/features/FeaturesMinimalCards';
 
 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"
-      />
-    </div>
+    <>
+      <div id="hero" data-section="hero">
+        <SectionErrorBoundary name="hero">
+          <HeroSplit
+            tag="Club Socials & Dinners"
+            title="Connect with Your Fellow Members"
+            description="Our club is more than just a place to sail; it's a community. Our social events are a great way to meet new people and build lasting friendships."
+            primaryButton={{
+              text: "View Social Calendar",
+              href: "#",
+            }}
+            imageSrc="http://img.b2bpic.net/free-photo/group-friends-celebrating-together_23-2149155791.jpg?_wi=1"
+          />
+        </SectionErrorBoundary>
+      </div>
+      <div id="social-info" data-section="social-info">
+        <SectionErrorBoundary name="social-info">
+          <FeaturesMinimalCards
+            tag="Event Details"
+            title="There's Always Something Happening"
+            description="From casual get-togethers to formal dinners, our social calendar is packed with events for everyone."
+            items={[
+              {
+                title: "Weekly Dinners",
+                description: "Join us at the clubhouse every Friday night for a delicious meal prepared by our in-house chef.",
+              },
+              {
+                title: "Holiday Parties",
+                description: "We celebrate all major holidays with festive parties, including a spectacular 4th of July fireworks display.",
+              },
+              {
+                title: "Themed Events",
+                description: "Look out for our popular themed events, such as pirate night, casino night, and our annual Commodore's Ball.",
+              },
+              {
+                title: "Live Music",
+                description: "Enjoy live music from local bands on our deck during the summer months.",
+              },
+            ]}
+          />
+        </SectionErrorBoundary>
+      </div>
+      <div id="contact" data-section="contact">
+        <SectionErrorBoundary name="contact">
+          <ContactCta
+            tag="Get Involved"
+            text="Have an idea for a social event? Want to help out? Contact our social committee."
+            primaryButton={{
+              text: "Contact Social Committee",
+              href: "mailto:socialcommittee@missionbeachyachtclub.com",
+            }}
+          />
+        </SectionErrorBoundary>
+      </div>
+    </>
   );
 }

src/pages/activities/LeisurelyCruisesPage.tsx

@@ -1,14 +1,64 @@
 import HeroSplit from '@/components/sections/hero/HeroSplit';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+import ContactCta from '@/components/sections/contact/ContactCta';
+import FeaturesMinimalCards from '@/components/sections/features/FeaturesMinimalCards';
 
 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"
-      />
-    </div>
+    <>
+      <div id="hero" data-section="hero">
+        <SectionErrorBoundary name="hero">
+          <HeroSplit
+            tag="Leisurely Cruises"
+            title="Explore the Coastline at Your Own Pace"
+            description="Our leisurely cruises are perfect for those who want to enjoy the beauty of the San Diego coast without the pressure of competition. Join us for a relaxing day on the water."
+            primaryButton={{
+              text: "View Cruise Schedule",
+              href: "#",
+            }}
+            imageSrc="http://img.b2bpic.net/free-photo/beautiful-shot-fluffy-clouds-sky-reflecting-calm-sea-with-boat-sailing_181624-2261.jpg?_wi=1"
+          />
+        </SectionErrorBoundary>
+      </div>
+      <div id="cruise-info" data-section="cruise-info">
+        <SectionErrorBoundary name="cruise-info">
+          <FeaturesMinimalCards
+            tag="Cruise Details"
+            title="Your Next Adventure Awaits"
+            description="Our cruises are a great way to socialize, explore, and relax. Here's what you can expect."
+            items={[
+              {
+                title: "Destinations",
+                description: "We organize a variety of day trips and overnight cruises to destinations like Catalina Island, Newport Beach, and local anchorages.",
+              },
+              {
+                title: "Fleet",
+                description: "Cruises are open to both sail and power boats. Don't have a boat? Many captains are happy to take on crew.",
+              },
+              {
+                title: "Social Events",
+                description: "Cruises often include social gatherings, such as potlucks on the beach or dinners at reciprocal yacht clubs.",
+              },
+              {
+                title: "All Skill Levels",
+                description: "Whether you're an experienced cruiser or just starting out, our cruise leaders are there to provide support and guidance.",
+              },
+            ]}
+          />
+        </SectionErrorBoundary>
+      </div>
+      <div id="contact" data-section="contact">
+        <SectionErrorBoundary name="contact">
+          <ContactCta
+            tag="Get Involved"
+            text="Interested in joining a cruise or leading one of your own? Contact our cruise committee."
+            primaryButton={{
+              text: "Contact Cruise Committee",
+              href: "mailto:cruisecommittee@missionbeachyachtclub.com",
+            }}
+          />
+        </SectionErrorBoundary>
+      </div>
+    </>
   );
 }

src/pages/activities/SailingSchoolPage.tsx

@@ -1,14 +1,64 @@
 import HeroSplit from '@/components/sections/hero/HeroSplit';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+import ContactCta from '@/components/sections/contact/ContactCta';
+import FeaturesMinimalCards from '@/components/sections/features/FeaturesMinimalCards';
 
 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"
-      />
-    </div>
+    <>
+      <div id="hero" data-section="hero">
+        <SectionErrorBoundary name="hero">
+          <HeroSplit
+            tag="Sailing School & Seminars"
+            title="Learn to Sail with the Best"
+            description="Our certified instructors offer a comprehensive curriculum for all ages and skill levels. Whether you're stepping onto a boat for the first time or looking to hone your skills, we have a program for you."
+            primaryButton={{
+              text: "View Class Schedule",
+              href: "#",
+            }}
+            imageSrc="http://img.b2bpic.net/free-photo/young-woman-learning-sail-boat_1303-27222.jpg?_wi=1"
+          />
+        </SectionErrorBoundary>
+      </div>
+      <div id="school-info" data-section="school-info">
+        <SectionErrorBoundary name="school-info">
+          <FeaturesMinimalCards
+            tag="Program Details"
+            title="Courses for Every Sailor"
+            description="Our sailing school is dedicated to providing the highest quality instruction in a safe and fun environment."
+            items={[
+              {
+                title: "Youth Sailing",
+                description: "Our summer youth sailing program is a great way for kids to learn the basics of sailing and develop a lifelong love for the sport.",
+              },
+              {
+                title: "Adult Lessons",
+                description: "We offer a range of adult lessons, from introductory courses to advanced racing clinics. Private lessons are also available.",
+              },
+              {
+                title: "Certifications",
+                description: "Earn US Sailing certifications through our accredited courses, allowing you to charter boats around the world.",
+              },
+              {
+                title: "Seminars",
+                description: "Throughout the year, we host seminars on a variety of topics, including navigation, boat maintenance, and racing tactics.",
+              },
+            ]}
+          />
+        </SectionErrorBoundary>
+      </div>
+      <div id="contact" data-section="contact">
+        <SectionErrorBoundary name="contact">
+          <ContactCta
+            tag="Get Involved"
+            text="Ready to start your sailing journey? Contact our sailing director for more information."
+            primaryButton={{
+              text: "Contact Sailing Director",
+              href: "mailto:sailingdirector@missionbeachyachtclub.com",
+            }}
+          />
+        </SectionErrorBoundary>
+      </div>
+    </>
   );
 }

src/pages/activities/WeeklyRegattasPage.tsx

@@ -1,14 +1,68 @@
 import HeroSplit from '@/components/sections/hero/HeroSplit';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+import ContactCta from '@/components/sections/contact/ContactCta';
+import FeaturesMinimalCards from '@/components/sections/features/FeaturesMinimalCards';
 
 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>
+    <>
+      <div id="hero" data-section="hero">
+        <SectionErrorBoundary name="hero">
+          <HeroSplit
+            tag="Weekly Regattas"
+            title="Experience the Thrill of the Race"
+            description="Join us every week for exciting and competitive regattas. Whether you're a seasoned racer or new to the sport, our regattas offer a challenging and rewarding experience."
+            primaryButton={{
+              text: "View Race Schedule",
+              href: "#",
+            }}
+            secondaryButton={{
+              text: "Register Now",
+              href: "#",
+            }}
+            imageSrc="http://img.b2bpic.net/free-photo/sailing-yacht-race-yachting-sailing-regatta_654080-1676.jpg?_wi=1"
+          />
+        </SectionErrorBoundary>
+      </div>
+      <div id="regatta-info" data-section="regatta-info">
+        <SectionErrorBoundary name="regatta-info">
+          <FeaturesMinimalCards
+            tag="Race Details"
+            title="Everything You Need to Know"
+            description="Our weekly regattas are the cornerstone of our club's competitive sailing program. Here are the key details to get you started."
+            items={[
+              {
+                title: "Schedule",
+                description: "Races are held every Saturday, with the first signal at 1:00 PM. Check the club calendar for specific dates and special events.",
+              },
+              {
+                title: "Classes",
+                description: "We welcome a variety of classes, including dinghies, catamarans, and keelboats. Fleets are scored separately.",
+              },
+              {
+                title: "Courses",
+                description: "Courses are set on the day of the race by the race committee, based on wind and weather conditions.",
+              },
+              {
+                title: "Post-Race Social",
+                description: "Join fellow racers at the clubhouse after the event for awards, food, and camaraderie.",
+              },
+            ]}
+          />
+        </SectionErrorBoundary>
+      </div>
+      <div id="contact" data-section="contact">
+        <SectionErrorBoundary name="contact">
+          <ContactCta
+            tag="Get Involved"
+            text="Ready to join the race? Contact our race committee for more information or to volunteer."
+            primaryButton={{
+              text: "Contact Race Committee",
+              href: "mailto:racecommittee@missionbeachyachtclub.com",
+            }}
+          />
+        </SectionErrorBoundary>
+      </div>
+    </>
   );
 }

src/routes.ts

@@ -7,8 +7,8 @@ export interface Route {
 export const routes: Route[] = [
   { path: '/', label: 'Home', pageFile: 'HomePage' },
   { path: '/activities', label: 'Activities', pageFile: 'ActivitiesPage' },
-  { path: '/activities/regattas', label: 'Weekly Regattas', pageFile: 'activities/WeeklyRegattasPage' },
-  { path: '/activities/cruises', label: 'Leisurely Cruises', pageFile: 'activities/LeisurelyCruisesPage' },
-  { path: '/activities/socials', label: 'Club Socials', pageFile: 'activities/ClubSocialsPage' },
-  { path: '/activities/school', label: 'Sailing School', pageFile: 'activities/SailingSchoolPage' },
+  { 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' },
 ];