Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page for Dream Craft Construction, a real estate and home builder showcasing luxury home designs. The site aims to provide an elegant and user-friendly interface for potential buyers to explore various home designs, features, and services offered, ultimately guiding them to book a consultation.

## CORE FEATURES
1. **Search & Filter Panel**: A faceted search feature allowing users to filter homes by bedrooms, bathrooms, lot width, and category, making it easy to narrow down options.
2. **Property Listing Grid**: A card-based layout that displays each house design as a card, containing a hero image, title, specifications (beds, baths, lot), price, and a CTA button to view details.
3. **Design Principles Section**: An overview of Dream Craft Construction’s building philosophy, showcasing different types of homes such as single & double storey, duplex designs, homes with granny flats, and custom designs.
4. **Step-by-Step Building Process**: A clear outline of the home building process from initial consultation to handover, helping users understand the journey.
5. **Video Background**: An engaging video playing in the background of the hero section, visually representing the luxury and quality of the homes.
6. **Call to Action**: A prominent "Book Consultation Now" button encouraging users to take the first step towards their dream home.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space, minimal color palette, and a strong focus on typography to enhance readability and elegance.
- **Color Mode**: Light theme with dark text on light backgrounds, ensuring high contrast and clarity.
- **Layout**: 
  - Hero section with a video background and a prominent search/filter panel.
  - Middle section featuring a grid of property cards.
  - Design principles and building process sections laid out in a visually appealing manner with clear headers and ample spacing.
- **Typography**: Use a modern sans-serif font for headings (e.g., 'Montserrat') and a clean serif font for body text (e.g., 'Lora') to create a sophisticated look.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for utility-first styling
- **UI Components**: Utilize shadcn/ui for consistent component design
- **State Management**: React Context API or Zustand for simple state management of filters

## IMPLEMENTATION STEPS
1. **Set up the React project** using Create React App with TypeScript.
2. **Install Tailwind CSS** and configure it within your project.
3. **Create components** for the header, hero section, search/filter panel, property cards, design principles, building process, and footer.
4. **Implement the video background** in the hero section and ensure it is responsive.
5. **Develop the card component** for property listings, ensuring it includes all necessary details and a functional CTA button.
6. **Integrate the search/filter functionality** to dynamically update the property listings based on user input.
7. **Style the page elements** using Tailwind CSS to match the minimalist design specifications.
8. **Test responsiveness** across various devices to ensure a seamless user experience.

## USER EXPERIENCE
Key user interactions include searching for properties using the filter panel, browsing through the property listing grid, and reading about the design principles and building process. Users can easily navigate through sections with clear CTAs guiding them to book a consultation, ensuring they feel engaged and informed throughout their journey on the site.