Music Learning Platform

A modern, interactive music education platform built with Next.js, React, TypeScript, and Tailwind CSS. Explore featured courses, webinars, and connect with experienced instructors.

Features

✨ Responsive Design - Mobile-first approach with seamless experience across all devices
🎓 Featured Courses - Showcase of premium music courses with detailed information
🎤 Webinar Management - Integrated webinar section for live and recorded sessions
👥 Instructor Profiles - Display instructor avatars with interactive tooltips
🎨 Modern UI Components - Custom card hover effects and animated elements
🌊 Animated Backgrounds - Wavy and gradient background effects for visual appeal
⚡ Fast Performance - Built with Next.js 15 and optimized with Turbopack
♿ Accessible - Semantic HTML and WCAG-compliant components

Tech Stack

• Framework: Next.js 15 with App Router
• Language: TypeScript
• Styling: Tailwind CSS 4
• UI Effects: Framer Motion
• Build Tool: Turbopack (Next.js bundler)
• Package Manager: npm

Project Structure

src/
├── app/                          # Next.js app directory
│   ├── layout.tsx               # Root layout component
│   ├── page.tsx                 # Home page
│   ├── globals.css              # Global styles
│   ├── contact/                 # Contact page
│   ├── courses/                 # Courses page
│   └── ...
├── components/                   # React components
│   ├── Navbar.tsx               # Navigation component
│   ├── HeroSection.tsx          # Hero banner
│   ├── FeaturedCourses.tsx      # Courses showcase
│   ├── FeaturedWebinars.tsx     # Webinars section
│   ├── Instructor*.tsx          # Instructor components
│   ├── MovingCards.tsx          # Animated cards
│   ├── Footer.tsx               # Footer component
│   └── ui/                      # Reusable UI components
│       ├── card-hover-effect.tsx
│       ├── moving-border.tsx
│       ├── infinite-moving-cards.tsx
│       ├── sticky-scroll-reveal.tsx
│       ├── wavy-background.tsx
│       └── ...
├── data/                        # Static data and content
│   └── music_courses.json       # Course data
├── lib/                         # Utility functions and helpers
│   └── utils.ts
├── utils/                       # Common utilities
│   ├── cn.ts                   # CSS class merge utility
│   └── interpolate.mjs         # Animation helpers
├── package.json                 # Dependencies and scripts
├── tsconfig.json               # TypeScript configuration
├── tailwind.config.js          # Tailwind CSS configuration
├── next.config.ts              # Next.js configuration
└── postcss.config.mjs          # PostCSS configuration

Getting Started

Prerequisites

• Node.js >= 18.0.0
• npm, yarn, or pnpm

Installation

# Clone the repository
git clone <repository-url>

# Navigate to the project directory
cd musicnextjs

# Install dependencies
npm install

Development

# Run development server with Turbopack
npm run dev

# The application will be available at http://localhost:3000

Building for Production

# Build the project
npm run build

# Start production server
npm start

Linting

# Run ESLint
npm run lint

Clean Build

# Remove .next directory
npm run clean

Available Routes

• / - Home page with hero section and featured courses
• /courses - All music courses listing
• /contact - Contact information and form
• /webinars - Featured webinars and upcoming sessions

Key Components

Navbar (Navbar.tsx)

Navigation component with responsive menu support.

Hero Section (HeroSection.tsx)

Eye-catching landing section with CTA buttons.

Featured Courses (FeaturedCourses.tsx)

Displays premium music courses with card hover effects.

Featured Webinars (FeaturedWebinars.tsx)

Showcases webinar content with registration options.

Instructor Avatars (InstructorAvatarsWithTooltip.tsx)

Displays instructor profiles with interactive tooltips.

Custom UI Components

Located in src/components/ui/:

• Card Hover Effect - Interactive card animations
• Moving Border - Animated border effects
• Infinite Moving Cards - Carousel with continuous scroll
• Sticky Scroll Reveal - Content reveal on scroll
• Wavy Background - SVG-based wave animations
• Spotlight - Spotlight effect component

Styling

This project uses Tailwind CSS v4 with custom configuration:

• Custom color palette
• Responsive breakpoints
• Animation utilities
• Custom font configurations

Edit tailwind.config.js to customize the design system.

Content Management

Music Courses Data

Course information is stored in src/data/music_courses.json:

{
  "courses": [
    {
      "id": 1,
      "title": "Course Title",
      "description": "Course description",
      "price": 99,
      "instructor": "Instructor Name",
      "..."
    }
  ]
}

Update this file to add or modify course listings.

Deployment

Vercel (Recommended)

The easiest way to deploy is using Vercel:

1. Push your code to GitHub
2. Import the repository in Vercel
3. Configure environment variables if needed
4. Deploy!

Vercel will automatically:

• Install dependencies
• Run build process
• Deploy to production
• Provide automatic previews for pull requests

Manual Deployment

# Build the project
npm run build

# Start production server locally
npm start

Deploy the built output to your hosting provider.

Environment Variables

Create a .env.local file in the root directory if needed:

# Add your environment variables here
NEXT_PUBLIC_API_URL=https://api.example.com

Performance Optimization

• ✅ Image optimization with Next.js Image component
• ✅ Font optimization with next/font
• ✅ Code splitting and lazy loading
• ✅ CSS-in-JS with Tailwind for minimal CSS bundles
• ✅ Turbopack for fast builds

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is open source and available under the MIT License.

Support

For questions or issues, please reach out through:

• Contact page: /contact
• Email: contact@musicplatform.com
• GitHub Issues: [Project Issues]

---

Built with ❤️ using Next.js and Tailwind CSS