FanCoach Landing Site

A modern, production-ready pre-launch landing site for FanCoach - a mobile-first sports-education app for new and casual fans.

🎯 About FanCoach

FanCoach is designed to help new and casual sports fans understand live games through:

• Real-time explanations during live games (starting with American football)
• Simple "cards" explaining each key play
• Interactive glossary with tap-to-learn definitions
• Chat functionality for deeper breakdowns with diagrams

🎨 Brand & Design

• Colors: Black (#000000), White (#FFFFFF), Teal-Green (#00D4AA)
• Typography: Inter font family
• Style: Sleek, modern, spacious, tech-forward with dark-mode default
• Animations: Subtle hover effects and smooth transitions

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository

   git clone <repository-url>
   cd fancoach-landing
   

2. Install dependencies

   npm install
   

3. Add hero background image

   • Replace public/hero.jpg with your stadium lights background image
   • Recommended dimensions: 1920x1080 or higher

4. Run the development server

   npm run dev
   

5. Open your browser

   • Navigate to http://localhost:3000

📁 Project Structure

fancoach-landing/
├── app/
│   ├── about/
│   │   └── page.tsx          # About page with feature cards
│   ├── privacy/
│   │   └── page.tsx          # Privacy policy page
│   ├── globals.css           # Global styles with Tailwind
│   ├── layout.tsx            # Root layout with metadata
│   └── page.tsx              # Landing page with hero section
├── components/
│   ├── EmailCaptureForm.tsx  # Email signup form
│   ├── Footer.tsx            # Site footer
│   ├── Logo.tsx              # FanCoach logo component
│   └── PrimaryButton.tsx     # Reusable button component
├── public/
│   └── hero.jpg              # Hero background image (placeholder)
└── ...config files

🛠 Built With

• Next.js 14 - React framework with App Router
• TypeScript - Type safety and better developer experience
• Tailwind CSS - Utility-first CSS framework
• Lucide React - Beautiful icons
• Inter Font - Modern typography

📱 Features

Landing Page (/)

• Hero section with blurred stadium background
• Compelling headline: "Understand Every Play. Instantly."
• Email capture form for early access
• Responsive design with mobile-first approach

About Page (/about)

• Three feature cards with icons:
  • Real-Time Cards
  • Beginner Glossary
  • Interactive Chat
• Call-to-action section

Privacy Page (/privacy)

• Placeholder privacy policy content
• Professional layout matching brand design

🎨 Customization

Colors

Update brand colors in tailwind.config.js:

colors: {
  'fancoach-teal': '#00D4AA',
  'fancoach-black': '#000000', 
  'fancoach-white': '#FFFFFF',
}

Content

• Update hero headline in app/page.tsx
• Modify feature descriptions in app/about/page.tsx
• Replace privacy policy content in app/privacy/page.tsx

🚀 Deployment

Build for Production

npm run build
npm start

Deploy to Vercel (Recommended)

1. Push code to GitHub
2. Connect repository to Vercel
3. Deploy automatically on push

Deploy to Other Platforms

The built application can be deployed to any platform that supports Node.js applications.

📧 Email Integration

The email capture form currently simulates submission. To integrate with a real email service:

1. Choose an email service (Mailchimp, ConvertKit, etc.)
2. Update the form handler in components/EmailCaptureForm.tsx
3. Add API routes in app/api/ for server-side processing

🔧 Development

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint

Code Style

• TypeScript for type safety
• ESLint for code quality
• Tailwind CSS for consistent styling
• Component-based architecture

📄 License

This project is proprietary software for FanCoach.

🤝 Contributing

This is a private project. For questions or suggestions, please contact the development team.

---

FanCoach - Understand Every Play. Instantly.