Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page designed to promote a remodeling and maintenance service, emphasizing visual aesthetics inspired by wood and craft. The primary goal is to convert visitors into leads through engaging sections that highlight services and client testimonials, alongside interactive elements like a budget calculator and contact forms.

## CORE FEATURES
1. **Sticky Navbar**: Includes the logo on the left and a prominent "Emergency Call 24/7" button on the right, ensuring easy access for potential clients.
2. **Hero Section**: Features a compelling title and subtitle that clearly communicate the service's value proposition.
3. **Service Grid**: Interactive cards representing 12 service categories, each designed with rounded borders and soft shadows for depth.
4. **Before and After Carousel**: Visual showcase of project transformations using high-quality placeholder images.
5. **Budget Calculator**: Simple widget allowing users to estimate project costs based on selected services and area size.
6. **Testimonials Section**: Displays customer reviews complemented by a star-rating system to build trust.

## 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 design features a sticky navbar at the top, a hero section with a background texture of subtle wood grain, followed by a grid layout for services, a carousel for before-and-after images, a budget calculator, testimonials, and a professional footer.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not specified, but could utilize React's built-in state management or any preferred library.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Navbar Component**: Implement a sticky navbar with logo and emergency call button.
3. **Design Hero Section**: Build the hero section with title and subtitle, applying a subtle wood grain texture for the background.
4. **Develop Service Grid**: Create interactive cards for each service category, ensuring hover effects to enhance interactivity.
5. **Implement Carousel**: Set up a carousel component for before-and-after images, ensuring smooth transitions and responsive design.
6. **Build Budget Calculator**: Create a user-friendly widget allowing users to select services and input area size to generate cost estimates.
7. **Add Testimonials Component**: Implement a section showcasing customer reviews with star ratings.
8. **Create Footer**: Design a professional footer with social media links, contact email, and business hours.

## USER EXPERIENCE
Visitors will experience a straightforward navigation flow from the sticky navbar to each section, with clear calls to action. The interactive elements, such as the budget calculator and service grid, will engage users, encouraging them to explore services. The testimonials will provide social proof, while the contact form and WhatsApp button facilitate easy communication, ultimately driving conversions.