Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a high-fidelity, responsive landing page for the "Experience Design Team," designed using React. It aims to showcase the team's expertise in UX/UI design, highlight their services, and encourage potential clients to start projects with them. The page will embody a sophisticated B2B SaaS aesthetic, leveraging clean design principles and generous whitespace.

## CORE FEATURES
1. **Navigation & Hero Section**: A sticky blurred navigation bar with links to Services, Impact, Frameworks, Case Studies, and a prominent CTA button "Start a Project". The hero section features bold typography that communicates the team's mission.
   
2. **Scope (Process Ribbon)**: An interactive horizontal "Process Flow" illustrating the team's design process from Research to Delivery Support, highlighting their support for various sectors.

3. **Why UX Early (Bento Grid)**: A Bento-style grid showcasing the benefits of early UX involvement, emphasizing cost reduction, idea validation, and improved project outcomes.

4. **Our Services (6-Card Grid)**: A clean grid layout displaying six core services offered by the team, each with an accompanying description and relevant icon.

5. **Selected Work & Impact (Z-Pattern)**: A visually engaging layout showcasing key projects and their impact, employing a "Glass" card effect for a modern aesthetic.

6. **Frameworks & Team**: A section detailing the frameworks used by the team and a clean list of roles, highlighting their collaborative approach to design.

7. **How We Work & CTA**: A vertical timeline outlining the team's workflow, culminating in a high-contrast CTA section encouraging users to start a project or connect.

## 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 page will feature a structured layout with a sticky header, a hero section, followed by a ribbon for the process, a Bento grid for benefits, a services grid, an impact section, a frameworks section, and a concluding timeline with CTAs.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not specified; consider using React's built-in state management for simplicity.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Install Tailwind CSS, shadcn/ui, and Framer Motion for animations.
3. **Create Components**: Develop individual components for the navigation bar, hero section, process ribbon, Bento grid, services grid, selected work section, frameworks section, and CTA.
4. **Implement Routing**: If applicable, set up routing for any internal links (e.g., to case studies).
5. **Styling**: Use Tailwind CSS classes to style components according to the design specifications, ensuring a minimalist aesthetic.
6. **Add Animations**: Integrate Framer Motion for scroll-based reveal effects and hover states on cards.
7. **Testing**: Ensure responsiveness across devices and test all interactive elements for functionality.

## USER EXPERIENCE
Users will first encounter a clean and inviting navigation bar, leading them to the hero section that clearly states the team's mission. As they scroll, they will interact with the process ribbon, gaining insight into the team's methodology. The Bento grid will provide compelling reasons for involving UX early in projects, while the services grid will allow users to quickly understand what the team offers. The selected work section will visually engage users with impactful project showcases, leading to a clear call-to-action at the bottom, inviting them to connect or start a project. The overall experience will be seamless, focusing on clarity, value, and impact throughout the journey.