Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is a marketing tools directory designed to help users discover, save, and access exclusive discounts on their favorite marketing platforms. Users can sign up for a premium plan to enjoy personalized features, including saving tools, creating a Tools Stack, and unlocking exclusive deals. The app’s motto is "Discover. Save. Get exclusive deals."

## CORE FEATURES
1. **Directory of Tools**: A comprehensive listing of marketing tools with filter options to help users easily discover the tools they need.
2. **User Authentication**: Secure sign-up and login functionality for users to access their personalized dashboard.
3. **Favorites Management**: Users can save their preferred tools to a favorites list for quick access.
4. **Tools Stack Creation**: Customizable feature allowing users to build and manage their own collection of tools tailored to their marketing needs.
5. **Exclusive Deals Access**: Users with a premium plan can unlock special discounts and offers on selected marketing tools.
6. **User Dashboard**: A personalized area for users to view their saved tools, manage their Tools Stack, and access exclusive deals.

## DESIGN SPECIFICATIONS
- **Visual Style**: Bold design featuring a dark background to enhance the vibrancy of titles and elements. Use of gradients for titles transitioning from #020AAC to #FF003F, with white text for high contrast and readability.
- **Color Mode**: Dark theme with a focus on vibrant gradients and white text for clear visibility.
- **Layout**: 
  - **Header**: Includes the app logo and navigation links (Home, About, Pricing).
  - **Main Section**: Features the tools directory with a prominent filter option at the top.
  - **Footer**: Contains links to terms of service, privacy policy, and contact information.
- **Typography**: Use bold, modern fonts for headings and simple sans-serif fonts for body text to maintain clarity and focus.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for responsive design and ease of styling.
- **UI Components**: shadcn/ui for pre-built components to enhance the development process.
- **State Management**: React Query for data fetching and cache management, if needed.
- **Database**: Supabase for authentication, real-time database operations, and storage of user data and tools.
- **Backend**: Supabase Edge Functions for handling server-side logic and API endpoints.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and install necessary dependencies (Tailwind CSS, Supabase, etc.).
2. **User Authentication**: Implement Supabase authentication for user sign-up and login functionalities.
3. **Directory Structure**: Create components for the tools directory, including filter options and display cards for each tool.
4. **Favorites and Tools Stack**: Develop functionality to allow users to save tools and manage their Tools Stack.
5. **Exclusive Deals Section**: Integrate a section that displays available exclusive deals based on the user’s subscription level.
6. **User Dashboard**: Design and implement the user dashboard to provide a personalized experience, showcasing saved tools and tools stack.
7. **Testing**: Conduct thorough testing of all functionalities, focusing on user interactions and overall experience.

## USER EXPERIENCE
Users will navigate to the homepage where they can explore a well-organized directory of marketing tools. They can use the filtering options to quickly find what they need. Upon signing up for a premium account, users can save tools to their favorites and create a personalized Tools Stack. They will also have access to exclusive discounts highlighted on their dashboard. The overall experience is designed to be straightforward, visually appealing, and efficient, encouraging users to engage with the platform regularly.