Professional, premium React + Tailwind CSS website.
Generated Prompt
```markdown
## APPLICATION OVERVIEW
This application is a premium e-commerce website built with React and Tailwind CSS, designed to showcase and sell professional cosmetic products. The primary goal is to create a high-end, trustworthy online shopping experience that reflects the elegance and confidence of the brand.
## CORE FEATURES
1. **Announcement Bar**: Displays important messages or promotions at the top of the page to engage visitors immediately.
2. **Sticky Header Navigation**: A responsive navigation bar that remains accessible as users scroll, ensuring easy navigation throughout the site.
3. **Hero Section with Category Links**: A visually striking hero area featuring prominent product categories, inviting users to explore.
4. **Bestselling Products Grid**: Showcases popular products with clear images, descriptions, and pricing, encouraging conversions.
5. **Before/After Carousel**: An interactive element that highlights the effectiveness of products through before and after images.
6. **Responsive Footer**: Includes essential links, social media icons, and contact information, ensuring users can easily find additional resources.
## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space, muted colors, and a strong focus on typography.
- **Color Mode**: Light theme with dark text on soft ivory backgrounds, utilizing muted botanical green and deep charcoal for contrast.
- **Layout**: Adopts a structured layout mirroring the original site, with clear section divisions and generous spacing to enhance readability and navigation.
- **Typography**: Utilizes modern sans-serif fonts such as Inter or Poppins, with a strong hierarchy; large hero typography and generous spacing to ensure clarity.
## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for type safety and maintainability.
- **Styling**: Tailwind CSS for utility-first styling, allowing rapid development and customization.
- **UI Components**: Utilize shadcn/ui for consistent and reusable components.
- **State Management**: Implement Context API or Redux if needed for managing global state.
## IMPLEMENTATION STEPS
1. **Setup Project**:
- Create a new React project using `create-react-app` with TypeScript.
- Install Tailwind CSS and configure the Tailwind theme with the specified color palette and font choices.
2. **Create Component Structure**:
- Organize components into a modular file structure for scalability:
- `/components`
- `AnnouncementBar.tsx`
- `Header.tsx`
- `HeroSection.tsx`
- `ProductGrid.tsx`
- `BeforeAfterCarousel.tsx`
- `Footer.tsx`
3. **Develop Components**:
- Implement each component using functional components, ensuring to apply Tailwind CSS classes for styling.
- Create a reusable `ProductCard` component to display product information.
4. **Implement Navigation**:
- Build a responsive navigation system that includes a mobile menu toggle.
- Ensure accessibility with semantic HTML and ARIA roles.
5. **Add Interactivity**:
- Implement the before/after carousel using a library like React Slick or a custom solution.
- Ensure smooth fade-in animations for scroll events using CSS transitions.
6. **Testing and Optimization**:
- Conduct thorough testing for responsiveness across devices.
- Optimize performance by lazy-loading images and minimizing bundle size.
7. **Deployment**:
- Prepare the app for production and deploy using platforms like Vercel or Netlify.
## USER EXPERIENCE
The user journey begins with a clean and inviting homepage, where the announcement bar captures immediate attention. Users can navigate easily through the sticky header, explore product categories in the hero section, and view bestselling products effortlessly. Engaging before/after images enhance the browsing experience, while the footer provides essential links for further exploration. The overall design ensures a seamless, professional shopping experience, instilling trust and confidence in 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!
