Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page for a Batik clothing brand that offers a range of products including clothes, fabrics, skirts, and hijabs. The focus is on modern aesthetic designs that uphold moral values and local wisdom, utilizing soft and cute pastel colors. The page will serve as an engaging marketing tool to showcase the products and encourage potential customers to explore and make purchases.

## CORE FEATURES
1. **Hero Section**: A visually appealing introduction with a captivating image of the Batik collection, a catchy tagline, and a prominent call-to-action (CTA) button that directs users to the shop.
2. **Product Showcase**: A grid layout displaying featured products like kebaya-style clothes and ceruty hijabs, each with a high-quality image, brief description, and price.
3. **Moral Values Section**: A dedicated area that highlights the brand's commitment to preserving local wisdom and ethical fashion, enhancing the brand's story.
4. **Testimonials**: A section for customer reviews to build trust and credibility, featuring quotes from satisfied customers paired with their photos.
5. **Newsletter Signup**: An easy-to-access signup form for users to receive updates and promotions, fostering a community around the brand.
6. **Contact Information**: A section providing contact details and social media links for easy customer interaction and support.

## 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 main layout will follow a vertical structure starting with the hero section, followed by product showcase, moral values, testimonials, newsletter signup, and contact information, all with clear spacing and alignment for a clean look.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS for responsive design and utility-first styling.
- **UI Components**: shadcn/ui for pre-built, customizable components.
- **State Management**: Context API for managing application state (if needed).

## IMPLEMENTATION STEPS
1. **Set up the React project**: Initialize a new React project using Create React App with TypeScript.
2. **Install required dependencies**: Add Tailwind CSS, shadcn/ui, and any other necessary libraries.
3. **Create the layout structure**: Design the components for the hero section, product showcase, moral values section, testimonials, newsletter signup, and contact information.
4. **Implement responsive design**: Use Tailwind CSS to ensure the layout is mobile-friendly and adjusts well to different screen sizes.
5. **Add styling using Tailwind CSS**: Apply the defined design specifications, focusing on typography, color, and spacing.
6. **Test the landing page**: Check for responsiveness, functionality of the CTA buttons, and overall user experience, making adjustments as necessary.

## USER EXPERIENCE
The user experience will be intuitive and engaging, allowing users to easily navigate through the landing page. The hero section will capture attention immediately, while the product showcase invites exploration of the offerings. The moral values section will resonate with conscientious consumers, and testimonials will build trust. The newsletter signup will encourage ongoing engagement, and contact information will ensure that users feel supported. Overall, the design will facilitate a seamless interaction, promoting conversion and brand loyalty.