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

---

🚀 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:

   git clone https://github.com/codedpro/soccer-coach-website.git
   cd soccer-coach-website

2. Install dependencies:

   npm install
   # or
   yarn install

3. Run the development server:

   npm run dev
   # or
   yarn dev

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

---

📁 Project Structure

├── 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
• Tailwind CSS
• EmailJS
• Framer Motion
• Heroicons
• React Hook Form
• Zod