ZARA like Clothes Shop
Kliknij, aby powiększyć

ZARA like Clothes Shop

E-commerce Claude 4 Sonnet Official Promptzy.Art Prompt

UI Description

inspired by ZARA's design language. This includes modern UI/UX principles, a clean minimalist layout, and black-and-white tones with a tasteful accent color.

Full prompt

Generate a fully responsive and modern eCommerce clothing shop UI Home Page inspired by ZARA, using HTML and Tailwind CSS. The design must be minimalist, elegant, and premium.
 🎨 Design Theme: * Color Scheme: Predominantly white and black with a clean, elegant look. Use #FAFAFA for white, #111 for black, and introduce a desaturated beige (#D6CFC4) as the accent color for subtle highlights (buttons, hover states). * Typography: Use a serif font for titles (like 'Playfair Display' or 'Merriweather') and a clean sans-serif for body text (like 'Inter' or 'Helvetica Neue'). * Spacing & Layout: Use generous white space. Keep everything clean and breathable. Prioritize readability and large visuals.
 🧱 Structure: Build the following main components/pages: 1. Homepage * Full-width hero section with a carousel for new arrivals or featured collections. * Below, a 3-column grid with categories (e.g., Men, Women, Accessories). * Feature a horizontal scrolling section for "New In". * Include a minimalist newsletter signup section with accent color. 2. Shopping Cart Drawer * Slide-in drawer (right side) with a list of items, quantity selector, subtotal, "Checkout" and "Continue Shopping" buttons. 3. Navigation/Header * Sticky minimalist header with logo centered, hamburger menu on mobile. * Nav links uppercase: Shop, New In, Collections, About, Contact. * Icons: Search, Cart, Account. 4. Footer * 4-column layout with links: Shop, Info, Customer Service, Socials. * Email subscription input.
 ⚙️ Tech Stack Requirements: * Tailwind CSS for all styling * Implement dark hover overlays, animated transitions using Framer Motion. * Responsive and mobile-first layout (grid and drawer must adapt to mobile).
 🧠 UX Principles: * Follow ZARA's approach: lots of whitespace, focus on large product images, and elegant typography. * Include subtle animations: button hover effects, image fade-ins. * Prioritize usability and fast navigation.
 📦 Optional Nice-to-Haves: * Wishlist button on product cards. * Lazy loading of images. * Breadcrumbs on PDP. * Sticky size selector on scroll.
 If you need any images use it from websites with no copyrights like pixabay or unsplash.

Information

Date added

28.05.2025

Tags