Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project aims to create a premium website for a law firm in Nairobi, Kenya. The website will feature a minimalist design with a focus on providing clear information about the firm, its practice areas, and team members. The site will be visually appealing and user-friendly, ensuring a smooth experience for potential clients.

## CORE FEATURES
1. **Floating Header with Glassmorphism Effect**: A visually striking header that remains at the top during scrolling, utilizing a glass-like transparency effect to enhance the modern aesthetic.
2. **Premium Hero Section**: An eye-catching hero area featuring high-resolution images and compelling text to introduce the law firm and its unique offerings.
3. **Practice Areas**: A section dedicated to detailing the various legal services provided by the firm, each with engaging visuals and brief descriptions.
4. **The Team Page**: A well-structured page showcasing the team members with their bios and professional images to build trust and credibility with potential clients.
5. **Contact Us**: An easy-to-use contact form for inquiries, along with contact details and possibly a map for location reference.
6. **Smooth Gliding Animations**: Implement animations for text and images as they appear on the screen to create a dynamic user experience.

## 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 top navigation bar, followed by the hero section, practice areas, team section, and a footer with contact information. Each section will maintain clear visual separation and ample white space.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not explicitly required for this static content-focused site, but can be implemented if needed for form handling.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and install Tailwind CSS for styling.
2. **Create Layout Components**: Develop reusable components for the header, footer, and sections of the website.
3. **Implement Hero Section**: Design and code the hero section with high-resolution images and an engaging headline.
4. **Build Practice Areas Section**: Create individual cards for each practice area, including images and descriptions, styled with Tailwind CSS.
5. **Develop Team Page**: Set up the team page with profiles for each member, ensuring a consistent layout and design.
6. **Contact Us Form**: Implement the contact form using controlled components in React, styled appropriately, and ensure functionality for submissions.
7. **Add Animations**: Integrate smooth animations for text and images using CSS transitions or a library like Framer Motion.
8. **Optimize Performance**: Ensure images are optimized for fast loading and test the site for responsiveness across devices.

## USER EXPERIENCE
The website will provide a seamless experience, with users easily navigating through the primary sections. The floating header will allow for quick access to different areas of the site. Animations will enhance the visual appeal without overwhelming the user, making content consumption straightforward and enjoyable. The contact form will be simple to fill out, encouraging potential clients to reach out easily. 

This design and structure ensure that the website aligns with the law firm’s premium branding while being functional and user-friendly.