Bikin sebuah website landing page jualan celana jeans dengan tampilan awal yang sederhana tetapi menarik
Generated Prompt
## APPLICATION OVERVIEW This project is a landing page designed to sell jeans, featuring a clean and simple aesthetic that attracts visitors while providing essential information. The goal is to create an engaging experience that encourages users to explore the product offerings and make purchases. ## CORE FEATURES 1. **Hero Section**: A visually striking introduction with a captivating image of the jeans and a compelling tagline, along with a clear call-to-action (CTA) button to shop now. 2. **Product Features**: A section highlighting the unique selling points of the jeans, such as fabric quality, durability, and style options. 3. **Testimonials**: A dedicated area showcasing customer reviews and testimonials to build trust and credibility. 4. **Promotional Offers**: Highlight special deals or discounts available for a limited time to encourage immediate purchases. 5. **Contact Information**: A footer section with contact details and links to social media for customer inquiries and engagement. ## 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 layout will consist of a full-width hero section at the top, followed by a grid or card layout for product features and testimonials, with a clear and organized structure to guide the user through the content. ## TECHNICAL REQUIREMENTS - Framework: React with TypeScript - Styling: Tailwind CSS - UI Components: shadcn/ui - State Management: Not specified, as the landing page does not require complex state management. ## IMPLEMENTATION STEPS 1. **Set up the React project**: Initialize a new React project using Create React App with TypeScript. 2. **Install Tailwind CSS**: Follow the installation guide for adding Tailwind CSS to the project for styling. 3. **Create the layout**: Develop the main component structure, including the Hero, Features, Testimonials, and Contact sections. 4. **Implement the Hero Section**: Add a background image, text overlay, and a CTA button styled with the primary color and border radius. 5. **Build the Product Features Section**: Create individual cards for each product feature, ensuring they are styled with Tailwind CSS and include icons or images. 6. **Add Testimonials**: Design a carousel or grid layout for customer testimonials, ensuring they are visually appealing and easy to read. 7. **Include Footer with Contact Info**: Create a footer component that includes social media links and contact details, styled appropriately. 8. **Test Responsiveness**: Ensure that the landing page looks great on all devices by using responsive design techniques in Tailwind CSS. ## USER EXPERIENCE The user experience is designed to be seamless and engaging. Visitors will land on a visually appealing hero section that immediately captures their attention. As they scroll, they will encounter informative sections that highlight the product's benefits and customer satisfaction through testimonials. The CTA buttons will be prominent, encouraging users to take action. The layout will ensure easy navigation and a pleasant browsing experience on both desktop and mobile devices.
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!
