refactor: replace About and Contact nav links with How To Play page

app/components/navbar.tsx

@@ -38,12 +38,7 @@ export function Navbar() {
             </NavigationMenuItem>
             <NavigationMenuItem>
               <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
-                <Link to="/about">About</Link>
-              </NavigationMenuLink>
-            </NavigationMenuItem>
-            <NavigationMenuItem>
-              <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
-                <Link to="/contact">Contact</Link>
+                <Link to="/how-to-play">How To Play</Link>
               </NavigationMenuLink>
             </NavigationMenuItem>
           </NavigationMenuList>
@@ -98,18 +93,11 @@ export function Navbar() {
                   Home
                 </Link>
                 <Link
-                  to="/about"
+                  to="/how-to-play"
                   className="block px-4 py-2 text-lg font-medium hover:bg-accent rounded-md transition-colors"
                   onClick={() => setOpen(false)}
                 >
-                  About
-                </Link>
-                <Link
-                  to="/contact"
-                  className="block px-4 py-2 text-lg font-medium hover:bg-accent rounded-md transition-colors"
-                  onClick={() => setOpen(false)}
-                >
-                  Contact
+                  How To Play
                 </Link>
               </nav>
             </SheetContent>

app/routes.ts

@@ -7,4 +7,5 @@ export default [
   route("leagues/:leagueId/settings", "routes/leagues/$leagueId.settings.tsx"),
   route("api/webhooks/clerk", "routes/api/webhooks/clerk.ts"),
   route("user-profile", "routes/user-profile.tsx"),
+  route("how-to-play", "routes/how-to-play.tsx"),
 ] satisfies RouteConfig;

app/routes/how-to-play.tsx

@@ -0,0 +1,169 @@
+export function meta() {
+  return [
+    { title: "How To Play - Brackt" },
+    {
+      name: "description",
+      content:
+        "Learn how to play Brackt and compete in multi-sport fantasy leagues",
+    },
+  ];
+}
+
+export default function HowToPlay() {
+  return (
+    <div className="container mx-auto px-4 py-8 max-w-4xl">
+      <h1 className="text-4xl font-bold mb-8">How To Play</h1>
+
+      <div className="space-y-8">
+        <section>
+          <h2 className="text-2xl font-semibold mb-4">🎯 The Goal</h2>
+          <p className="text-lg text-muted-foreground">
+            Draft teams and athletes across multiple sports and earn points
+            based on how well they perform. The player with the most points at
+            the end of the season wins!
+          </p>
+        </section>
+
+        <section>
+          <h2 className="text-2xl font-semibold mb-4">
+            📋 Building Your Roster
+          </h2>
+          <p className="text-lg text-muted-foreground mb-4">
+            Your roster has spots for different sports. You'll draft teams or
+            individual athletes depending on the sport:
+          </p>
+          <ul className="list-disc list-inside space-y-2 text-muted-foreground ml-4">
+            <li>Each sport has at least one required spot on your roster</li>
+            <li>
+              You'll also get flex spots that can be filled with any sport you
+              choose
+            </li>
+            <li>
+              Pick wisely - you're stuck with your roster for the whole season!
+            </li>
+          </ul>
+        </section>
+
+        <section>
+          <h2 className="text-2xl font-semibold mb-4">🏆 How Scoring Works</h2>
+          <p className="text-lg text-muted-foreground mb-4">
+            Points are awarded based on final standings. The better your pick
+            finishes, the more points you earn:
+          </p>
+          <div className="bg-muted p-6 rounded-lg space-y-2">
+            <div className="flex justify-between items-center">
+              <span className="font-semibold">🥇 1st Place</span>
+              <span className="text-xl font-bold">80 points</span>
+            </div>
+            <div className="flex justify-between items-center">
+              <span className="font-semibold">🥈 2nd Place</span>
+              <span className="text-xl font-bold">50 points</span>
+            </div>
+            <div className="flex justify-between items-center">
+              <span className="font-semibold">🥉 3rd-4th Place</span>
+              <span className="text-xl font-bold">30 points</span>
+            </div>
+            <div className="flex justify-between items-center">
+              <span className="font-semibold">5th-8th Place</span>
+              <span className="text-xl font-bold">20 points</span>
+            </div>
+          </div>
+          <p className="text-sm text-muted-foreground mt-4 italic">
+            Note: If nobody drafted a team that finishes in the top 8, those
+            points aren't awarded to anyone.
+          </p>
+        </section>
+
+        <section>
+          <h2 className="text-2xl font-semibold mb-4">
+            ⛳ Special Scoring for Golf & Tennis
+          </h2>
+          <p className="text-lg text-muted-foreground mb-4">
+            Golf and tennis work a bit differently since they have multiple
+            major tournaments:
+          </p>
+          <ul className="list-disc list-inside space-y-2 text-muted-foreground ml-4">
+            <li>
+              Players earn qualifying points at each major tournament throughout
+              the year
+            </li>
+            <li>
+              After all majors are complete, we add up everyone's qualifying
+              points
+            </li>
+            <li>
+              The top 8 players by total qualifying points then earn the regular
+              scoring points (80, 50, 30, 20)
+            </li>
+            <li>This rewards consistency across all the major tournaments!</li>
+          </ul>
+        </section>
+
+        <section>
+          <h2 className="text-2xl font-semibold mb-4">🎲 The Draft</h2>
+          <p className="text-lg text-muted-foreground mb-4">
+            Before the season starts, you'll participate in a snake draft:
+          </p>
+          <ul className="list-disc list-inside space-y-2 text-muted-foreground ml-4">
+            <li>
+              <strong>Snake draft</strong> means the order reverses each round
+              (if you pick last in round 1, you pick first in round 2)
+            </li>
+            <li>You'll have a time limit to make each pick</li>
+            <li>
+              Once you draft a team or athlete, they're yours for the entire
+              season
+            </li>
+            <li>No trading picks or players - choose carefully!</li>
+          </ul>
+        </section>
+
+        <section>
+          <h2 className="text-2xl font-semibold mb-4">📅 During the Season</h2>
+          <p className="text-lg text-muted-foreground mb-4">
+            Once the season starts, it's all about watching your picks compete:
+          </p>
+          <ul className="list-disc list-inside space-y-2 text-muted-foreground ml-4">
+            <li>No trades - your roster is locked in</li>
+            <li>No waivers or free agent pickups</li>
+            <li>Just sit back and cheer for your teams and athletes!</li>
+          </ul>
+        </section>
+
+        <section className="bg-primary/5 p-6 rounded-lg border border-primary/20">
+          <h2 className="text-2xl font-semibold mb-4">💡 Quick Tips</h2>
+          <ul className="space-y-2 text-muted-foreground">
+            <li>
+              ✓ <strong>Diversify:</strong> Don't put all your eggs in one
+              basket - spread your picks across different sports
+            </li>
+            <li>
+              ✓ <strong>Know the format:</strong> Some sports score based on
+              playoffs, others on regular season performance
+            </li>
+            <li>
+              ✓ <strong>Draft early:</strong> The best teams and athletes go
+              fast!
+            </li>
+            <li>
+              ✓ <strong>Have fun:</strong> This is about enjoying sports across
+              the calendar year
+            </li>
+          </ul>
+        </section>
+
+        <section className="text-center pt-8">
+          <p className="text-xl text-muted-foreground mb-6">
+            Ready to compete?
+          </p>
+          <a
+            href="/leagues/new"
+            className="inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground shadow hover:bg-primary/90 h-11 px-8 text-base"
+          >
+            Create a League
+          </a>
+        </section>
+      </div>
+    </div>
+  );
+}