Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a modern link in bio site designed as a landing page that allows users to consolidate their online presence. The site will serve as a simple, one-page platform where users can share multiple links through a clean and minimalist interface, enhancing user engagement and click-through rates.

## CORE FEATURES
1. **Customizable Links**: Users can add, edit, and remove links, each with customizable titles and icons to enhance aesthetic appeal.
2. **Profile Section**: A dedicated area for users to display their profile picture and a short bio, enhancing personalization.
3. **Analytics Dashboard**: Basic analytics to track link clicks and user engagement metrics, providing insights into performance.
4. **Social Media Integration**: Options to link and display various social media profiles, allowing for seamless navigation from one platform to another.
5. **QR Code Generation**: Automatic generation of a QR code for users to share their link page easily in physical formats or other digital spaces.
6. **Responsive Design**: Fully responsive layout that ensures functionality across all devices, including mobile and tablet.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - The design will emphasize a clean and simple approach, incorporating plenty of white space to create a spacious feel. The layout will prioritize typography, ensuring that text is easy to read and visually appealing.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure readability and comfort for users browsing the site.
- **Layout**: A single-column layout that features a hero section at the top, followed by the profile section, links section, and footer with contact information. The main content will be centered with ample margins to enhance clarity.
- **Typography**: Use a sans-serif font like Inter or Roboto for clean readability, with larger headings (H1, H2) for the main sections and smaller text for links and descriptions.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for robust type-checking and component management.
- **Styling**: Tailwind CSS for utility-first styling that can quickly adapt to the minimalist design requirements.
- **UI Components**: Utilize shadcn/ui for reusable UI components that align with the minimalist aesthetic.
- **State Management**: Use React's built-in state management for simplicity, with the potential for Context API if global state management is needed.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript support.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui components, configuring Tailwind for custom styles.
3. **Create Components**:
   - Hero Section: Implement a prominent hero section with a catchy tagline and call-to-action button.
   - Profile Section: Design a user profile component that displays the avatar and bio.
   - Link List Component: Create a dynamic component for adding and displaying links.
   - Footer: Implement a footer with contact information and social links.
4. **Implement Routing**: Set up React Router for any potential future expansions, ensuring smooth navigation.
5. **Integrate Analytics**: Set up basic analytics tracking for link clicks using a lightweight analytics service.
6. **Testing & Optimization**: Conduct thorough testing across devices to ensure responsiveness and user experience.

## USER EXPERIENCE
Users will be greeted by a visually appealing hero section that invites them to explore the links. The profile section will add a personal touch, while the link list will provide easy navigation to various online destinations. Each link will be clearly labeled, and users will receive feedback when they interact with components, such as confirming link additions or edits. The responsive design will ensure a seamless experience across all devices, making it easy for users to share their link page with others.