Merge version_10_1778310114789 into main

Merge version_10_1778310114789 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/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/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,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?_wi=2",
         },
         {
           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",
         },
       ]}
     />

src/pages/activities/ClubSocialsPage.tsx

@@ -0,0 +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">
+        <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

@@ -0,0 +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">
+        <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

@@ -0,0 +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">
+        <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

@@ -0,0 +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">
+        <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

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