Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to showcase a dynamic funnel visualization. Users will interact with the funnel to see specific values highlighted through smooth animations, creating an engaging experience. The funnel will fill dynamically from bottom to top as the user accesses the page, enhancing the visual appeal and interactivity.

## CORE FEATURES
1. **Dynamic Funnel Visualization**: A visually interactive funnel that allows users to click on different segments to highlight associated values.
2. **Smooth Animation**: An animation effect that simulates the filling of the funnel from bottom to top as the page loads, providing a visually engaging experience.
3. **Highlighting Functionality**: When a user clicks on a segment of the funnel, the corresponding values are emphasized, enhancing user understanding and engagement.
4. **Responsive Design**: The application will adapt seamlessly to different screen sizes, ensuring usability on both desktop and mobile devices.
5. **Minimalist Aesthetic**: The design will prioritize clarity and simplicity, with ample white space and a cohesive color scheme.

## 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 main layout will include a central funnel visualization with ample margins, a header section for the title, and an informational footer. The funnel will be the focal point of the page, with clear calls to action and space for user interaction.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API (for managing user interactions and funnel states)

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript using Create React App. Install Tailwind CSS and shadcn/ui for styling and UI components.
2. **Create Funnel Component**: Build a `Funnel` component that contains the SVG representation of the funnel. Define segments as clickable areas that change state on interaction.
3. **Implement Animation**: Use CSS keyframes or a JavaScript animation library to create the fill animation effect that runs when the component mounts.
4. **Add Highlighting Logic**: Integrate state management to highlight the specific funnel segment and display associated values upon user click.
5. **Design Layout**: Structure the layout using Tailwind CSS classes to ensure it aligns with the minimalist design approach. Include a header and footer for context.
6. **Testing and Optimization**: Test the application across different devices and browsers to ensure responsiveness and smooth animations. Optimize performance as needed.

## USER EXPERIENCE
Users will land on a clean, minimalistic page featuring the dynamic funnel. As they enter the page, the funnel will animate from bottom to top, creating an engaging entry point. When users click on different segments of the funnel, the corresponding values will be highlighted, providing immediate feedback and enhancing their understanding of the data presented. The overall experience will be intuitive and visually appealing, encouraging exploration and interaction.