added clubs page to list local soccer groups around CLE, still a wip

[KateStoll]

Added a club's page that has fake data for now. We can add real teams later. to see the page you have to go to whatever the local host is /clubs

Summary by CodeRabbit

New Features

• Added a Local Soccer Clubs page featuring neighborhood information, play times, and direct links to club details for easy discovery.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

A new Astro page for displaying local soccer clubs is introduced at src/pages/clubs.astro. The page exports metadata (title and description), uses a Base layout, and renders static content including a header, descriptive text, and two example club cards with neighborhood information, play times, and links.

Changes

Cohort / File(s)	Change Summary
New Clubs Page src/pages/clubs.astro	Introduces a new public Astro page with exported meta object (title, description) and static UI content displaying local soccer clubs with neighborhood, play times, and link placeholders using Base layout composition.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Verify meta object structure aligns with Base layout expectations
• Confirm club card UI follows design patterns consistent with other pages
• Check that placeholder links and content are intentional or marked for completion

Poem

🐰 A new field for soccer dreams, where bunnies in their gear,
Chase balls 'cross verdant meadows, bringing teams and neighbors near!
The clubs page hops to life today, with neighborhoods and times,
Connecting fuzzy footballers through timely, helpful lines. ⚽✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main change: adding a clubs page for local soccer groups in Cleveland. It's specific and directly related to the changeset shown in the file summary.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch clubs-page

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/pages/clubs.astro (1)

18-31: Consider extracting club cards to a reusable component when adding real data.

The current static structure works well for placeholder content. When you replace this with real club data, consider refactoring to a data-driven approach with a reusable ClubCard component.

Example refactor for future consideration:

---
const clubs = [
  {
    name: "Example FC",
    neighborhood: "Ohio City",
    schedule: "Sundays at 2pm",
    link: "https://...",
    linkText: "Website"
  },
  // ... more clubs
];
---

<div class="space-y-6">
  {clubs.map(club => (
    <div class="bg-white rounded-md p-5 shadow-sm">
      <h2 class="text-xl font-semibold">{club.name}</h2>
      <p>Neighborhood: {club.neighborhood}</p>
      <p>Plays: {club.schedule}</p>
      <a href={club.link} class="text-red-600 underline">{club.linkText}</a>
    </div>
  ))}
</div>

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1b32b57 and 62f4cd8.

📒 Files selected for processing (1)

• src/pages/clubs.astro (1 hunks)

🔇 Additional comments (2)

src/pages/clubs.astro (2)

1-8: LGTM! Clean frontmatter setup.

The import and meta export follow standard Astro conventions. The metadata values are appropriate for the page purpose.

---

10-16: Code structure and layout usage are correct.

The meta object properly provides title and description properties that are spread into the Base layout component. Base.astro correctly expects and uses these props for page metadata. The Tailwind classes and semantic HTML hierarchy are appropriate for this page layout.