Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is an informational website focused on Bariatric surgery, designed to provide comprehensive information about various surgical options, a BMI calculator, doctors, hospitals, and blogs. The website aims to educate users about Bariatric surgery in a clean, user-friendly format.

## CORE FEATURES
1. **Bariatric Surgery Information**: Detailed sections on different types of Bariatric surgeries, including descriptions, pros, and cons for each type.
2. **Surgery Types Comparison**: An interactive comparison tool that allows users to view and contrast various surgery types based on effectiveness, recovery time, and risks.
3. **BMI Calculator**: A simple, user-friendly tool for users to calculate their Body Mass Index with clear instructions and results display.
4. **Healthcare Providers Directory**: A searchable directory of doctors and hospitals specializing in Bariatric surgery, with filters for location and specialty.
5. **Blog Section**: Regularly updated articles and personal stories related to Bariatric surgery, providing insights and real-life experiences.
6. **Contact Information**: A dedicated section for users to reach out for inquiries or further information with a simple contact form.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design featuring clean lines, ample white space, and a focus on easy readability.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure high contrast and readability.
- **Layout**: A single-page layout with a clear navigation menu at the top that smoothly scrolls to sections such as Surgery Information, BMI Calculator, Healthcare Providers, Blogs, and Contact Information.
- **Typography**: Utilize sans-serif fonts for a modern look, with a hierarchy that distinguishes headings (bold and larger) from body text (regular weight).

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for a robust and scalable application.
- **Styling**: Tailwind CSS for utility-first styling and responsive design.
- **UI Components**: Use shadcn/ui for ready-made components that enhance the user interface.
- **State Management**: React Context API for managing application state without the need for additional libraries.

## IMPLEMENTATION STEPS
1. **Set up the React project** with TypeScript and Tailwind CSS.
   - Initialize a new React app using Create React App with TypeScript template.
   - Install Tailwind CSS and configure it in the project.
2. **Design the layout** using Tailwind CSS to create a responsive, single-page layout.
   - Develop the header with navigation links.
   - Create sections for all core features listed above.
3. **Implement the BMI Calculator** component.
   - Create a form that accepts weight and height inputs and calculates BMI.
   - Display results dynamically below the form.
4. **Develop the Bariatric Surgery Information section** with collapsible panels for each surgery type.
5. **Build the Healthcare Providers Directory**.
   - Create a simple search/filter interface for users to find doctors and hospitals.
   - Populate with sample data for initial testing.
6. **Create the Blog Section**.
   - Set up a blog layout for articles, including titles, excerpts, and read more links.
7. **Implement the Contact Information section** with a functional contact form.
   - Ensure form validation for required fields.
8. **Test the website** for responsiveness and usability across different devices and browsers.

## USER EXPERIENCE
Users will first land on a clean homepage with a clear navigation menu. They can easily scroll to find information about different types of Bariatric surgery, use the BMI calculator, explore healthcare providers, read blogs, and contact for more information. The minimalist design ensures that users remain focused on the content, providing a seamless and informative experience. The website will be mobile-friendly, ensuring accessibility for all users.