https://github.com/codedpro/soccer-coach-website
Soccer Coach Website – A modern landing page for personal coaches, academies, or sports instructors. Built with Next.js 14, Tailwind CSS, and interactive animations to elevate your coaching brand.
https://github.com/codedpro/soccer-coach-website
coach-website coaching-platform emailjs framer-motion landing-page nextjs personal-branding react react-hook-form soccer sports tailwindcss typescript zod
Last synced: 19 days ago
JSON representation
Soccer Coach Website – A modern landing page for personal coaches, academies, or sports instructors. Built with Next.js 14, Tailwind CSS, and interactive animations to elevate your coaching brand.
- Host: GitHub
- URL: https://github.com/codedpro/soccer-coach-website
- Owner: codedpro
- Created: 2025-05-16T14:27:19.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-05-19T11:16:20.000Z (11 months ago)
- Last Synced: 2026-04-08T20:46:30.495Z (19 days ago)
- Topics: coach-website, coaching-platform, emailjs, framer-motion, landing-page, nextjs, personal-branding, react, react-hook-form, soccer, sports, tailwindcss, typescript, zod
- Language: TypeScript
- Homepage: https://soccer-coach-website.vercel.app/
- Size: 14.6 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Soccer Coach Website ⚽
**Soccer Coach Website** is a professional, modern landing page tailored for personal coaches, soccer instructors, or training academies. It's designed to promote your coaching services, showcase testimonials, and enable easy contact through email — all in a responsive, stylish layout.
🌐 Live Preview: [soccer-coach-website.vercel.app](https://soccer-coach-website.vercel.app/)
---
## 🚀 Features
* **Hero Section**: Grab attention with a high-impact headline and CTA.
* **About & Services**: Introduce your coaching style, methodology, and training packages.
* **Testimonials**: Build trust with quotes from happy players or parents.
* **Contact Form**: Direct integration with EmailJS for easy inquiries.
* **Mobile-First Design**: Fully responsive and fast on all devices.
* **Smooth Animations**: Framer Motion brings life to the layout with engaging transitions.
---
## 🛠️ Tech Stack
* **Framework**: Next.js 14.1.0
* **Language**: TypeScript
* **Styling**: Tailwind CSS 3.3.0
* **UI Components**: Headless UI, Heroicons
* **Forms**: React Hook Form, Zod, @hookform/resolvers
* **Email Handling**: EmailJS Browser SDK
* **Animations**: Framer Motion
* **Utilities**: React Intersection Observer
---
## 📦 Installation
1. **Clone the repository**:
```bash
git clone https://github.com/codedpro/soccer-coach-website.git
cd soccer-coach-website
```
2. **Install dependencies**:
```bash
npm install
# or
yarn install
```
3. **Run the development server**:
```bash
npm run dev
# or
yarn dev
```
Open [http://localhost:3000](http://localhost:3000) in your browser.
---
## 📁 Project Structure
```bash
├── components/ # Reusable UI sections (Navbar, Hero, Testimonials, etc.)
├── pages/ # Next.js pages (Home, API routes)
├── public/ # Static images and assets
├── styles/ # Tailwind + global styles
├── utils/ # Form validation and helpers
├── types/ # TypeScript type definitions
├── tailwind.config.js # Tailwind CSS configuration
└── package.json # Project metadata and scripts
```
---
## 🧪 Scripts
* `npm run dev` – Launch development server
* `npm run build` – Build the app for production
* `npm run start` – Start the production server
* `npm run lint` – Run linter for code checks
---
## 🙌 Acknowledgments
* [Next.js](https://nextjs.org/)
* [Tailwind CSS](https://tailwindcss.com/)
* [EmailJS](https://www.emailjs.com/)
* [Framer Motion](https://www.framer.com/motion/)
* [Heroicons](https://heroicons.com/)
* [React Hook Form](https://react-hook-form.com/)
* [Zod](https://zod.dev/)