Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a professional web system designed for an agency, consisting of a corporate website/landing page and a multi-tenant customer demo system. It aims to showcase the agency's services, team, and portfolio while providing a secure and manageable platform for client demos.

## CORE FEATURES
1. **Corporate Website/Landing Page**: A modern, responsive design that presents the agency’s offerings, team introductions, contact information, and client references.
2. **Portfolio/Projects Section**: A visually appealing section displaying project thumbnails, brief descriptions, and direct links to client demos.
3. **Multi-Tenant Customer Demo System**: Enables the creation and management of individual customer demo sites, accessible through a secure URL structure, with password protection and optional branding.
4. **Admin Backend**: A user-friendly dashboard for managing customer demos, including creating, editing, and deleting entries, and tracking demo statuses.
5. **Secure Access Control**: Password protection for each demo with session-based authentication, optional expiration dates, and IP whitelisting.
6. **Scalable Architecture**: Designed to accommodate a growing number of clients while maintaining performance and security.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with ample white space, minimal color palette, and a strong focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds.
- **Layout**: The landing page features a structured grid layout showcasing the agency's offerings, with a clear navigation menu at the top and a footer with contact details. The portfolio section is prominently displayed with project thumbnails arranged in a responsive grid, ensuring accessibility on various devices.
- **Typography**: Use sans-serif fonts such as 'Roboto' for headings and 'Open Sans' for body text. Establish a hierarchy with larger font sizes for headings and smaller sizes for descriptions, ensuring readability and visual clarity.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for utility-first design
- **UI Components**: Utilize shadcn/ui for consistent and modern UI components
- **State Management**: Redux or Context API for managing application state if necessary

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and Tailwind CSS setup.
2. **Develop Landing Page**:
   - Create components for the header, footer, and main content area.
   - Implement responsive design techniques for mobile and desktop views.
   - Integrate SEO best practices for visibility.
3. **Build Portfolio Section**:
   - Create a grid layout for project thumbnails, linking each to the respective demo.
   - Implement a mechanism to add or update projects dynamically.
4. **Develop Multi-Tenant Demo System**:
   - Create routes for demo URLs in the format `/demo/kunde-slug`.
   - Implement password protection and session management for demo access.
5. **Create Admin Backend**:
   - Set up a dashboard view for managing customers and demos.
   - Implement CRUD operations for customer data.
   - Include status tracking for each demo.
6. **Ensure Security**:
   - Implement password hashing (e.g., bcrypt) and secure authentication measures.
   - Apply CSRF protection, XSS prevention, and SQL injection prevention.
7. **Test Application**: Conduct user testing to refine user experiences and fix any usability issues.

## USER EXPERIENCE
Users will first interact with the landing page, where they can easily navigate to the services offered, view the portfolio, and access contact information. Admin users will log in to the backend to manage customer demos seamlessly, where they can view the status of each demo and make any necessary changes. Demo users will access their specific demo URLs, entering a password if required, and view a fully functional representation of the client’s website, ensuring a smooth and professional experience.