Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves redesigning a web application UI with a modern glassmorphism aesthetic. The main purpose is to create a visually appealing and functional interface that enhances user engagement through a clean, minimalist design while ensuring high readability and usability.

## CORE FEATURES
1. **Glassmorphism Cards**: Semi-transparent cards with a blurred background for content display, providing a floating effect.
2. **Navigation Bar**: A transparent navigation bar with a strong background blur, featuring clear links to primary sections of the app.
3. **Modals**: Pop-up modals with a soft blur effect that maintains readability while displaying important information or forms.
4. **Responsive Design**: A layout that adapts seamlessly to different screen sizes, ensuring usability across devices.
5. **User Interaction Feedback**: Subtle animations and hover effects on buttons and links to enhance interactivity and user experience.
6. **Contact Section**: A dedicated area for users to get in touch or provide feedback, designed with the glassmorphism aesthetic.

## 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**: A structured layout featuring a hero section at the top, followed by core features, user testimonials, and a contact section, all using a consistent glassmorphism style with clear visual hierarchy.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Use React Context for managing global state if needed.

## IMPLEMENTATION STEPS
1. **Set up React with TypeScript**: Create a new React application using Create React App with TypeScript template.
2. **Install Tailwind CSS**: Follow the Tailwind CSS installation guide to integrate it into your project.
3. **Install shadcn/ui**: Add shadcn/ui to your project for UI components that support the glassmorphism aesthetic.
4. **Create Layout Components**: Develop the main layout structure including the navigation bar, hero section, feature cards, and contact section.
5. **Implement Glassmorphism Style**: Apply the specified glassmorphism styles to cards, modals, and navigation bars using Tailwind CSS classes.
6. **Add Responsive Design**: Ensure all components are responsive by using Tailwind's responsive utilities.
7. **Test Interactivity**: Implement hover and click effects on buttons and links to provide feedback to users.
8. **Deploy the Application**: Use a platform like Vercel or Netlify to deploy your application for public access.

## USER EXPERIENCE
Users will interact with the application through a transparent navigation bar that smoothly transitions between different sections. The glassmorphism cards will allow for a visually appealing display of content while maintaining readability. Users will be able to view modals for additional information or forms without losing context, thanks to the background blur. The overall design will ensure that all text remains legible against blurred backgrounds, enhancing the user experience in a clean and modern interface.