tscb-site/.opencode/tscb-regional-pages-implementation-plan.md

# Texas Scholastic Cricket Board - Regional Pages Implementation Plan

## Context
The TSCB website currently has a homepage (index.html) and about page (about.html) with TSCB-specific content. The contact page exists but uses a template. I need to create:
1. Updated Contact page with TSCB-specific contact information
2. Dallas Regionals main page with regional overview
3. Austin Regionals main page with regional overview  
4. Dallas Teams page showing 9 Dallas teams
5. Austin Teams page showing 9 Austin teams
6. Blank league status/rankings page (placeholder)

All pages must use the existing CSS theme (custom.css), HTML boilerplate structure, and maintain the professional student-led sports federation writing style found in index.html and about.html.

## Theme Specifications
- **Color Scheme**: Black (#000000), Accent Red (#d92800), Secondary Gold (#ce9c5b)
- **Font**: Fira Sans Condensed
- **CSS**: custom.css (all existing classes and styles)
- **Structure**: Header with sticky navbar, page header with breadcrumb, content sections, footer
- **Animations**: Wow.js fadeInUp animations with data-wow-delay attributes
- **Buttons**: btn-default, btn-highlighted classes
- **Images**: Use existing images folder or create placeholders

## Subtasks

### Phase 1: Contact Page Enhancement
- [ ] **Update contact.html title and meta** - Change from "Avenix - Church HTML Template" to "TSCB - Contact Us"
- [ ] **Update contact page header** - Modify hero section with TSCB branding and breadcrumb navigation
- [ ] **Update contact information** - Replace placeholder contact info with:
  - Email: texasscholasticcricketboard@gmail.com
  - Phone: (+1) (945) 900-1148
  - Add detailed contact form with well-written explanatory text
- [ ] **Add contact form** - Create functional-looking form with TSCB-specific messaging
- [ ] **Add map/embed section** - Placeholder for Texas map showing Dallas/Austin regions

### Phase 2: Dallas Regionals Pages
- [ ] **Create dallas.html** - Main Dallas Regionals page with:
  - Page header with breadcrumb navigation
  - Hero section: "Dallas Regionals" with descriptive text about connecting Plano, Frisco, Prosper, Irving schools
  - About section: Write compelling text in TSCB style about Dallas cricket community
  - Teams overview section: Brief intro to the 9 Dallas teams
  - Placeholder cricket match images (use existing cricket.png, match.png, or create placeholders)
  - Footer with standard TSCB footer
- [ ] **Create dallas-teams.html** - Teams listing page with:
  - Page header: "Dallas Teams"
  - Introduction text about Dallas cricket teams
  - Team grid layout (3x3 or responsive grid) with:
    - Team logo placeholders (use generic sports logos or create placeholders)
    - Team names (need to create 9 plausible high school cricket team names)
    - Brief descriptions
  - Placeholder team photos
  - Standard footer

### Phase 3: Austin Regionals Pages
- [ ] **Create austin.html** - Main Austin Regionals page with:
  - Page header with breadcrumb navigation
  - Hero section: "Austin Regionals" with text about Leander, Round Rock, Cedar Park, West Lake Hills schools
  - About section: Write Austin-specific content in TSCB style
  - Teams overview section
  - Placeholder cricket images
  - Standard footer
- [ ] **Create austin-teams.html** - Teams listing page with:
  - Page header: "Austin Teams"
  - Introduction text about Austin cricket teams
  - Team grid layout for 9 Austin teams
  - Team logo placeholders
  - Team names (create 9 Austin-area high school cricket team names)
  - Placeholder team photos
  - Standard footer

### Phase 4: League Status Placeholder
- [ ] **Create league-status.html** - Blank/placeholder page with:
  - Page header: "League Status" or "Rankings & Matches"
  - Brief intro text explaining this page will show live standings
  - Empty table/grid structure (no data)
  - Note: "Coming Soon - Live league statistics and rankings"
  - Standard footer

### Phase 5: Navigation Updates
- [ ] **Update index.html navigation** - Change Dallas/Austin submenu items to point to new pages:
  - Dallas Regionals dropdown → link to dallas.html
  - Austin Regionals dropdown → link to austin.html
  - Remove existing template pages (service-single.html, blog.html, etc.) from dropdowns
- [ ] **Update about.html navigation** - Same navigation updates as index.html
- [ ] **Update all footers** - Ensure footer links point to correct new pages

### Phase 6: Content Writing (TSCB Style)
- [ ] **Write Contact page content** - Professional, welcoming text about reaching out to TSCB
- [ ] **Write Dallas Regionals content** - Focus on Dallas metroplex cricket community, schools involved
- [ ] **Write Austin Regionals content** - Focus on Austin-area schools and cricket growth
- [ ] **Write team descriptions** - Brief 1-2 sentence descriptions for each team
- [ ] **Maintain consistent voice** - Student-led, competitive, community-focused, professional

### Phase 7: Git Commits
- [ ] **Commit contact page updates** - Short, descriptive commit message
- [ ] **Commit Dallas Regionals page** - Separate commit for dallas.html
- [ ] **Commit Dallas Teams page** - Separate commit for dallas-teams.html
- [ ] **Commit Austin Regionals page** - Separate commit for austin.html
- [ ] **Commit Austin Teams page** - Separate commit for austin-teams.html
- [ ] **Commit league status placeholder** - Separate commit
- [ ] **Commit navigation updates** - Separate commit for all nav changes
- [ ] **Final verification commit** - Ensure all pages work together

### Phase 8: Quality Assurance
- [ ] **Verify all links work** - Check navigation between all new pages
- [ ] **Check responsive design** - Ensure pages look good on mobile/desktop
- [ ] **Verify CSS consistency** - All pages use existing custom.css
- [ ] **Check image placeholders** - Ensure all images load or have proper placeholders
- [ ] **Test footer consistency** - All pages have working footer links

## Writing Style Guide (TSCB Voice)

**Tone**: Professional, community-focused, student-leadership oriented, passionate

**Key Phrases to Use**:
- "Student-led"
- "Competitive cricket"
- "Free access / No barrier to entry"
- "Statewide connection"
- "Building community"
- "Next generation of cricketers"
- "Educational sport"

**Example Writing Style** (from index.html):
> "The first and only student-led high school federation in Texas"
> "Connecting schools in the Dallas metroplex through matches"
> "Our mission is to connect high schools across regions, support the growth of new programs, and work with partner organizations that believe in educational sport."

**Do Not Use**:
- Corporate/marketing language
- Overly formal academic tone
- Generic sports clichés

## Content Notes

**Dallas Regionals**:
- Schools: Plano, Frisco, Prosper, Irving
- 9 teams total
- Focus: Metroplex connectivity, competitive growth

**Austin Regionals**:
- Schools: Leander, Round Rock, Cedar Park, West Lake Hills
- 9 teams total
- Focus: Austin-area cricket expansion, student leadership

**Contact Information**:
- Email: texasscholasticcricketboard@gmail.com
- Phone: (+1) (945) 900-1148
- Tagline: "Reach out to our student-led board"

## Execution Workflow Recommendation

**Recommended Approach**:
1. **Start with Contact Page** - Update existing contact.html (easiest win, establishes pattern)
2. **Create Dallas Regionals** - Build dallas.html first, then dallas-teams.html (related pages together)
3. **Create Austin Regionals** - Mirror Dallas structure for consistency (austin.html, austin-teams.html)
4. **Create League Status** - Simple placeholder page
5. **Update Navigation** - Finally update all headers/footers to link to new pages
6. **Git Commits** - Commit after each page is complete (6-8 total commits)

**Git Commit Message Style**:
- Major changes: "feat: add dallas regionals main page with overview and cricket imagery"
- Minor changes: "style: update contact page with TSCB branding and contact info"
- Navigation: "nav: update dropdown menus to point to new regional pages"

## Theme Consistency Checklist

**HTML Structure**:
- [ ] Same DOCTYPE and HTML5 boilerplate
- [ ] Same meta tags (charset, viewport, description)
- [ ] Same CSS includes (bootstrap, custom, animate, swiper, etc.)
- [ ] Same JS includes at bottom (jquery, bootstrap, wow, etc.)

**Header**:
- [ ] Sticky navbar with logo
- [ ] Navigation menu (Home, About, Regionals dropdown, Contact, Partners)
- [ ] "Our Partners" highlighted button

**Footer**:
- [ ] Logo and age text
- [ ] Quick links section
- [ ] Cricket links section (Dallas, Austin, Cricclubs)
- [ ] Contact information
- [ ] Copyright text
- [ ] Social media links

**Content Sections**:
- [ ] Page header with breadcrumb (for inner pages)
- [ ] Section titles with h3 and h2/text-anime-style-2 classes
- [ ] wow fadeInUp animations with data-wow-delay
- [ ] Bootstrap grid system (col-lg-*, col-md-*)
- [ ] Image containers with image-anime class
- [ ] Button styling (btn-default, btn-highlighted)

**Images**:
- [ ] Use images/ folder for all assets
- [ ] Follow aspect ratios from existing pages
- [ ] Include alt text for accessibility
- [ ] Use placeholder images where needed

## Open Questions (To Clarify During Implementation)

1. **Team Names**: Should I create fictional high school cricket team names, or do you have actual team names to use?
2. **Team Logos**: Should I use placeholder sports logos, or do you have actual team logos to incorporate?
3. **Dallas Teams**: Should I list specific schools (Plano East, Frisco Lone Star, etc.) or create team names?
4. **Austin Teams**: Similarly, should I use actual Austin-area schools or create team names?
5. **League Status Page**: Should I create an empty table structure, or just a "Coming Soon" message?
6. **Contact Form**: Should the contact form actually submit somewhere, or just be a visual placeholder?
7. **Image Placeholders**: Would you like me to use the existing cricket.png and match.png images, or create new placeholder images?

## Success Criteria

- All pages follow the exact same HTML structure and CSS classes as index.html and about.html
- Content is written in the established TSCB voice (student-led, competitive, community-focused)
- All navigation links work correctly between pages
- Git commits are frequent, descriptive, and follow conventional commit style
- All images either use existing assets or have proper placeholder text
- Responsive design works on mobile and desktop
- No custom CSS added (all styling from existing custom.css)