Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a premium landing page for a law firm based in Riyadh, designed to establish a strong online presence. The primary purpose of the website is to showcase the firm's services, expertise, and client testimonials, ultimately driving prospective clients to make contact.

## CORE FEATURES
1. **Hero Section**: A visually appealing hero area at the top of the page featuring a strong headline, a brief introduction to the firm, and a call-to-action (CTA) button encouraging users to schedule a consultation.
   
2. **Services Overview**: A section that highlights the key legal services offered by the firm, with brief descriptions and icons for easy recognition.

3. **Testimonials**: A dedicated area for client testimonials to build trust and credibility, featuring quotes and names of satisfied clients.

4. **About Us**: A section that describes the firm's mission, values, and team members, enhancing the personal touch and professionalism.

5. **Contact Form**: An easy-to-use contact form allowing visitors to get in touch with the firm, including fields for name, email, phone number, and message.

6. **Call-to-Action**: Strategically placed CTAs throughout the page to encourage users to take action, such as booking a consultation or contacting the firm.

## 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**: A single-column layout with sections stacked vertically, ensuring easy navigation and flow of information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not required for this landing page.

## IMPLEMENTATION STEPS
1. **Set up the project**: Initialize a new React project using Create React App with TypeScript template.
2. **Install dependencies**: Add Tailwind CSS and shadcn/ui to the project.
3. **Create the layout**: Develop the main layout structure using a single-column format, including the hero, services, testimonials, about us, and contact sections.
4. **Implement components**: Create reusable components for the hero section, service cards, testimonials, and contact form.
5. **Style the components**: Use Tailwind CSS classes to apply the minimalist design, ensuring consistency with the specified typography and color scheme.
6. **Add interactivity**: Implement smooth scrolling and any necessary animations for the CTA buttons to enhance the user experience.

## USER EXPERIENCE
Users will land on a clean and inviting homepage with a clear hierarchy of information. The hero section will catch their attention, followed by an easy navigation through services and testimonials. The contact form will be straightforward, ensuring that potential clients can reach out without obstacles. The overall focus will be on providing a seamless and enjoyable experience while maintaining professionalism.