Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to allow users to customize and view graphical data over various time intervals. Users can select data ranges such as the last three months, last month, last week, or daily views. The application focuses on providing an intuitive and streamlined experience for analyzing data trends.

## CORE FEATURES
1. **Time Interval Selector**: Users can easily switch between different time intervals (last 3 months, last month, last week, daily) to view relevant data.
2. **Dynamic Graph Updates**: The application will update the displayed graph dynamically based on the selected time interval, providing real-time insights.
3. **Data Visualization**: Present the data in a clear and engaging graphical format, ensuring that trends are easily identifiable.
4. **User-Friendly Interface**: A minimalist design ensures that users can navigate and interact with the application without distractions.
5. **Responsive Design**: The application will be fully responsive, ensuring a seamless experience across all devices.

## 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 feature a header with the time interval selector, a central area for displaying the graph, and a footer with additional information or links.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or a lightweight state management solution if 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 for styling and UI components.
3. **Create Basic Structure**: Set up the main components: Header, Graph, and Footer.
4. **Implement Time Interval Selector**: Develop the dropdown or toggle component for time interval selection.
5. **Graph Component**: Integrate a charting library (e.g., Chart.js or Recharts) to visualize the data.
6. **Connect Data**: Fetch and manage data based on the selected time interval using a state management solution.
7. **Styling**: Apply Tailwind CSS classes to achieve the minimalist design and responsive layout.
8. **Testing**: Ensure that the application is fully functional across different devices and screen sizes.

## USER EXPERIENCE
Users will start by selecting a time interval from the header. The graph will refresh automatically to display the relevant data for the selected interval. They can easily switch between intervals without losing context, allowing for quick comparisons and insights. The minimalist design ensures that users focus on the data without unnecessary distractions. The application will be fully responsive, providing a consistent experience whether accessed on a desktop or mobile device.