Prompt for a business website
Generated Prompt
## APPLICATION OVERVIEW This project is a business website designed as a minimalist landing page. Its primary purpose is to showcase the business's offerings, engage visitors, and convert them into potential customers through clear calls to action. ## CORE FEATURES 1. **Hero Section**: A visually appealing introduction with a headline, subheadline, and a prominent call-to-action button directing users to contact or learn more. 2. **Features Overview**: A section highlighting the main services or products offered, each with a brief description and icons to enhance visual appeal. 3. **Testimonials**: A section for client feedback to build trust and credibility, featuring quotes and names or logos of satisfied customers. 4. **Contact Form**: A simple form allowing visitors to easily get in touch, requesting their name, email, and message. 5. **Footer**: Includes links to social media, company information, and navigation links for easy access to other parts of the site. ## 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 should be a single-column structure, primarily stacked vertically, with each section clearly defined and separated by ample white space for simplicity and clarity. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript - **Styling**: Tailwind CSS - **UI Components**: shadcn/ui - **State Management**: Not specified, as the landing page does not require complex state management. ## IMPLEMENTATION STEPS 1. **Set up the Development Environment**: Initialize a new React project with TypeScript and configure Tailwind CSS. 2. **Create the Main Layout**: Design the landing page layout with a header, hero section, features section, testimonials section, contact form, and footer, using React functional components. 3. **Implement Styling**: Apply Tailwind CSS classes based on the design specifications to ensure a minimalist aesthetic. 4. **Add Inter Typography**: Import and apply Inter font styles to headings, body text, and UI elements. 5. **Build the Hero Section**: Create a compelling hero section with a headline, subheadline, and a CTA button styled with the primary color. 6. **Develop Features and Testimonials Sections**: Implement these sections with relevant content, icons, and styling to maintain a cohesive look. 7. **Create the Contact Form**: Build a simple form that captures user input, ensuring it is styled consistently with the overall design. 8. **Set up the Footer**: Include necessary links and information, ensuring it is visually distinct yet aligned with the overall aesthetic. ## USER EXPERIENCE Visitors will first encounter a striking hero section that immediately communicates the business's value proposition. As they scroll, they will see a clear overview of features, bolstered by social proof through testimonials. The contact form will be easily accessible, encouraging user engagement. The minimalist design will ensure that users can navigate effortlessly, focusing on content without distractions. Responsive design will ensure usability across devices, enhancing the overall user experience.
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!
