Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project aims to create a modern, minimalist landing page for a company that specializes in providing website development services specifically tailored for schools. The landing page will effectively showcase the company's offerings, highlight key features, and encourage potential clients to engage with the service.

## CORE FEATURES
1. **Hero Section**: A visually striking hero area with a compelling headline, a brief description of services, and a prominent call-to-action button for inquiries or quotes.
2. **Service Features**: A section outlining the key services offered, such as custom website design, mobile responsiveness, and SEO optimization, each with a brief description.
3. **Testimonials**: A section dedicated to customer testimonials, showcasing positive feedback from satisfied clients to build trust and credibility.
4. **Call-to-Action (CTA)**: Multiple strategic CTAs throughout the page encouraging visitors to get in touch or request a consultation.
5. **Contact Form**: A simple contact form for inquiries, allowing users to submit their details and requests easily.
6. **Light/Dark Mode Toggle**: An intuitive toggle allowing users to switch between light and dark modes for an optimal viewing experience.

## 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-page layout with a clear vertical flow, including sections for hero, services, testimonials, CTA, and contact. The design should prioritize responsiveness and accessibility.

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

## IMPLEMENTATION STEPS
1. Set up a new React project using Create React App with TypeScript.
2. Install Tailwind CSS and configure it within the project.
3. Create the main layout structure, including a header, hero section, service features, testimonials, CTA, and contact form.
4. Implement the hero section with a background image or color, headline, description, and CTA button styled with Tailwind CSS.
5. Develop the service features section using cards with rounded borders and appropriate spacing.
6. Integrate the testimonials section with a carousel or static display of quotes.
7. Add a contact form with necessary fields (name, email, message) styled consistently with the rest of the page.
8. Implement the light/dark mode toggle functionality using React state management.
9. Test the responsiveness of the design on various screen sizes and devices.

## USER EXPERIENCE
Users will first encounter the engaging hero section that clearly communicates the company's value proposition. As they scroll down, they will discover the features of the service, supported by testimonials that enhance credibility. The multiple CTAs will guide users towards taking action, whether that’s contacting for more information or signing up for services. The light/dark mode toggle ensures that users can customize their viewing preference, enhancing overall user satisfaction. The entire landing page will be designed to ensure a seamless and enjoyable experience, encouraging conversions.