Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page for A.S Builders Group INC that showcases real before-and-after transformations of home remodeling projects. The primary purpose is to leverage social proof by displaying verified project images, encouraging potential customers to envision their own home transformations and prompting them to request estimates.

## CORE FEATURES
1. **Hero Section with Slider**: A full-width interactive split-screen slider showcasing a verified Kitchen Remodel project with before-and-after images and subtle animations.
2. **Grid of Transformations**: A clean grid layout displaying 3-4 additional verified transformations (Kitchen, Bathroom, ADU/Room Addition, Exterior/Backyard) with side-by-side images and brief descriptions.
3. **Psychology Element**: A motivational headline and persuasive text positioned beneath the transformations, inviting users to imagine their own remodeling possibilities.
4. **Call-to-Action (CTA)**: A prominent button that scrolls users to a Smart Estimate form, labeled "Get My Project Estimate."
5. **Social Proof Reinforcement**: A section featuring two verified testimonials that highlight the remodeling experience, using exact wording from the website.

## 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.
- **Layout**: The main layout consists of a full-width hero section with a slider at the top, followed by a grid of transformation images. Each section has ample padding for a luxurious feel, with minimal text to enhance visual impact.
- **Typography**: Use elegant, modern fonts such as 'Roboto' or 'Lato' for headings and body text, ensuring a clear hierarchy with larger sizes for the headline and smaller for descriptions.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for rapid styling and responsive design
- **UI Components**: Utilize shadcn/ui for interactive UI elements
- **State Management**: Use React Context or Zustand if needed for managing state across components.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Create a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to the project.
3. **Create Components**:
   - Develop the Hero Slider component with draggable functionality.
   - Build a Grid component for displaying transformations.
   - Implement the Psychology Element and CTA button.
   - Create a Testimonials component for social proof.
4. **Fetch Images and Data**: Extract verified before-and-after images and descriptions from the specified website, ensuring compliance with the guidelines.
5. **Style Components**: Apply Tailwind CSS classes to achieve the minimalist design specifications.
6. **Add Animations**: Implement subtle animations for the slider and smooth fade-ins for images using CSS transitions.
7. **Test Responsiveness**: Ensure the layout works seamlessly on various devices, particularly mobile, for the slider functionality.

## USER EXPERIENCE
Users will land on a visually appealing page where they can see a captivating transformation slider at the top. As they scroll down, a grid of additional transformations will be displayed, offering real-life examples. The persuasive messaging beneath these images will encourage users to think about their own projects, leading them to engage with the CTA button that smoothly scrolls them to the estimate form. Testimonials will further validate the quality of A.S Builders Group's work, enhancing trust and encouraging user interaction.