Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Web Q is a professional, dark-themed, fully responsive website that offers website development services. It allows users to view various service packages, book a website, and showcases a portfolio of previously completed projects. The site aims to present a polished and modern web development agency appearance, enhancing user engagement and conversion.

## CORE FEATURES
1. **Home Section**: A strong headline with engaging buttons to view packages and book services.
2. **Packages Display**: Clearly outlined packages including Normal Website for ₹20,000, Extreme Website for ₹25,000, and Ultra X Website for ₹30,000.
3. **Services Section**: Information detailing the various website development services offered.
4. **How It Works Section**: A step-by-step explanation of the website booking process.
5. **About Section**: An overview of Web Q, its mission, and vision.
6. **Portfolio Area**: A visually appealing showcase of websites developed by Web Q.
7. **Secure Booking Form**: A form to collect user details (name, phone number, email, business name, selected package, and requirements).
8. **Admin Area**: A management interface to handle customer bookings and portfolio projects.

## DESIGN SPECIFICATIONS
- **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.
- **Layout**: The main layout will feature a top navigation bar, a hero section at the top, followed by the services, how-it-works, about, packages, portfolio, and booking form sections, ensuring a smooth user flow from top to bottom.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Context API for managing bookings and portfolio data.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React app with TypeScript and install Tailwind CSS and shadcn/ui for UI components.
2. **Create Layout Structure**: Develop the main layout including a top navigation bar and sections for Home, Services, How It Works, About, Packages, Portfolio, and Booking Form.
3. **Build Core Components**: Implement components for the hero section, package display, services section, and portfolio showcase.
4. **Develop Booking Form**: Create a secure booking form that validates user input and submits data to the backend.
5. **Implement Admin Area**: Set up an admin panel where bookings and portfolios can be managed, including CRUD operations.
6. **Style the Application**: Apply Tailwind CSS styles according to the design specifications to ensure responsiveness and a polished look.
7. **Testing**: Conduct thorough testing for usability and responsiveness across different devices and browsers.

## USER EXPERIENCE
Users will begin their journey on the home section, inspired by a captivating headline and clear calls to action. They can easily navigate through service offerings, understand the booking process, and explore the portfolio. The secure booking form will provide a straightforward way for customers to submit their information, while the admin area will facilitate easy management of bookings and project showcases, ensuring a seamless experience for both users and administrators.