Lovable Prompt Creator - AI Prompt Generator

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

```
/real-estate-landing-page
├── /public
├── /src
│   ├── /components
│   │   ├── Header.tsx
│   │   ├── Hero.tsx
│   │   ├── PropertyCard.tsx
│   │   ├── VirtualTourPreview.tsx
│   │   ├── FeaturedListings.tsx
│   │   ├── AgentProfile.tsx
│   │   ├── ContactForm.tsx
│   ├── /styles
│   │   ├── index.css
│   ├── App.tsx
│   ├── index.tsx
```

Install Tailwind CSS and shadcn/ui for styling. Ensure your Tailwind setup is configured to work with your React app properly.

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. **Header**: Navigation bar with links to sections of the landing page.
2. **Hero**: Main introduction with background image and CTA button.
3. **PropertyCard**: Displays individual property details with glassmorphism effect.
4. **VirtualTourPreview**: Section showing snippets of virtual tours.
5. **FeaturedListings**: Grid layout for showcasing top properties.
6. **AgentProfile**: Displays agent images, bios, and contact info.
7. **ContactForm**: Simple form for inquiries or scheduling viewings.

IMPLEMENTATION APPROACH
1. **Set Up Project**: Use Create React App with TypeScript
   ```bash
   npx create-react-app real-estate-landing-page --template typescript
   cd real-estate-landing-page
   npm install tailwindcss@latest postcss@latest autoprefixer@latest
   npx tailwindcss init -p
   ```

2. **Configure Tailwind**: Update `tailwind.config.js` to include paths to your templates:
   ```javascript
   module.exports = {
     purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
     darkMode: false,
     theme: {
       extend: {},
     },
     variants: {
       extend: {},
     },
     plugins: [],
   }
   ```

3. **Build Layout Components**: Create functional components for the Header, Hero, PropertyCard, VirtualTourPreview, FeaturedListings, AgentProfile, and ContactForm. Ensure each component uses Tailwind CSS for styling.

4. **Design Hero Section**:
   ```typescript
   // Hero.tsx
   const Hero = () => {
     return (
       <section className="h-screen flex items-center justify-center bg-cover bg-center" style={{ backgroundImage: 'url(/path/to/image.jpg)' }}>
         <h1 className="text-5xl font-bold text-white">Find Your Dream Home</h1>
         <button className="mt-5 bg-[#1978E5] rounded-[8px] px-6 py-2 text-white">Explore Listings</button>
       </section>
     );
   };
   ```

5. **Implement Glassmorphism Cards**: Use CSS to create the glassmorphism effect in PropertyCard:
   ```typescript
   // PropertyCard.tsx
   const PropertyCard = ({ property }) => {
     return (
       <div className="bg-white bg-opacity-30 backdrop-blur-md rounded-[8px] p-4">
         <img src={property.image} alt={property.title} />
         <h2 className="text-xl">{property.title}</h2>
         <p>{property.price}</p>
       </div>
     );
   };
   ```

6. **Add Virtual Tour Functionality**: Integrate a video component or interactive element for virtual tours.

7. **Display Featured Listings**: Use CSS Grid to layout featured listings responsively.

8. **Develop Agent Profiles Section**: Create a component to display agents’ images and bios.

9. **Create Contact Form**: Implement validation for form fields and handle submissions.

ERROR HANDLING
Implement error handling strategies for the contact form to manage input validation and submission errors. Use try-catch blocks for API calls and display user-friendly error messages.

TESTING STRATEGY
Outline testing approaches using Jest and React Testing Library. Focus on unit tests for each component, ensuring that they render correctly and handle props as expected. Conduct integration tests for form submissions and interactions.

This comprehensive prompt provides a clear path to building a premium real estate landing page using React and TypeScript, aligned with modern design principles.