Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page that presents an animated timeline focused on the artist d4vd, similar to the aesthetic and functionality of Apple’s website. The goal is to create an engaging and visually appealing experience that highlights d4vd's journey, music, and milestones in a clean, minimalist design.

## CORE FEATURES
1. **Hero Section**: An eye-catching introduction with an animated background that showcases d4vd’s latest work and a prominent call-to-action (CTA) button encouraging users to explore further.
2. **Timeline Animation**: A smooth scrolling timeline that visually represents key events and milestones in d4vd's career, allowing users to interactively explore his journey.
3. **Featured Music Section**: A dedicated area highlighting selected tracks or albums, complete with audio playback and links to streaming platforms.
4. **About Section**: A brief biography of d4vd, presented in a clean layout with engaging typography and visuals.
5. **Contact Form**: A simple contact form for inquiries, allowing fans and collaborators to reach out easily.
6. **Social Media Links**: Icons linking to d4vd's various social media profiles, encouraging users to connect and follow.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds.
- **Primary Color**: #1978E5 (accent for buttons, links, highlights).
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements.
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs.
- **Layout**: The layout will be structured in a single-page format, with sections clearly defined for the hero area, timeline, featured music, about, contact, and social media links. Each section will utilize ample white space to enhance readability and visual impact.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS for utility-first styling.
- **UI Components**: Utilize shadcn/ui for pre-designed components.
- **State Management**: React's built-in state management or Context API as needed.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS along with shadcn/ui components.
2. **Create Layout Structure**: Define the main layout using a combination of React functional components for each section (Hero, Timeline, Music, About, Contact, Social Media).
3. **Implement Hero Section**: Design the hero section with an engaging background animation and prominent CTA button.
4. **Develop Timeline Animation**: Create a timeline component that responds to scroll events, animating key milestones smoothly.
5. **Build Featured Music Section**: Integrate audio playback functionality and links to streaming platforms for featured tracks.
6. **Design About Section**: Write and format d4vd's biography, ensuring it complements the overall design.
7. **Set Up Contact Form**: Implement a simple contact form with validation and submission handling.
8. **Add Social Media Links**: Include icons that link to d4vd's social media profiles, styled to match the design.
9. **Testing and Responsiveness**: Ensure the site is fully responsive across devices and thoroughly test all interactive elements.

## USER EXPERIENCE
The user experience will focus on intuitive navigation and engaging interactions. Users will be greeted with an animated hero section that draws them in, followed by a seamless scroll through the timeline that highlights d4vd's career. Each section will be accessible via a sticky navigation menu, allowing users to jump to their desired content quickly. The contact form will be straightforward, ensuring users can easily send inquiries. Overall, the site will maintain a clean aesthetic, prioritizing user engagement and ease of use.