Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a five-page marketing website for "Halden," a forward-deployed studio specializing in building automation systems and custom AI products for B2B teams. The purpose of the site is to effectively communicate the studio's offerings and facilitate the booking of discovery calls by potential clients.

## CORE FEATURES
1. **Home Page**: Engaging hero section with a rotating headline, a brief introduction to the services offered, and prominent CTAs for booking calls and viewing case studies.
2. **What We Build**: Detailed descriptions of the services offered, including automation systems, custom AI products, and an operations platform, each with illustrative mockups.
3. **Case Studies**: Showcasing past projects with fictional clients, detailing the problems solved, solutions provided, and measurable results.
4. **About Page**: Information about the studio's philosophy, team structure, and operational model, including testimonials and location details.
5. **Blog**: A section for field notes and insights on building AI systems, featuring a list of articles with excerpts and reading times.
6. **Booking Modal**: A user-friendly modal for scheduling a 30-minute discovery call, capturing necessary information and confirming submission.

## 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 be structured with a maximum content width of 1240px, utilizing a 12-column grid for responsiveness, with appropriate padding for mobile and desktop views.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not specified, but can be implemented as needed (e.g., React context or Redux).

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS for styling.
2. **Create the Basic Structure**: Set up the main layout components, including `Header`, `Footer`, and `Booking Modal`.
3. **Implement Routing**: Use React Router to manage navigation between the five main pages: Home, What We Build, Case Studies, About, and Blog.
4. **Design the Home Page**: Create the hero section, proof marquee, and a summary of services with CTAs.
5. **Build the Services Page**: Detail each service with headers, statistics, and animated mock panels.
6. **Develop the Case Studies Page**: Include large cards for featured studies and a grid for additional projects, ensuring a uniform layout.
7. **Construct the About Page**: Integrate team philosophy, stats, testimonials, and location markers.
8. **Create the Blog Section**: List articles with categories and excerpts, including a "Load more" feature.
9. **Implement the Booking Modal**: Ensure that form submission captures user data and provides a confirmation message.
10. **Test and Deploy**: Audit for layout, responsiveness, and functionality across devices before deploying the site live.

## USER EXPERIENCE
The user experience will prioritize clarity and ease of navigation, featuring a fixed navigation bar with clear links to each section. Users will be able to scroll through content smoothly, interact with animated elements, and easily complete the booking process through a modal. The design will emphasize readability and focus on the content, ensuring that potential clients feel informed and encouraged to engage with Halden's services.