Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is designed to provide users with a simple and intuitive interface that allows them to toggle between light and dark modes. The default mode is light, featuring a clean and minimalist aesthetic that emphasizes functionality and usability. The app includes a logo that changes according to the selected mode, enhancing the visual experience for users.

## CORE FEATURES
1. **Theme Toggle Button**: A small arrow icon placed within the navigation menu (three horizontal lines) that allows users to switch between light and dark themes seamlessly.
2. **Dynamic Logo**: The application features a logo that changes from a dark version to a light version based on the current theme, ensuring brand consistency and visual clarity.
3. **Responsive Design**: The interface is fully responsive, ensuring usability across various devices, including desktops, tablets, and mobile phones.
4. **User-Friendly Navigation**: A clean navigation menu that allows users to easily access different sections of the application, enhancing overall user experience.
5. **Minimalist Aesthetic**: The design prioritizes whitespace and clean typography, allowing users to focus on content without distractions.

## 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 consists of a top navigation bar with the theme toggle button, followed by a hero section, features display, and a footer with contact information. 

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or Zustand for managing theme state

## IMPLEMENTATION STEPS
1. **Set up the React project**: Create a new React app using Create React App with TypeScript template.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create Theme Context**: Implement a context for managing the theme state, including light and dark modes.
4. **Implement Theme Toggle**: Add the toggle button in the navigation bar that updates the theme context state.
5. **Dynamic Logo Rendering**: Create a component that changes the logo based on the current theme.
6. **Design Layout**: Structure the application layout with a top navigation bar, hero section, features section, and footer.
7. **Styling**: Use Tailwind CSS to style components, ensuring to implement the design specifications, including the primary color and border radius.
8. **Test Responsiveness**: Ensure that the application is responsive and works well on various screen sizes.

## USER EXPERIENCE
Users can easily navigate the application with a clean interface. The theme toggle button allows for quick changes between light and dark modes, with the logo adapting accordingly. The minimalist design ensures that users can focus on the content without unnecessary distractions, providing a smooth and enjoyable user experience.