Lashon Music Website

A modern, responsive website for artist Lashon, built with Next.js, TypeScript, and Tailwind CSS.

Features

Home Page

• Hero section with dynamic slideshow featuring Lashon in various settings
• "Miami-Born • New York-Trained • Ready to Rise" tagline
• Featured release section showcasing "Moolah"
• About teaser with call-to-action to learn more

About Page

• Page header with striking image
• Story section detailing Lashon's journey from MVP athlete to musician
• Quote section with inspirational message
• Visual elements including performance and studio shots

Music Page

• Discography section featuring released tracks
• Interactive music player with streaming links
• Cover art display
• Track information and release dates

Gallery Page

• Responsive photo grid layout
• Lightbox feature for enlarged image viewing
• Collection of professional photos including:
  • Performance shots
  • Studio sessions
  • Promotional photography

Contact Page

• Contact form for inquiries
• Social media links
• Professional booking information

Technology Stack

• Framework: Next.js 14
• Language: TypeScript
• Styling: Tailwind CSS
• Animations: Framer Motion
• Icons: Heroicons & React Icons
• Fonts:
  • Montserrat (headings)
  • Open Sans (body text)

Getting Started

1. Clone the repository:

git clone https://github.com/yourusername/lashon-next.git

2. Install dependencies:

cd lashon-next
npm install

3. Start the development server:

npm run dev

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

Project Structure

src/
├── app/                # Next.js app router pages
├── components/         # React components
│   ├── about/         # About page components
│   ├── contact/       # Contact page components
│   ├── gallery/       # Gallery page components
│   ├── home/          # Home page components
│   ├── layout/        # Layout components
│   ├── music/         # Music page components
│   └── shared/        # Shared components
├── data/              # Static data and configuration
└── styles/            # Global styles and Tailwind config

Design System

• Colors:

  • Deep Emerald Green & Gold (accents)
  • Black and Charcoal Gray (backgrounds)
  • White/Off-White (text and contrast)

• Typography:

  • Headings: Montserrat (bold, clean sans-serif)
  • Body: Open Sans (neutral sans-serif)

• Components:

  • Consistent button styles
  • Animated transitions
  • Responsive navigation
  • Mobile-friendly layouts

Contributing

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Open a pull request

License

This project is private and proprietary. All rights reserved.