Project - { : { "name": "Amidia.ai Website", "brand": "Amidia", "tagline": "CONTENT HANDLED.", "description": "Premium AI content agency for...
Generated Prompt
## APPLICATION OVERVIEW The project is a landing page for Amidia.ai, a premium AI content agency targeting business owners. The website aims to present a clean and minimal design that emphasizes the agency's offerings and enhances user engagement through a refined visual hierarchy and strategic use of white space. ## CORE FEATURES 1. **Hero Section**: A visually striking hero section with overlapping text and an avatar, capturing the essence of the brand with a bold tagline and call to action. 2. **Services Overview**: A clear presentation of services offered, highlighting key offerings such as AI Avatar Videos and Short Form Reels in a structured layout. 3. **About Section**: An informative section detailing what Amidia.ai does, focusing on the benefits of automated content production for busy business owners. 4. **Statistics Showcase**: A dedicated area displaying impressive metrics to build credibility and showcase the agency's success. 5. **Call to Action**: An engaging CTA section encouraging visitors to book a call, designed to convert visitors into potential clients. 6. **Footer**: A minimal footer that provides essential contact information and brand identity. ## 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 main layout consists of a fixed top navbar, followed by a full viewport hero section, a marquee ticker, and structured sections for services, stats, and CTA, all with ample white space and clear typography. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript - **Styling**: Tailwind CSS - **UI Components**: shadcn/ui - **State Management**: Not applicable for this landing page ## IMPLEMENTATION STEPS 1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS as well as shadcn/ui for UI components. 2. **Create Navbar**: Implement a fixed top navbar with links styled according to the specifications, ensuring responsiveness and hover states. 3. **Design Hero Section**: Develop the hero section with overlapping text and avatar image, adhering to the layout and design rules. 4. **Implement Marquee Ticker**: Create an infinite horizontal scroll marquee beneath the hero section to convey important service information. 5. **Build About Section**: Structure the about section with necessary content and styles, ensuring alignment with the overall design ethos. 6. **Develop Services and Stats Sections**: Create the services and stats sections, ensuring each is visually distinct yet cohesive with the overall page design. 7. **Add CTA Section**: Design and implement the CTA section to encourage user engagement, including button styles and responsive behavior. 8. **Footer Implementation**: Build a minimal footer that captures essential information and follows the established typography and styling. 9. **Responsive Design**: Ensure the entire landing page is mobile responsive, adjusting layouts and font sizes as specified for smaller screens. 10. **Testing**: Conduct thorough testing for usability, responsiveness, and performance across devices and browsers. ## USER EXPERIENCE Users will be greeted with a visually captivating hero section that clearly presents the brand's message. As they scroll, they will encounter structured sections that provide clarity on the services offered, alongside impressive statistics that enhance credibility. The CTA section will be prominent, encouraging users to take action, and the overall minimalist design will ensure a smooth and engaging user experience free from distractions. The website will prioritize ease of navigation and readability, making it effortless for users to find information and engage with the brand.
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!
