To create a modern looking website with the latest modern techniques for an ai automation agency, called Coastal Leads.
Generated Prompt
```markdown ## APPLICATION OVERVIEW The project is a modern landing page for Coastal Leads, an AI automation agency focused on streamlining client acquisition for trades. The goal is to create a clean, minimalist website that effectively communicates the benefits of automated systems and encourages potential clients to engage with the services offered. ## CORE FEATURES 1. **Hero Section**: A prominent introduction featuring the tagline "Smart Automation" and a brief description of the services, accompanied by a strong call-to-action (CTA) button to book a chat. 2. **Features Section**: Highlight key benefits of Coastal Leads, including automated follow-ups, instant responses, and connected workflows, presented in an engaging layout. 3. **How It Works**: A step-by-step breakdown of the process from discovery to implementation, explaining how Coastal Leads transforms lead generation for businesses. 4. **Booking Form**: An interactive section allowing users to select a date and time for meetings, along with input fields for their details, ensuring easy client engagement. 5. **Testimonials**: A section for client testimonials to build trust and credibility, showcasing the success stories of businesses that have utilized the services. 6. **Contact Information**: Clear contact details and links to privacy policy and terms of service, ensuring transparency and accessibility. ## 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 vertical flow structure with the hero section on top, followed by features, how it works, testimonials, booking form, and contact information. Each section should have clear spacing and visual hierarchy to guide the user’s attention. ## 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 React Environment**: Create a new React project using Create React App or Vite with TypeScript. 2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui for styling and UI components. 3. **Create Main Components**: Develop components for the hero, features, how it works, testimonials, booking form, and contact sections. 4. **Implement Responsive Design**: Ensure all components are responsive and accessible, adapting to various screen sizes. 5. **Integrate Booking Functionality**: Set up the booking form to capture user inputs and display confirmation upon submission. 6. **Style Components**: Use Tailwind CSS to apply the defined design specifications, focusing on layout, spacing, and typography. 7. **Test Functionality**: Verify all components work as intended and are visually appealing across devices. ## USER EXPERIENCE The user will first encounter the hero section, which immediately captures attention with a strong message and CTA. As they scroll, they will see the benefits of Coastal Leads clearly laid out, guiding them through the pain points and solutions. The booking form is designed to be straightforward, minimizing friction and encouraging quick engagement. Testimonials will further enhance trust, making users feel more confident in reaching out for services. ```
Loved by thousands of makers from
From early prototypes to real products, they started here.







































Generate optimized prompts for your vibe coding projects
Generate prompt
Enter a brief description of the app you want to build and get an optimized prompt
Review and use your prompt
Review (and edit if necessary) the generated prompt, then copy it or open it directly in your chosen platform
Get inspired with new ideas
Get AI-generated suggestions to expand your product with features that will surprise your users
Frequently Asked Questions
Everything you need to know about creating better prompts for your Lovable projects
Still have questions?
Can't find what you're looking for? We're here to help!
