Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page for an architecture firm, designed to showcase the firm's services, portfolio, and contact information. The primary goal is to attract potential clients and provide a clear overview of the firm's capabilities in a visually appealing and easily navigable format.

## CORE FEATURES
1. **Hero Section**: A captivating introduction with a high-quality image of architectural work, a brief tagline, and a call-to-action button prompting visitors to learn more or get in touch.
2. **About Us**: A concise overview of the firm’s mission, vision, and values, highlighting the team’s expertise and unique approach to architecture.
3. **Portfolio Gallery**: A visually engaging display of completed projects, showcasing images and brief descriptions to illustrate the firm's design style and capabilities.
4. **Services Offered**: A clear list of architectural services provided with brief descriptions, outlining what clients can expect when they engage with the firm.
5. **Testimonials**: A section featuring client reviews and feedback to build trust and credibility among potential clients.
6. **Contact Form**: A simple, user-friendly contact form allowing visitors to easily reach out for inquiries or consultations.

## 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 single-column with sections stacked vertically. Each section will have a full-width background to enhance visual separation, with ample padding to ensure readability and focus.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not specifically required for a landing page, but can use React's built-in state if needed for form handling.

## IMPLEMENTATION STEPS
1. **Setup React Application**: Initialize a new React project with TypeScript using Create React App.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create Layout Structure**: Develop the main layout with a header, main content area, and footer. Use Tailwind CSS for styling.
4. **Build Hero Section**: Add the hero section with an image, tagline, and call-to-action button. Style with the primary color and typography specifications.
5. **Develop Additional Sections**: Create the About Us, Portfolio Gallery, Services Offered, Testimonials, and Contact Form sections, ensuring each is visually distinct and aligns with the minimalist design.
6. **Implement Contact Form**: Use React state to manage form inputs and handle submissions. Style the form according to the design specifications.
7. **Optimize for Responsiveness**: Ensure the layout is responsive, adjusting to different screen sizes with Tailwind CSS's responsive utilities.
8. **Test and Deploy**: Test the landing page for functionality and usability across devices and browsers. Deploy to a hosting platform of choice.

## USER EXPERIENCE
Visitors will have a seamless experience navigating through the landing page, starting from the eye-catching hero section that prompts engagement. They can easily access the firm’s portfolio and services, read testimonials for added trust, and use the contact form for inquiries. The minimalist design ensures that users can focus on content without distractions, enhancing their overall experience. Responsive design will adapt the layout for optimal viewing on both desktop and mobile devices, ensuring accessibility for all users.