Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page for Porch Light Digital, a website design and hosting business serving local businesses in the Dayton, Ohio area. The site will emphasize modern, industrial aesthetics while showcasing service offerings and facilitating customer inquiries through an effective contact form. The primary goal is to attract potential clients by highlighting the company's focus on mobile-friendly, SEO-optimized designs.

## CORE FEATURES
1. **Hero Section**: A prominent hero area featuring the company slogan "helping customers find you," along with a clear call-to-action button inviting users to explore service options.
2. **Service Tiers**: A section detailing the four service tiers offered, with brief descriptions highlighting the benefits of each tier to help potential customers choose the best option for their needs.
3. **Portfolio Showcase**: A visually appealing showcase of previous projects or client testimonials to build trust and demonstrate expertise.
4. **Contact Form**: A user-friendly contact form enabling visitors to easily reach out for inquiries, with fields for name, email, and message.
5. **SEO Optimization**: Implementing best practices for SEO to ensure the website ranks well in search results, attracting more local businesses.
6. **Mobile Responsiveness**: Ensuring the site is fully responsive, providing an optimal viewing experience across all devices.

## 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 consist of a full-width hero section, followed by a three-column grid for service tiers, a portfolio showcase section, and a footer containing the contact form.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not required for this landing page.

## IMPLEMENTATION STEPS
1. **Setup Project Environment**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Main Components**:
   - Develop the Hero Section component with slogan and CTA button.
   - Create a Service Tier component to list the four service options.
   - Implement the Portfolio Showcase component.
   - Build a Contact Form component.
3. **Design Layout**: Use Tailwind CSS to style components according to the minimalist design specifications.
4. **Add SEO Metadata**: Implement basic SEO practices by adding relevant meta tags and descriptions.
5. **Testing**: Ensure the website is responsive and performs well on various devices and screen sizes.
6. **Deploy**: Use a suitable hosting platform to deploy the site and make it accessible to users.

## USER EXPERIENCE
Users will land on a clean, visually appealing page that immediately conveys the company's mission. They will easily navigate through service offerings, view past projects, and fill out a contact form without distractions. The minimalist design ensures that the focus remains on the content, enhancing the overall user experience and encouraging conversions.