Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a corporate website for CREO (Consultancy Real Estate Opportunities), focused on modernizing and redesigning their online presence. The site will showcase the agency's services and mission while integrating a virtual assistant powered by OpenAI to enhance user engagement. The design aims to reflect contemporary web trends for 2026, ensuring a user-friendly experience across all devices.

## CORE FEATURES
1. **Hero Section**: A visually impactful introduction with a compelling tagline and a call-to-action button leading to the virtual assistant.
   
2. **About Us**: A dedicated section detailing CREO's mission and vision, emphasizing their boutique approach to real estate and commitment to personalized service.

3. **Services Overview**: A summary of services offered, including Investment, Relocation, Brokerage, Property Management, Architectural Services, and Development, each with brief descriptions.

4. **Virtual Assistant**: A chatbot feature positioned at the bottom left, guiding users through a questionnaire to identify their needs (e.g., owner or tenant, preferred location), ultimately collecting contact information for follow-up.

5. **Contact Information**: A clear and accessible contact section with options for users to initiate communication via email or WhatsApp.

6. **Responsive Design**: The website will be fully responsive, ensuring a seamless experience across devices from desktops to mobile phones.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space, a minimal color palette, and a strong focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds, maintaining the corporate colors of CREO.
- **Layout**: A single-page layout with smooth scrolling sections for the hero, about, services, virtual assistant, and contact information.
- **Typography**: Use modern, sans-serif fonts for headers and body text, ensuring readability and a contemporary feel. Suggested font hierarchy: H1 for main titles, H2 for section titles, and body text for descriptions.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for utility-first styling
- **UI Components**: shadcn/ui for consistent design elements
- **State Management**: React Context API or Zustand for managing the state of the virtual assistant

## IMPLEMENTATION STEPS
1. **Set Up Environment**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Layout Components**: Develop reusable layout components for the hero section, services overview, and contact information.
3. **Implement Hero Section**: Design the hero section with a background image or gradient, including a prominent tagline and CTA button for the virtual assistant.
4. **Develop About Us Section**: Create a visually appealing section to present CREO's mission and vision using engaging typography and layout.
5. **Build Services Overview**: Design a grid or card layout to display the agency's services, ensuring each service is clickable for more information if needed.
6. **Integrate Virtual Assistant**: Utilize the OpenAI API to implement the chatbot feature, including a user-friendly interface for the questionnaire and contact collection.
7. **Contact Section**: Develop a simple contact form or clickable links for users to reach out via email or WhatsApp.
8. **Responsive Design**: Ensure all components are responsive using Tailwind CSS utilities for different screen sizes.
9. **Testing**: Conduct user testing to ensure functionality, responsiveness, and overall user experience.
10. **Deployment**: Deploy the website using a preferred hosting platform, ensuring proper domain configuration for CREO.

## USER EXPERIENCE
Users will be greeted with a striking hero section that captures their attention immediately. They can easily navigate through the site to learn about CREO's services and mission. The virtual assistant will provide an interactive element, helping users identify their needs and encouraging them to provide contact information for follow-up. The minimalist design ensures that users can focus on content without distractions, facilitating a straightforward and engaging experience.