a day ago
Create a modern drone parts webshop. Tech stack: React + Tailwind CSS. Responsive mobile-first layout. Component-based structure. Design: Color palette: blue, black, gray, white. Style inspiration: filament.ee (clean, technical, minimal, grid-based). Dark header, light content cards, subtle shadows, rounded-lg. Modern sans-serif font. Layout: Header: - Logo left - Search bar center - Language switcher (EN / ET) - Sign in / Sign out button - Cart icon with item count Homepage: - Hero banner with drone parts background - Section: Top Products (horizontal scroll) - Section: New Products (grid) - Section: Categories (card grid) Shop page: - Sidebar (left): - Categories list - Price filter - Brand filter - Main area: - Product grid - Sort (price, newest, popular) Product card: - Image - Name - Price - Stock status - Add to cart button Product detail page: - Large image gallery - Title - Price - Specs table - Description - Add to cart - Related products Cart: - Slide-out cart drawer - Quantity controls - Remove item - Total price - Checkout button Auth: - Sign in page - Sign up page - Sign out functionality - Mock authentication state (no real backend) Routing: - / (home) - /shop - /product/:id - /cart - /login Data: Use mock JSON data for products: Fields: id, name, price, category, brand, image, stock, specs, isNew, isTop. Functionality: - Add to cart - Remove from cart - Persist cart in localStorage - Filter by category - Filter by price range - Language switch (EN/ET static labels) Components: Navbar SidebarFilters ProductGrid ProductCard ProductDetail CartDrawer LanguageSwitcher AuthButtons Output: Generate full working React + Tailwind code with folder structure.
Windframe is an AI visual editor for rapidly building stunning web UIs & websites
Start building stunning web UIs & websites!
