A modern, high-converting website for CourtVision, a volleyball coaching service that provides personalized 1-on-1 film analysis through live Zoom sessions.

• Next.js 14 (App Router)
• React 18 with TypeScript
• Tailwind CSS for styling
• Fully responsive, mobile-first design

CourtVision/
├── app/
│   ├── page.tsx              # Home page
│   ├── coaches/page.tsx      # Meet the coaches
│   ├── testimonials/page.tsx # Success stories
│   ├── how-it-works/page.tsx # Process breakdown
│   ├── contact/page.tsx      # Contact form
│   ├── layout.tsx            # Root layout
│   └── globals.css           # Global styles
├── components/
│   ├── Navbar.tsx
│   ├── Footer.tsx
│   ├── HeroSection.tsx
│   ├── HowItWorksPreview.tsx
│   ├── ValueProps.tsx
│   ├── TestimonialsPreview.tsx
│   ├── CTASection.tsx
│   ├── StepCard.tsx
│   ├── TestimonialCard.tsx
│   ├── CoachCard.tsx
│   └── VideoTestimonial.tsx
└── tailwind.config.ts        # Tailwind configuration

npm install

npm run dev

Open http://localhost:3000 in your browser.

npm run build
npm start

1. Home (/) - Hero, how it works preview, value props, testimonials, CTA
2. Coaches (/coaches) - Coach profiles with credentials
3. Testimonials (/testimonials) - Success stories with stats
4. How It Works (/how-it-works) - Detailed process breakdown with FAQ
5. Contact (/contact) - Lead capture form

• Clean, athletic, modern aesthetic
• Dark slate + bright blue accent color scheme
• Smooth hover animations and transitions
• Mobile-first responsive design
• Conversion-optimized CTAs throughout
• Social proof and trust indicators

• Navbar - Sticky navigation with mobile menu
• Footer - Links and contact info
• HeroSection - High-impact hero with stats
• StepCard - Process step with details
• TestimonialCard - Player quote with result badge
• CoachCard - Coach profile with credentials
• CTASection - Reusable call-to-action block

• Primary Blue: #0EA5E9 (sky-500)
• Dark Background: #0F172A (slate-900)
• Light Background: #F8FAFC (slate-50)

1. Add real images for coaches and testimonials
2. Integrate with a form backend (e.g., Formspree, Basin, or custom API)
3. Add video testimonial functionality
4. Set up analytics (Google Analytics, Plausible, etc.)
5. Deploy to Vercel or similar platform

This project is optimized for deployment on Vercel:

1. Push code to GitHub
2. Import repository in Vercel
3. Deploy automatically

Private project for CourtVision.