Página para vender muebles de madera de pino, dónde tenga un carrusel de fotos con detalles y precio, un catálogo, una sección de contacto también
Generated Prompt
## APPLICATION OVERVIEW This application is an e-commerce web app designed to sell pine wood furniture. It will feature a clean and minimalist interface that allows users to easily browse products, view detailed images and pricing, and contact the seller. The design emphasizes simplicity and usability, ensuring a seamless shopping experience. ## CORE FEATURES 1. **Product Carousel**: A rotating display of high-quality images showcasing each piece of furniture, with details and pricing information prominently featured. 2. **Product Catalog**: A comprehensive catalog that lists all available items, organized by categories for easy navigation. 3. **Contact Section**: A dedicated area for users to reach out with inquiries, including a contact form and essential contact information. 4. **Search Functionality**: A search bar that allows users to quickly find specific products based on keywords or categories. 5. **Responsive Design**: Optimized for both desktop and mobile devices, ensuring a consistent experience across all platforms. ## DESIGN SPECIFICATIONS - **Visual Style**: Minimalist - The design will feature a clean and simple aesthetic with ample white space, allowing products to stand out. - **Color Mode**: Light theme with dark text on light backgrounds to enhance readability and visual comfort. - **Layout**: The main layout will consist of a top navigation bar, a central product carousel, followed by the product catalog in a grid format. The contact section will be placed at the bottom for easy access. - **Typography**: Use of modern sans-serif fonts for headings (e.g., 'Montserrat') and body text (e.g., 'Open Sans') with a clear hierarchy to guide users through the content. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript for a robust, type-safe development environment. - **Styling**: Tailwind CSS for utility-first styling, enabling rapid design changes while maintaining a consistent look. - **UI Components**: Utilize shadcn/ui for pre-built components that complement the minimalist design. - **State Management**: Implement React Context API for managing global state, if necessary. ## IMPLEMENTATION STEPS 1. **Initialize Project**: Set up a new React project with TypeScript using Create React App. 2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to the project, along with any necessary packages for state management. 3. **Design Layout**: Create a responsive layout using Tailwind CSS, ensuring the header, carousel, catalog, and contact section are well-structured. 4. **Build Components**: - **Carousel Component**: Create a reusable carousel component to display product images and details. - **Product Catalog Component**: Develop a grid layout for the product catalog that dynamically pulls in product data. - **Contact Form Component**: Implement a simple contact form with fields for name, email, and message. 5. **Implement Routing**: Use React Router to manage navigation between different sections of the app, if necessary. 6. **Testing**: Conduct thorough testing to ensure responsiveness and functionality across different devices and screen sizes. ## USER EXPERIENCE The user journey will begin on the homepage featuring the product carousel, allowing users to easily browse through featured items. They can then navigate to the product catalog to explore all available furniture. The search functionality will enable users to find specific pieces quickly. For any inquiries, users can fill out the contact form in the dedicated contact section. The entire application will be designed to provide a smooth, intuitive experience, with clear calls to action and accessible navigation.
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!
