Lovable Prompt Creator - AI Prompt Generator

# ## ### # Lovable Prompt for WEBQ Website Development

## APPLICATION OVERVIEW
Create a comprehensive, premium, modern, and visually stunning website for WEBQ, a website development and digital solutions company. This web application will serve as an online presence to showcase services, attract potential clients, and establish WEBQ as a leader in the digital solutions space.

## CORE FEATURES
1. **Homepage with Hero Section**: A visually appealing hero section featuring a large headline, tagline, and two clear CTA buttons ("Start Your Project" and "Explore Our Work").
2. **Service Cards**: Beautifully designed cards representing various services offered, each with an icon, short description, and a "Learn More" button.
3. **Portfolio Section**: An attractive grid layout showcasing featured projects with images, categories, descriptions, and links to detailed project pages.
4. **Testimonials Section**: A slider displaying client testimonials with editable content to build trust and credibility.
5. **Contact and Inquiry Forms**: Fully functional forms for project inquiries and general contact, complete with validation and success messages.

## 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 layout will follow a responsive design structure, featuring a top navigation bar, main content area with sections for hero, services, testimonials, and a footer with quick links and contact information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not specified, but can be integrated if needed for managing state across components.

## IMPLEMENTATION STEPS
1. **Setup the Project**: Initialize a new React project with TypeScript and Tailwind CSS.
2. **Create Layout Components**: Develop reusable components for the header, footer, and main content areas.
3. **Design the Homepage**: Implement the hero section with a background image, headline, tagline, and CTA buttons.
4. **Build Service Cards**: Create a grid of service cards, ensuring each card contains an icon, description, and button linking to more information.
5. **Develop the Portfolio Section**: Implement a grid layout to showcase projects with project images and details.
6. **Implement the Testimonials Slider**: Create a testimonial section that rotates through client feedback.
7. **Create Contact and Inquiry Forms**: Develop forms with proper validation and success/error handling.
8. **Ensure Responsiveness**: Use Tailwind CSS classes to make the design responsive across devices.
9. **Optimize for SEO**: Add meta descriptions, alt text for images, and proper heading structures to enhance search engine visibility.
10. **Test Functionality**: Ensure all interactive elements, forms, and navigation work as intended before deployment.

## USER EXPERIENCE
Users will experience a seamless journey from landing on the homepage to exploring services and projects. Key interactions include clicking on CTA buttons to inquire about services, navigating through service cards for more details, and submitting contact forms. The clean and modern design will promote ease of use, ensuring that visitors can quickly find the information they need and engage with WEBQ effectively.