# Parsa - Progressive Rock Songwriter Website

A modern, interactive website showcasing a progressive rock composer and producer's work. Built with Next.js, TypeScript, and Tailwind CSS.

## Features

- **Artist Biography**: Beautiful introduction page with social media links
- **Album Showcase**: Grid display of albums with hover effects and multiple actions
  - Play preview button
  - View album details button
  - Add to cart button
  - Direct purchase button
- **Album Detail Page**: Dedicated page for each album featuring:
  - Full track list with durations
  - Album information and description
  - Total album duration and track count
  - Play, purchase, and add to cart actions
  - Dynamic routing (/album/[id])
- **Shopping Cart System**:
  - Add multiple albums to cart
  - Persistent cart stored in localStorage
  - Cart sidebar with smooth animations
  - Item count badge on header cart icon
  - Remove items from cart
  - Checkout from cart
- **Music Player**: Interactive player with:
  - 30-second preview mode for non-purchased albums
  - Full playback for purchased albums
  - Track list navigation
  - Play/pause controls
  - Progress bar (seekable for purchased albums)
- **Payment System**:
  - Card payment form with validation
  - Transaction receipt generation
  - Purchase history stored in localStorage
  - Receipt download functionality
- **Sample Album**: Muse - Showbiz album included with all 12 tracks:
  - Sunburn, Muscle Museum, Fillip, Falling Down, Cave, Showbiz
  - Unintended, Uno, Sober, Escape, Overdue, Hate This & I'll Love You
- **Responsive Design**: Works on all screen sizes
- **Bluish Theme**: Custom color palette with cyan and orange accents
- **Smooth Animations**: Using Framer Motion for polished interactions

## Getting Started

### Prerequisites

- Node.js 18+
- npm or yarn

### Installation

1. Clone the repository
2. Install dependencies:

```bash
npm install
```

3. Run the development server:

```bash
npm run dev
```

4. Open [http://localhost:3000](http://localhost:3000) in your browser

## Project Structure

```
parsa/
├── app/
│   ├── album/
│   │   └── [id]/
│   │       └── page.tsx    # Album detail page (dynamic route)
│   ├── layout.tsx          # Root layout with CartProvider
│   ├── page.tsx            # Main page with state management
│   └── globals.css         # Global styles and Tailwind
├── components/
│   ├── Header.tsx          # Navigation header with cart icon
│   ├── Biography.tsx       # Artist bio section
│   ├── AlbumCard.tsx       # Album card with navigation & cart actions
│   ├── AlbumShowcase.tsx   # Album grid display
│   ├── MusicPlayer.tsx     # Music player with controls
│   ├── PaymentModal.tsx    # Payment form modal
│   ├── PurchaseSuccessModal.tsx  # Receipt display
│   └── CartSidebar.tsx     # Shopping cart sidebar
├── lib/
│   ├── types.ts            # TypeScript interfaces
│   ├── data.ts             # Album and artist data (includes Showbiz)
│   └── CartContext.tsx     # Cart state management context
└── public/
    └── audio/              # Audio files directory
```

## Adding Audio Files

1. Place your audio files in `/public/audio/`
2. Preview files should be 30-second clips
3. Update the URLs in `lib/data.ts` to match your file names:

```typescript
previewUrl: "/audio/preview-1.mp3",
fullUrl: "/audio/echoes-1-full.mp3"
```

## Adding Album Cover Images

1. Place album cover images in `/public/albums/`
2. Update the `coverImage` path in `lib/data.ts`:

```typescript
coverImage: "/albums/echoes-of-time.jpg"
```

## Customization

### Color Theme

Edit `tailwind.config.ts` to customize colors:

```typescript
colors: {
  primary: { /* bluish palette */ },
  accent: {
    orange: '#ff6b35',
    cyan: '#00d9ff',
  },
}
```

### Artist Information

Edit `lib/data.ts`:

```typescript
export const artistBio = {
  name: "Your Name",
  title: "Your Title",
  bio: "Your bio...",
  // ...
}
```

### Albums

Add or modify albums in `lib/data.ts`:

```typescript
export const albums: Album[] = [
  {
    id: "album-id",
    title: "Album Title",
    // ...
  }
]
```

## Features in Detail

### Shopping Cart

- **Add to Cart**: Click the shopping cart icon on any album card to add it to your cart
- **Cart Sidebar**: Click the cart icon in the header to view your cart
- **Persistent Storage**: Cart items are saved in localStorage and persist across sessions
- **Checkout**: Purchase all items in cart with a single checkout process
- **Item Count Badge**: See the number of items in your cart at a glance

### Album Detail Pages

- **Direct Links**: Click the info icon on album cards or navigate to `/album/[album-id]`
- **Full Track List**: View all songs with their durations
- **Album Stats**: See total duration and track count
- **Multiple Actions**: Play preview, purchase directly, or add to cart
- **Back Navigation**: Easy navigation back to the main albums page

### Preview vs Full Access

- **Preview Mode**: Users can listen to 30-second previews of each track
- **Full Access**: After purchase, users get unlimited playback with seeking controls

### Purchase System

- **Multiple Purchase Options**: Buy directly from album card, detail page, or cart
- Mock payment system (no real transactions)
- Stores purchase data in browser localStorage
- Generates downloadable transaction receipts
- Automatically unlocks full album playback
- Purchased albums are marked with "Owned" badge

### Responsive Design

- Mobile-first approach
- Adapts to tablet and desktop screens
- Touch-friendly controls

## Build for Production

```bash
npm run build
npm start
```

## Technologies Used

- **Next.js 15**: React framework with App Router
- **TypeScript**: Type-safe development
- **Tailwind CSS**: Utility-first CSS framework
- **Framer Motion**: Animation library
- **React Icons**: Icon components

## Notes

- This is a demo payment system - no real charges are processed
- Audio files are not included - add your own MP3 files
- Album covers are placeholders - replace with actual images
- Purchase data is stored locally in the browser

## License

MIT

## Author

Built for Parsa - Progressive Rock Composer & Producer