Ue me haga una pagina completamente funcional y que funcione todo de una y que sea profesional puede utlizar la paleta de negro y dorado , tiene...
Generated Prompt
## APPLICATION OVERVIEW This project involves creating a fully functional web application for "Single," a professional establishment that showcases a catalog of models. The application will allow users to view profiles that include photos, presentations, and other relevant details. Additionally, it will feature an admin panel for managing the catalog, including adding, editing, and deleting entries. The design will be elegant and minimalist, with a focus on user experience. ## CORE FEATURES 1. **Catalog View**: A user-friendly interface displaying profiles of models with images, descriptions, ages, and other relevant data. 2. **Admin Panel**: A secure area for the admin to manage the catalog, including options to add, edit, or delete model profiles. 3. **User Authentication**: Only the designated admin will have access to the admin panel, ensuring security and privacy. 4. **Responsive Design**: The application will be fully responsive, providing an optimal viewing experience on various devices. 5. **Search and Filter**: Users can easily search or filter models based on specific criteria for a tailored experience. ## 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**: A single-page layout for the catalog view with a sidebar for admin access, featuring a grid for model profiles and a separate admin section. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript - **Styling**: Tailwind CSS - **UI Components**: shadcn/ui - **State Management**: Use React's Context API for managing global state, if needed. ## IMPLEMENTATION STEPS 1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS. 2. **Create Components**: - Develop a `Catalog` component to display model profiles. - Create an `AdminPanel` component for managing profiles. 3. **Implement Routing**: Use React Router to navigate between the catalog view and the admin panel. 4. **Design UI**: Apply Tailwind CSS for styling, ensuring adherence to the design specifications. 5. **Set Up Authentication**: Implement a basic authentication system for admin access. 6. **Integrate State Management**: Set up Context API for managing model data across components. 7. **Testing**: Conduct thorough testing to ensure responsiveness and functionality. ## USER EXPERIENCE Users will land on the catalog page, where they can view profiles of models. Each profile will feature a photo, name, age, and description. The admin will log in to access the admin panel, allowing them to manage the catalog seamlessly. All interactions will prioritize elegance and simplicity, ensuring a smooth user experience across devices. This prompt provides a structured approach to creating a professional and functional web application that meets the user's vision for "Single."
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!
