From e77625b627f648fae4a92ee1f2344922c09c699e Mon Sep 17 00:00:00 2001 From: Chris Parsons Date: Sun, 12 Oct 2025 16:42:15 -0700 Subject: [PATCH] refactor: replace About and Contact nav links with How To Play page --- app/components/navbar.tsx | 18 +--- app/routes.ts | 1 + app/routes/how-to-play.tsx | 169 +++++++++++++++++++++++++++++++++++++ 3 files changed, 173 insertions(+), 15 deletions(-) create mode 100644 app/routes/how-to-play.tsx diff --git a/app/components/navbar.tsx b/app/components/navbar.tsx index 828a72e..39f25e6 100644 --- a/app/components/navbar.tsx +++ b/app/components/navbar.tsx @@ -38,12 +38,7 @@ export function Navbar() { - About - - - - - Contact + How To Play @@ -98,18 +93,11 @@ export function Navbar() { Home setOpen(false)} > - About - - setOpen(false)} - > - Contact + How To Play diff --git a/app/routes.ts b/app/routes.ts index 239c752..10d1fe0 100644 --- a/app/routes.ts +++ b/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; diff --git a/app/routes/how-to-play.tsx b/app/routes/how-to-play.tsx new file mode 100644 index 0000000..b792e37 --- /dev/null +++ b/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 ( +
+

How To Play

+ +
+
+

🎯 The Goal

+

+ 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! +

+
+ +
+

+ 📋 Building Your Roster +

+

+ Your roster has spots for different sports. You'll draft teams or + individual athletes depending on the sport: +

+
    +
  • Each sport has at least one required spot on your roster
    • +
  • + You'll also get flex spots that can be filled with any sport you + choose +
    • +
  • + Pick wisely - you're stuck with your roster for the whole season! +
    • +
+
+ +
+

🏆 How Scoring Works

+

+ Points are awarded based on final standings. The better your pick + finishes, the more points you earn: +

+
+
+ 🥇 1st Place + 80 points +
+
+ 🥈 2nd Place + 50 points +
+
+ 🥉 3rd-4th Place + 30 points +
+
+ 5th-8th Place + 20 points +
+
+

+ Note: If nobody drafted a team that finishes in the top 8, those + points aren't awarded to anyone. +

+
+ +
+

+ ⛳ Special Scoring for Golf & Tennis +

+

+ Golf and tennis work a bit differently since they have multiple + major tournaments: +

+
    +
  • + Players earn qualifying points at each major tournament throughout + the year +
    • +
  • + After all majors are complete, we add up everyone's qualifying + points +
    • +
  • + The top 8 players by total qualifying points then earn the regular + scoring points (80, 50, 30, 20) +
    • +
  • This rewards consistency across all the major tournaments!
    • +
+
+ +
+

🎲 The Draft

+

+ Before the season starts, you'll participate in a snake draft: +

+
    +
  • + Snake draft means the order reverses each round + (if you pick last in round 1, you pick first in round 2) +
    • +
  • You'll have a time limit to make each pick
    • +
  • + Once you draft a team or athlete, they're yours for the entire + season +
    • +
  • No trading picks or players - choose carefully!
    • +
+
+ +
+

📅 During the Season

+

+ Once the season starts, it's all about watching your picks compete: +

+
    +
  • No trades - your roster is locked in
    • +
  • No waivers or free agent pickups
    • +
  • Just sit back and cheer for your teams and athletes!
    • +
+
+ +
+

💡 Quick Tips

+
    +
  • + ✓ Diversify: Don't put all your eggs in one + basket - spread your picks across different sports +
    • +
  • + ✓ Know the format: Some sports score based on + playoffs, others on regular season performance +
    • +
  • + ✓ Draft early: The best teams and athletes go + fast! +
    • +
  • + ✓ Have fun: This is about enjoying sports across + the calendar year +
    • +
+
+ +
+

+ Ready to compete? +

+ + Create a League + +
+
+
+ ); +}