Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Royal Names is a web application designed for users to generate stylish names using a sleek, minimalist interface. It allows users to input text and receive a range of creatively styled fonts, showcasing a card-like layout with smooth UI and UX animations. The application is mobile-first but mimics a desktop experience, ensuring accessibility across various devices.

## CORE FEATURES
1. **Stylish Name Generation**: Users can type text into the input field to generate between 100-1000 stylish font variations, enhancing creativity and expression.
2. **Card Layout**: Each generated name is displayed in a visually appealing card format, allowing easy browsing and selection.
3. **One-click Copy**: Users can quickly copy their desired stylish name to the clipboard with a single click, improving usability.
4. **Sorting and Filtering**: The generated names can be sorted from most stylish to least, helping users find their preferred options efficiently.
5. **Responsive Design**: The application is designed to be fully responsive, providing an optimal experience on mobile, tablet, and desktop devices.
6. **Footer with Attribution**: Includes a footer that credits the creator with a clickable link to their portfolio.

## DESIGN SPECIFICATIONS
- **Visual Style**: The application adopts a minimalist aesthetic with a clean, simple design that emphasizes ample white space and a focus on typography.
- **Color Mode**: A light theme with dark text on light backgrounds creates a fresh and inviting user experience.
- **Layout**: The main layout features a centered input area at the top, followed by a grid of cards showcasing the generated names. Each card has a glassy effect, with bold colors subtly integrated.
- **Typography**: Utilize a sans-serif font for body text for readability, while a more stylized font can be used for headings to enhance the creative aspect. Font sizes should follow a clear hierarchy for emphasis.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for utility-first styling
- **UI Components**: Utilize shadcn/ui for modern and elegant components
- **State Management**: React's built-in state management or Context API, depending on complexity

## IMPLEMENTATION STEPS
1. **Set up the React project**: Use Create React App with TypeScript template.
   ```bash
   npx create-react-app royal-names --template typescript
   ```
2. **Install Tailwind CSS**: Follow the Tailwind CSS installation guide for React.
   ```bash
   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init -p
   ```
   Configure the `tailwind.config.js` to include paths to your components.
3. **Create the main components**:
   - Input component for text entry.
   - Card component for displaying stylish names.
   - Footer component for attribution.
4. **Implement state management**: Set up state for user input and generated names using React hooks.
5. **Design the layout**: Utilize Tailwind CSS classes to create a responsive grid layout for cards and style the input area.
6. **Add copy-to-clipboard functionality**: Use the Clipboard API to handle copying text with one-click interactions.
7. **Test responsiveness and animations**: Ensure smooth transitions and animations during interactions.
8. **Deploy the application**: Use a platform like Vercel or Netlify for hosting.

## USER EXPERIENCE
Users will arrive at a clean landing page with a prominent input field at the top. As they type, stylish names will be generated and displayed in a visually appealing card format below. They can scroll through the options, click on a card to copy the name directly to their clipboard, and easily sort through the names based on their preferences. The footer will provide a seamless way to access the creator's portfolio, enhancing the overall experience. Careful attention to animation and transitions will ensure a smooth user interaction throughout the application.