Site revolucionário, super usável, rápido, com imagens grandes, mega intuitivo, responsivo, com microinterações para o usuário.
Generated Prompt
## APPLICATION OVERVIEW Create a revolutionary e-commerce web application focused on selling electric motorcycles. The platform will prioritize usability, speed, and responsiveness, featuring large images and intuitive navigation to enhance the user experience. This application aims to showcase premium electric motorcycle offerings while incorporating modern design principles and micro-interactions for a seamless user journey. ## CORE FEATURES 1. **Product Showcase**: Display a gallery of electric motorcycles with large, high-quality images, allowing users to zoom in and view details. Each product will have a dedicated page with specifications, pricing, and availability. 2. **Search and Filter Functionality**: Implement advanced search and filtering options to help users easily find motorcycles based on criteria such as price, range, and features. 3. **User Reviews and Ratings**: Allow customers to leave reviews and rate products, building community trust and providing valuable feedback for potential buyers. 4. **Shopping Cart and Checkout Process**: A streamlined and intuitive shopping cart experience, enabling users to easily add products, view their selections, and complete the checkout with minimal steps. 5. **Account Management**: Users can create accounts to track orders, save favorite products, and manage personal information securely. 6. **Responsive Design**: Ensure the application is fully responsive, providing an optimal user experience across all devices, from desktops to mobile phones. ## DESIGN SPECIFICATIONS - **Visual Style**: Minimalist design with a clean and simple aesthetic. Emphasize white space to enhance readability and focus on content. The overall mood should be modern and inviting. - **Color Mode**: Light theme featuring dark text on light backgrounds to ensure high contrast and readability. - **Layout**: A grid-based layout for product listings, with a clear hierarchy of information. The header will include a logo, navigation menu, and a search bar, while the footer will contain links to policies and contact information. - **Typography**: Utilize a sans-serif font for headings (e.g., "Montserrat") and a clean serif font for body text (e.g., "Lora"). Establish a typographic hierarchy with larger font sizes for headings and smaller sizes for body text, ensuring clear readability. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript for strong typing and improved developer experience. - **Styling**: Tailwind CSS for utility-first styling, enabling rapid design iterations and responsiveness. - **UI Components**: Use shadcn/ui for modern and customizable components that enhance the UI without compromising performance. - **State Management**: Consider using React Context API or Zustand for managing application state, especially for the shopping cart and user authentication. ## IMPLEMENTATION STEPS 1. **Set up the Project**: Initialize a new React project using Create React App with TypeScript support. Install Tailwind CSS and configure it for the project. 2. **Build the Layout**: Create the main layout components, including Header, Footer, and Main Content Area. Implement routing using React Router for page navigation. 3. **Develop Core Features**: - Implement the Product Showcase component with a grid layout to display products. - Create Product Detail pages with detailed information, images, and user reviews. - Add Search and Filter functionality to the product listing. 4. **Integrate Shopping Cart**: Develop the Shopping Cart component, allowing users to add and remove products. Implement the Checkout process with form validation. 5. **User Authentication**: Set up user account management features using Firebase Authentication or similar services for secure login and registration. 6. **Responsive Design Testing**: Ensure all components are responsive by testing on various devices and adjusting styles as necessary. ## USER EXPERIENCE Users will experience a seamless journey starting from the landing page, where they can easily navigate through a visually appealing product showcase. The intuitive search and filter options will allow them to quickly find what they are looking for. Upon selecting a product, they will access detailed information and customer reviews, making informed decisions. The checkout process will be straightforward, ensuring users can finalize their purchases without unnecessary complications. Micro-interactions will provide feedback during actions like adding items to the cart or submitting reviews, enhancing user engagement and satisfaction.
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!
