Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Create a landing page for naflabel.id, a fashion brand showcasing a variety of products for both women and men, including blouses, shirts, skirts, pants, robes, and polo shirts. The website aims to provide a clean, minimalist interface that effectively highlights the fashion offerings while ensuring a smooth user experience that encourages exploration and conversion.

## CORE FEATURES
1. **Hero Section**: A visually appealing hero area featuring the brand logo, a welcoming tagline, and a prominent call-to-action button that directs users to view the collection.
  
2. **Product Categories**: Display sections for various product categories (e.g., Women's Fashion, Men's Fashion) with easy navigation to encourage browsing.

3. **Featured Products**: Highlight selected products with images, brief descriptions, and pricing to attract attention and drive sales.

4. **Testimonials**: A section for customer testimonials to build trust and showcase user satisfaction with the brand.

5. **Contact Information**: Provide users with easy access to contact details, including a simple form for inquiries or feedback.

6. **Responsive Design**: Ensure the website is fully responsive, providing a seamless experience across all devices, from desktops to mobile.

## 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 with a top navigation bar, followed by sections for the hero, product categories, featured products, testimonials, and contact information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not required for static content; consider using React Context for managing user interactions if necessary.

## IMPLEMENTATION STEPS
1. **Set up the Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create the Layout**: Develop the main layout structure, ensuring to include a navigation bar, hero section, product categories, featured products, testimonials, and contact information.
4. **Style Components**: Use Tailwind CSS classes to implement the minimalist design, applying the primary color and typography specifications.
5. **Add Content**: Populate the sections with relevant content, including product images, descriptions, and customer testimonials.
6. **Test Responsiveness**: Ensure that the website is fully responsive across various devices and screen sizes.
7. **Deploy the Website**: Choose a hosting platform (e.g., Vercel, Netlify) and deploy the site for public access.

## USER EXPERIENCE
Users will be greeted with a visually appealing hero section that draws attention to the brand. They can easily navigate through different product categories and explore featured items. Customer testimonials will enhance the trust factor, while the contact section will facilitate easy communication. The overall minimalist design ensures a smooth and enjoyable browsing experience, encouraging users to engage with the content and make purchases.