Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Create a corporate landing page for Crescer Med, focused on providing information about occupational health services. The website will include essential sections such as Home, About Us, Exams, Courses and Training, and Contact, with the aim of attracting potential clients through paid traffic.

## CORE FEATURES
1. **Hero Section**: A visually appealing introduction with a strong call-to-action to "Request a Quick Quote."
2. **About Us**: Detailed information about the company's background, services, and experience in occupational health.
3. **Services Offered**: A breakdown of clinical exams and complementary exams available, emphasizing the convenience of services.
4. **Contact Form**: A user-friendly form for visitors to request quotes or more information, including fields for name, phone, email, and message.
5. **Contact Information**: Easily accessible contact details, including phone numbers and email for direct inquiries.
6. **Location & Hours**: Clearly displayed address and operational hours to facilitate visits and consultations.

## 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 consist of a top navigation bar, followed by a hero section, a grid for services, a contact form, and footer with contact details and links.

## 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 Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create Layout**: Build the main layout structure with a navigation bar, hero section, services section, contact form, and footer.
3. **Integrate Design Specifications**: Apply the specified color, typography, and border radius throughout the layout using Tailwind CSS.
4. **Develop Core Features**: Implement the hero section with a background image or color, a brief introduction, and a call-to-action button.
5. **Service Details**: Create a grid layout to display the services offered with brief descriptions.
6. **Contact Form**: Add a form with validation for user input and connect it to an email service for inquiries.
7. **Add Responsiveness**: Ensure the design is responsive across different devices using Tailwind’s utility classes.
8. **Test Functionality**: Verify that all links, buttons, and forms function correctly before deployment.
9. **Deploy**: Host the application on a suitable platform for public access.

## USER EXPERIENCE
Visitors will land on a visually appealing hero section with a clear message and call-to-action. They can easily navigate through the services offered, learn about the company, and fill out a contact form to request more information or quotes. The layout's simplicity and clarity will enhance user engagement and conversion rates, making it easy to find necessary information and get in touch with the company.