Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a landing page for a company focused on environmental protection. The website will have a modern and professional aesthetic that incorporates a green theme while maintaining a minimalist design. It will include an embedded Google Forms iframe for user engagement and feedback.

## CORE FEATURES
1. **Hero Section**: A striking introduction with a captivating headline, subheadline, and a call-to-action button encouraging users to learn more or get involved.
2. **About Us**: A brief overview of the company's mission and values, emphasizing its commitment to environmental sustainability.
3. **Services Offered**: A section detailing the various services provided by the company, showcasing their impact and eco-friendly initiatives.
4. **Testimonials**: A collection of quotes from satisfied clients or partners, adding credibility and trust to the company’s offerings.
5. **Google Forms Iframe**: An embedded Google Form for users to submit inquiries or feedback directly from the website.
6. **Contact Information**: A section providing contact details, including email and social media links, to encourage further engagement.

## 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 stacked sections for about, services, testimonials, and the contact form, each section clearly separated with ample white space to enhance readability.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not specified; consider using React's built-in state management or context API if needed.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create Layout Structure**: Build the main layout using React components, ensuring proper sectioning for the hero, about, services, testimonials, and contact sections.
3. **Implement Styling**: Use Tailwind CSS to apply the specified design specifications, including typography, color scheme, and border radius.
4. **Embed Google Form**: Integrate the Google Forms iframe in the contact section to allow user interactions.
5. **Add Interactivity**: Ensure that the call-to-action buttons are functional and lead to the appropriate sections or external links.
6. **Responsive Design**: Test and adjust the layout for various screen sizes to ensure a seamless user experience on mobile and desktop devices.

## USER EXPERIENCE
Users will land on a visually appealing hero section that captures their attention. They will scroll down to learn about the company's mission and the services offered, punctuated by testimonials that build trust. The embedded Google Form will allow users to easily provide feedback or inquiries, while the contact information will be readily accessible for further engagement. The overall experience is designed to be straightforward, encouraging users to explore and interact with the content seamlessly.