Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is focused on creating a professional landing page for IoT Guard, intended to provide information about services and facilitate contact requests. The primary goal is to replace the existing Shopify-hosted site with a more visually appealing and functional landing page that captures leads without any online sales functionality.

## CORE FEATURES
1. **Hero Section**: A visually striking introduction to IoT Guard, featuring a concise tagline and a clear call-to-action (CTA) for visitors to request a quote or contact.
2. **Services Overview**: A detailed section outlining the various services offered by IoT Guard, using engaging visuals and brief descriptions to inform potential clients.
3. **Contact Form**: An intuitive and accessible contact form allowing users to easily request quotes or reach out for more information.
4. **Testimonials/Client Logos**: A section showcasing testimonials or logos of clients to enhance credibility and trustworthiness.
5. **Footer with Contact Information**: A footer that includes essential contact details, social media links, and quick navigation to important sections of the page.

## 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**: A single-column layout with a fixed header and sections stacked vertically, ensuring easy scrolling and a clear pathway for users to navigate.

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

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript using Create React App.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to the project.
3. **Create Layout Structure**: Implement a main layout component that includes the header, sections for hero, services, testimonials, contact form, and footer.
4. **Design Hero Section**: Create a visually appealing hero section with a headline, subheadline, and CTA button styled with the primary color.
5. **Develop Services Overview**: Build a section to display services using cards with rounded corners and hover effects for interactivity.
6. **Implement Contact Form**: Create a functional contact form with validation and styling, including fields for name, email, message, and a submit button.
7. **Add Testimonials/Client Logos**: Design a section for testimonials or client logos, ensuring they are visually distinct and engaging.
8. **Create Footer**: Implement a footer with contact information, social media links, and navigation links.
9. **Test & Deploy**: Test the website for responsiveness and usability across devices, then deploy using a suitable hosting platform.

## USER EXPERIENCE
The landing page should offer a seamless user experience, allowing visitors to easily navigate through the content. Users will be drawn in by the clean design and clear CTAs, guiding them to learn more about services or to fill out the contact form. The responsive design ensures that the page looks great on both desktop and mobile devices, accommodating various screen sizes.