Page Title: Junior A Girls – Volleyball
Design Style:
- Theme: Dark mode
- Background Color: #121212
- Accent Color: #008080 (teal)
- Text Color: White (#FFFFFF) for headings, Light Grey (#CCCCCC) for body text
- Font: Montserrat (bold for headings, regular for body text)
- Animations: Subtle hover and entrance effects for interactivity
Header:
- Use the existing NAGAS website header (logo and navigation menu).
Layout:
1. Back Button:
- Placement: Top-left corner
- Style: Teal-bordered button with arrow icon
- Text: "← Back to Volleyball Teams"
- Href: `href="/volleyball"`
2. Search Bar:
- Placement: Below back button, above player grid
- Style: Dark input field with teal border
- Placeholder: "Search players by name..."
- Implementation:
```html
<input type="text" class="search-bar" placeholder="<followup encodedFollowup="%7B%22id%22%3A%22b1c4069f-2d7f-4c66-95da-b8b8d6a141fd%22%2C%22snippet%22%3A%22Search%20players%20by%20name%22%2C%22question%22%…
Design Style:
- Theme: Dark mode
- Background Color: #121212
- Accent Color: #008080 (teal)
- Text Color: White (#FFFFFF) for headings, Light Grey (#CCCCCC) for body text
- Font: Montserrat (bold for headings, regular for body text)
Header:
- Use the existing NAGAS website header (logo, navigation menu, styles).
Layout:
1. Introduction Section:
- Title: "Welcome to NAGAS Basketball" (36pt, bold, white, centered)
- Subtitle: "Where skill, teamwork, and determination shine" (16pt, light grey, centered)
- Brief introduction (2-3 sentences, 16pt, light grey, centered, max-width: 800px):
"Our basketball program is built on fundamentals, sportsmanship, and a passion for the game. From junior development to competitive senior teams, we strive for excellence on and off the court. Join us in celebrating the spirit of basketball!"
2. Achievements Section:
- Title: "Our Basketball Achievements" (28pt, bold, white, centered)
- Subtitle: "Celebrating success on and off the co…
Change all instance of track & field to cross country
Design Style:
- Theme: Dark mode
- Background Color: #121212
- Accent Color: #008080 (teal)
- Text Color: White (#FFFFFF) for headings, Light Grey (#CCCCCC) for body text
- Font: Montserrat (bold for headings, regular for body text)
Header:
- Use the existing NAGAS website header (logo, navigation menu, styles).
Layout:
1. Introduction Section:
- Title: "Welcome to NAGAS Football" (36pt, bold, white, centered)
- Subtitle: "Where passion, skill, and teamwork come together" (16pt, light grey, centered)
- Brief introduction (2-3 sentences, 16pt, light grey, centered, max-width: 800px):
"Our football program is built on the values of sportsmanship, discipline, and teamwork. From junior to senior levels, we develop well-rounded athletes who excel both on and off the pitch. Join us in celebrating the beautiful game!"
2. Achievements Section:
- Title: "Our Football Achievements" (28pt, bold, white, centered)
- Subtitle: "Celebrating excellence on and off the pitch" (14p…
Design Style:
- Theme: Dark mode
- Background Color: #121212
- Accent Color: #008080 (teal)
- Text Color: White (#FFFFFF) for headings, Light Grey (#CCCCCC) for body text
- Font: Montserrat (bold for headings, regular for body text)
Header:
- Use the existing NAGAS website header (logo, navigation menu, styles).
Layout:
1. Introduction Section:
- Title: "Welcome to NAGAS Volleyball" (36pt, bold, white, centered)
- Subtitle: "Where teamwork, skill, and passion meet" (16pt, light grey, centered)
- Brief introduction (2-3 sentences, 16pt, light grey, centered, max-width: 800px):
"Our volleyball program develops technical skills, teamwork, and leadership for athletes of all levels. From junior to senior teams, we foster a love for the game and a commitment to excellence. Join us on the court!"
2. Achievements Section:
- Title: "Our Volleyball Achievements" (28pt, bold, white, centered)
- Subtitle: "Celebrating excellence on and off the court" (14pt, light grey, cente…
Design Style:
- Theme: Dark mode
- Background Color: #121212
- Accent Color: #008080 (teal)
- Text Color: White (#FFFFFF) for headings, Light Grey (#CCCCCC) for body text
- Font: Montserrat (bold for headings, regular for body text)
Header:
- Use the existing NAGAS website header (logo, navigation menu, styles).
Layout:
1. Introduction Section:
- Title: "Welcome to NAGAS Volleyball" (36pt, bold, white, centered)
- Subtitle: "Where teamwork, skill, and passion meet" (16pt, light grey, centered)
- Brief introduction (2-3 sentences, 16pt, light grey, centered, max-width: 800px):
"Our volleyball program focuses on developing technical skills, fostering teamwork, and building character. From junior to senior levels, we empower athletes to excel on the court and grow as leaders. Join us in celebrating the spirit of volleyball!"
2. Achievements Section:
- Title: "Our Volleyball Achievements" (28pt, bold, white, centered)
- Subtitle: "Celebrating excellence on and off th…
Design Style:
- Theme: Dark mode
- Background Color: #121212
- Accent Color: #008080 (teal)
- Text Color: White (#FFFFFF) for headings, Light Grey (#CCCCCC) for body text
- Font: Montserrat (bold for headings, regular for body text)
Header:
- Use the existing NAGAS website header (logo, navigation menu, styles).
Layout:
1. Introduction Section:
- Title: "Welcome to NAGAS Volleyball" (36pt, bold, white, centered)
- Subtitle: "Where teamwork, skill, and passion meet" (16pt, light grey, centered)
- Brief introduction (2-3 sentences, 16pt, light grey, centered, max-width: 800px):
"Our volleyball program focuses on developing technical skills, fostering teamwork, and building character. From junior to senior levels, we empower athletes to excel on the court and grow as leaders. Join us in celebrating the spirit of volleyball!"
2. Achievements Section:
- Title: "Our Volleyball Achievements" (28pt, bold, white, centered)
- Subtitle: "Celebrating excellence on and off th…
Design Style:
- Theme: Dark mode
- Background Color: #121212
- Accent Color: #008080 (teal)
- Text Color: White (#FFFFFF) for headings, Light Grey (#CCCCCC) for subtitles
- Font: Montserrat (bold for headings, regular for body text)
Layout:
- Create a 2-column grid of player cards (responsive: 1 column on mobile).
- Player Card Design:
- Background: #1E1E1E
- Border: 1px solid #008080
- Rounded Corners: 6px
- Padding: 16px
- Hover Effect: Lift card by 5px, change box-shadow to 0 6px 12px rgba(0, 128, 128, 0.3)
- Each card should include:
- Player photo (high-quality, square, top-aligned)
- Large jersey number (32pt, bold, teal, centered)
- Player name (18pt, white, centered below the number)
Content:
- Page Title: "[Team Name]" (36pt, bold, white, centered at the top)
- Back Button: Teal icon in the top-left corner (links to Team Selection Page)
- Player Cards:
- Example players (replace with actual data):
- #12, John Doe
- #24, Jane Smith
- #07,…
Design Style:
- Theme: Dark mode
- Background Color: #121212
- Accent Color: #008080
- Text Color: White (#FFFFFF) for headings, Light Grey (#CCCCCC) for subtitles
- Font: Montserrat (bold for headings, regular for body text)
Layout:
- Create a 2-column grid of 8 rectangular tiles (4 rows x 2 columns).
- Tile Design:
- Background: #1E1E1E
- Border: 1px solid #008080
- Rounded Corners: 6px
- Padding: 20px
- Hover Effect: Lift tile by 5px, change box-shadow to 0 6px 12px rgba(0, 128, 128, 0.3)
- Each tile should include:
- A custom icon (e.g., basketball, volleyball) at the top (white with teal outline).
- Team name in bold white text (18pt) centered below the icon.
Content:
- Page Title: "NAGAS Teams" (36pt, bold, white, centered at the top)
- Subtitle: "Select a team to view players" (16pt, light grey, centered below the title)
- Team Tiles:
- Junior A Boys (basketball icon)
- Junior B Boys (basketball icon)
- Junior A Girls (volleyball icon)
- Junior B Gi…
Design Style:
- Theme: Dark mode
- Background Color: #121212
- Accent Color: #008080
- Text Color: White (#FFFFFF) for headings, Light Grey (#CCCCCC) for subtitles
- Font: Montserrat (bold for headings, regular for body text)
Layout:
- Create a 2-column grid of 8 rectangular tiles (4 rows x 2 columns).
- Tile Design:
- Background: #1E1E1E
- Border: 1px solid #008080
- Rounded Corners: 6px
- Padding: 20px
- Hover Effect: Lift tile by 5px, change box-shadow to 0 6px 12px rgba(0, 128, 128, 0.3)
- Each tile should include:
- A custom icon (e.g., basketball, volleyball) at the top (white with teal outline).
- Team name in bold white text (18pt) centered below the icon.
Content:
- Page Title: "NAGAS Teams" (36pt, bold, white, centered at the top)
- Subtitle: "Select a team to view players" (16pt, light grey, centered below the title)
- Team Tiles:
- Junior A Boys (basketball icon)
- Junior B Boys (basketball icon)
- Junior A Girls (volleyball icon)
- Junior B Gi…
- **Initial Load**:
* Team headers: 0.5s fade-in with 0.2s delay
* Player rows: 0.4s fade-in with 0.1s stagger
* Filter bar: 0.3s slide-down
- **Filtering**:
* Remove rows: 0.3s fade-out with 0.1s height collapse
* Add rows: 0.4s fade-in with 0.2s slide-up
* Search matches: 0.3s background flash (#2a3c3c)
- **Interactions**:
* Row hover: 0.3s transform and shadow change
* Filter changes: 0.5s cross-fade between states
* Mobile tap: 0.2s scale transform (98%)
**7. TEAM ORGANIZATION (Sequential)**
1. Senior Female A (11 players)
2. Senior Female B (11 players)
3. Senior Male A (11 players)
4. Senior Male B (11 players)
5. Junior Female A (11 players)
6. Junior Female B (11 players)
7. Junior Male A (11 players)
8. Junior Male B (11 players)
- **Spacing**: 40px between team sections
- **Transition**: 0.5s smooth scroll to first matching player
