Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a dedicated URL on the Adrail website to showcase a case study in an HTML format. The case study is already responsive and visually aligned with the current brand style. The goal is to ensure that the HTML file is seamlessly integrated into the existing Adrail site without compromising the design integrity.

## CORE FEATURES
1. **Responsive Design**: The case study will be fully responsive, ensuring optimal viewing on mobile devices.
2. **Seamless Integration**: The HTML case study will be embedded within the existing Adrail website structure to maintain brand consistency.
3. **Easy Navigation**: Users will be able to easily navigate to the case study from the main website, enhancing user experience.
4. **Fast Loading Times**: The HTML file will be optimized for quick loading to ensure that users do not experience delays.
5. **Clean Aesthetic**: The design will follow a minimalist style, focusing on readability and ease of use.

## 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 consist of a header with navigation links, a hero section introducing the case study, followed by the case study content, and a footer with contact information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not required for this implementation as it is a single HTML integration.

## IMPLEMENTATION STEPS
1. **Create a New Route**: Set up a new URL route in the React application for the case study page.
2. **Integrate HTML File**: Import the HTML file into the new route, ensuring it renders correctly within the React framework.
3. **Style Adjustments**: Apply Tailwind CSS styles to maintain consistency with the existing design, using the specified primary color and typography.
4. **Responsive Checks**: Test the case study page on various devices to ensure responsiveness and usability.
5. **Link from Homepage**: Add a navigation link to the case study page from the main site to improve accessibility.
6. **Final Review**: Conduct a review of the entire integration to ensure no breaks in the existing site structure or style.

## USER EXPERIENCE
Users will access the case study through a clear navigation link on the Adrail homepage. Upon clicking the link, they will be taken to the case study page that loads quickly and displays the content in a clean, minimalist layout. The responsive design ensures that users on mobile devices have a smooth experience, with easy scrolling and readability. Users will appreciate the seamless integration of the case study within the overall Adrail brand aesthetic.