Una página web para un ecommerce de producto de gummies de Ashawanda (tenemos tres sabores: mora, cereza y plátano), cada uno de ellos vinculado...
Generated Prompt
## APPLICATION OVERVIEW This project is a landing page for an e-commerce site selling Ashwanda gummies in three flavors: blackberry, cherry, and banana. Each flavor is associated with specific benefits such as sleep support, vitamin boost, and anti-inflammatory or detox properties. The landing page will facilitate both one-time purchases and a subscription service offering a 50% discount on the next purchase for monthly subscribers. ## CORE FEATURES 1. **Product Selection Form**: A dynamic form allowing customers to choose between the three flavors and their respective benefits. 2. **Subscription Options**: Clear display of monthly subscription benefits, including a 50% discount on future purchases. 3. **Audio Clip Integration**: A section to embed an audio clip that serves as a marketing hook, leading to a strong Call To Action (CTA). 4. **Image Management**: Capability to upload and manage images for each product variant and flavor, ensuring that the website can be updated easily with new visuals. 5. **Hero Section**: A visually appealing header image, functioning as a banner, to attract user attention immediately upon landing on the page. 6. **Call To Action (CTA)**: Strategically placed buttons guiding users towards making a purchase or signing up for the subscription service. ## 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 will feature a full-width hero section at the top, followed by a product selection form, audio integration section, and a clear CTA section. Each product variant will be displayed in a grid format with images and descriptions. ## TECHNICAL REQUIREMENTS - Framework: React with TypeScript - Styling: Tailwind CSS - UI Components: shadcn/ui - State Management: React's built-in state management (useState, useContext) ## IMPLEMENTATION STEPS 1. **Setup the Project Environment**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui components. 2. **Create the Hero Section**: Implement the full-width header image, ensuring it is responsive and visually appealing. 3. **Develop Product Selection Form**: Create a form that allows users to select flavors and benefits. Use controlled components to manage form state. 4. **Integrate Audio Clip**: Add functionality to embed an audio clip in the designated section of the landing page. 5. **Design Product Display Area**: Set up a grid layout for displaying product images and descriptions, ensuring easy image upload capabilities. 6. **Implement Call To Action**: Add prominent CTA buttons that link to the purchase or subscription process, ensuring they stand out visually. 7. **Testing and Optimization**: Conduct thorough testing across different devices and browsers, optimizing for performance and user experience. ## USER EXPERIENCE Users will land on a visually engaging page where they will first see a captivating hero image. They can easily navigate to select their desired gummies through a straightforward form. Once they've made their selections, they can listen to the audio clip that promotes the product's benefits before being guided to the CTA for purchase. The layout ensures that users can find information quickly, fostering a seamless shopping experience. This comprehensive prompt will guide the development of a functional minimalist light application that meets the user's vision for their e-commerce landing page.
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!
