Lovable Prompt Creator - AI Prompt Generator

PROJECT SETUP
Initialize a new React project with TypeScript using Create React App. Organize the project structure as follows:

```
/my-robux-app
|-- /public
|-- /src
    |-- /components
        |-- Hero.tsx
        |-- Features.tsx
        |-- Testimonials.tsx
        |-- ContactForm.tsx
    |-- /styles
        |-- index.css
    |-- App.tsx
    |-- index.tsx
```

In the `components` directory, each component will represent a key section of the application. The `styles` directory will contain any global styles, including Tailwind CSS configurations.

DESIGN REQUIREMENTS
- 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

CORE COMPONENTS
1. **Hero**: Displays the main tagline and call-to-action button, inviting users to start generating Robux.
2. **Features**: Lists the core features of the app and explains how it works.
3. **Testimonials**: Shows fictitious testimonials to build trust and encourage engagement.
4. **ContactForm**: A simple form for user feedback, including fields for name, email, and message.

IMPLEMENTATION APPROACH
1. **Install Dependencies**: Run the following commands to install Tailwind CSS and shadcn/ui:
   ```
   npm install tailwindcss postcss autoprefixer
   npx tailwindcss init -p
   ```
   Configure `tailwind.config.js` to include paths for content:
   ```javascript
   module.exports = {
     content: ['./src/**/*.{js,jsx,ts,tsx}'],
     theme: {
       extend: {},
     },
     plugins: [],
   }
   ```

2. **Hero Component**:
   ```tsx
   // src/components/Hero.tsx
   import React from 'react';

   const Hero: React.FC = () => {
     return (
       <div className="flex flex-col items-center justify-center h-screen bg-white">
         <h1 className="text-4xl font-bold text-gray-800">Generate Your Robux</h1>
         <button className="mt-4 bg-[#1978E5] text-white px-6 py-2 rounded-[8px]">Start Gifting</button>
       </div>
     );
   }

   export default Hero;
   ```

3. **Features Component**:
   ```tsx
   // src/components/Features.tsx
   import React from 'react';

   const Features: React.FC = () => {
     return (
       <section className="py-10 bg-white">
         <h2 className="text-3xl font-bold text-gray-800">How It Works</h2>
         <p className="text-gray-600">Our application allows you to simulate the gifting of Robux in a fun and engaging way!</p>
       </section>
     );
   }

   export default Features;
   ```

4. **Testimonials Component**:
   ```tsx
   // src/components/Testimonials.tsx
   import React from 'react';

   const Testimonials: React.FC = () => {
     return (
       <section className="py-10 bg-white">
         <h2 className="text-3xl font-bold text-gray-800">What Our Users Say</h2>
         <p className="text-gray-600">"This app is amazing! I love gifting Robux to my friends!" - Happy User</p>
       </section>
     );
   }

   export default Testimonials;
   ```

5. **Contact Form Component**:
   ```tsx
   // src/components/ContactForm.tsx
   import React, { useState } from 'react';

   const ContactForm: React.FC = () => {
     const [name, setName] = useState('');
     const [email, setEmail] = useState('');
     const [message, setMessage] = useState('');

     const handleSubmit = (e: React.FormEvent) => {
       e.preventDefault();
       // Handle form submission
     };

     return (
       <form className="py-10 bg-white">
         <h2 className="text-3xl font-bold text-gray-800">Contact Us</h2>
         <input type="text" placeholder="Your Name" className="border rounded-[8px] p-2 mt-2 w-full" value={name} onChange={e => setName(e.target.value)} />
         <input type="email" placeholder="Your Email" className="border rounded-[8px] p-2 mt-2 w-full" value={email} onChange={e => setEmail(e.target.value)} />
         <textarea placeholder="Your Message" className="border rounded-[8px] p-2 mt-2 w-full" value={message} onChange={e => setMessage(e.target.value)} />
         <button type="submit" className="mt-4 bg-[#1978E5] text-white px-6 py-2 rounded-[8px]">Send</button>
       </form>
     );
   }

   export default ContactForm;
   ```

6. **App Component**:
   ```tsx
   // src/App.tsx
   import React from 'react';
   import Hero from './components/Hero';
   import Features from './components/Features';
   import Testimonials from './components/Testimonials';
   import ContactForm from './components/ContactForm';

   const App: React.FC = () => {
     return (
       <div>
         <Hero />
         <Features />
         <Testimonials />
         <ContactForm />
       </div>
     );
   };

   export default App;
   ```

ARCHITECTURE CONSIDERATIONS
The application will follow a component-based architecture, utilizing functional components and hooks for state management. Each component will be responsible for its own UI and behavior, promoting reusability and separation of concerns.

ERROR HANDLING
For the contact form, implement basic validation to ensure that all fields are filled before submission. Consider adding error messages to inform users when fields are invalid.

TESTING STRATEGY
- Unit tests should be written for each component using Jest and React Testing Library to ensure functionality.
- Test the rendering of components and the handling of user inputs in the ContactForm.
- Ensure that the Robux generation logic is tested to verify that it provides feedback correctly. 

This prompt provides a comprehensive structure and implementation plan for the web application, focusing on best practices and usability in a minimalistic design context.