Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The FYCK.BIO web application allows users to create their own personalized landing pages, similar to e-z.bio. Users can customize backgrounds, add music, describe themselves, and include links. Additionally, a feedback system enables visitors to rate the user's profile, fostering engagement and interactivity.

## CORE FEATURES
1. **Customizable Backgrounds**: Users can select or upload their own background images and colors to personalize their profile.
2. **Music Integration**: Users can add background music to their page, enhancing the overall experience for visitors.
3. **Profile Description**: A section where users can write a brief description about themselves, allowing for personal expression.
4. **Link Management**: Users can easily add and manage multiple links to their social media, websites, or other relevant pages.
5. **Feedback System**: An optional feature that allows visitors to rate the user's page on a star scale, providing valuable feedback.
6. **Dynamic Site Name**: The application will feature an engaging mechanism to dynamically change the site's name, adding a unique touch for each user.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design with a focus on clean layouts, ample white space, and a cohesive color palette.
- **Color Mode**: Light theme with dark text on light backgrounds for optimal readability and a contemporary feel.
- **Layout**: The main layout will consist of a hero section at the top for the user’s name and background, followed by sections for music, description, links, and feedback. Each section will be clearly defined with sufficient padding and margins for a spacious look.
- **Typography**: Use a modern sans-serif font for headings and a slightly different sans-serif for body text to create a clear hierarchy. Headings should be bold and larger, while body text remains legible and comfortable to read.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for a robust and scalable application.
- **Styling**: Tailwind CSS for utility-first styling, ensuring a fast and responsive design process.
- **UI Components**: Utilize shadcn/ui for pre-built and customizable components that align with the minimalist aesthetic.
- **State Management**: Use React’s built-in state management or a library like Zustand for managing global state.

## IMPLEMENTATION STEPS
1. **Set up React App**: Initialize a new React project with TypeScript.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to the project.
3. **Create Components**: Develop components for the hero section, customizable backgrounds, music player, description, links, and feedback system.
4. **Implement State Management**: Set up state management for user inputs, background customization, and feedback ratings.
5. **Design Layout**: Use Tailwind CSS classes to create a responsive layout adhering to the specified design principles.
6. **Test Features**: Ensure all functionalities, including music integration and feedback, work as intended across devices.

## USER EXPERIENCE
Users will start by signing up and creating their profile. They can customize their background and upload music. The intuitive interface guides them through adding descriptions and links, with real-time previews of their changes. Visitors to their profile will experience an engaging layout, with options to rate the page, providing users with immediate feedback about their personal site. The overall flow is designed to be seamless, encouraging users to explore and personalize their experience with ease.