صفحه وب

Build a complete, production-quality RTL Persian e-commerce website for the Iranian brand: Brand name: صلح‌آباد Full brand name: صلح‌آباد | بازار بزرگ خانه و آشپزخانه Slogan: خانه‌ای برای انتخاب بهتر This must NOT be a simple landing page or generic template. Build a complete modern Iranian online shopping experience with multiple pages, reusable components, realistic product data, responsive layouts, search, filters, cart functionality, checkout UI, customer account UI, and mobile navigation. The entire visible website must be in Persian (Farsi) and use RTL layout. --- 1. BRAND IDENTITY Brand: «صلح‌آباد» Subtitle: «بازار بزرگ خانه و آشپزخانه» Slogan: «خانه‌ای برای انتخاب بهتر» Brand concept: The website represents a large Iranian marketplace inspired by «بازار بزرگ صلح‌آباد شرقی», focused on home goods, kitchenware, porcelain, dinnerware, serving products, cookware, kitchen tools and dowry products. The website should feel like a large, reputable Iranian retailer rather than a small personal shop. Visual personality: - modern luxury - warm - trustworthy - professional - clean - premium - minimal - Iranian market inspiration - subtle traditional bazaar references - NOT old-fashioned - NOT overly decorative - NOT a generic WordPress template Use subtle architectural/bazaar-inspired details such as arches, geometric patterns and premium borders, but keep the UI modern. --- 2. COLOR SYSTEM Use these colors consistently: Primary navy: #062B49 Deep navy: #041E35 Gold: #E8B52E Light gold: #F5CF62 Cream: #FAF7EF White: #FFFFFF Primary text: #17202A Secondary gray: #68717A Discount red: #E51D3E Border: #E7E7E7 Do not introduce random bright colors. Gold should be used for important accents, CTAs, stars and premium details. Navy should be the dominant brand color. --- 3. TYPOGRAPHY Use a high-quality Persian font. Preferred: Vazirmatn Fallback: IRANSans / system Persian sans-serif Typography must support: - Persian numerals where appropriate - readable product titles - large premium headings - compact ecommerce metadata - excellent mobile readability --- 4. GLOBAL RTL REQUIREMENTS Everything must be RTL: - navigation - dropdowns - search - product cards - filters - checkout - forms - cart - account dashboard - breadcrumbs - mobile navigation - modals - notifications Use: dir="rtl" lang="fa" Do not create an English-looking layout with Persian text inserted into it. The visual hierarchy must be designed specifically for RTL. --- 5. WEBSITE STRUCTURE Create these pages/routes: 1. Home 2. Shop / All Products 3. Category 4. Search Results 5. Product Details 6. Cart 7. Checkout 8. Account Dashboard 9. Login 10. Register 11. Order Tracking 12. Wishlist 13. Compare 14. About Us 15. Contact Us 16. FAQ 17. Shipping Information 18. Return Policy All pages must share the same header, navigation, footer and design system. --- 6. TOP BAR Create a slim dark navy top bar. Show: «ارسال به سراسر کشور» «بسته‌بندی ویژه ظروف» «پرداخت امن» «پشتیبانی» Use small icons. The bar should be elegant and compact. --- 7. MAIN HEADER Create a premium ecommerce header. Right side: Logo: صلح‌آباد Below it: بازار بزرگ خانه و آشپزخانه Center: Large search field: «جستجو در محصولات صلح‌آباد…» Search must support: - product name - category - brand - autocomplete - recent searches - empty state - no-results state Left side: «ورود / ثبت‌نام» Wishlist icon Cart icon Cart item counter On desktop the header should be spacious. On mobile redesign it rather than simply shrinking it. --- 8. MAIN NAVIGATION Create a dark navy navigation bar. Items: «همه محصولات» «ظروف چینی» «پذیرایی» «آشپزخانه» «لوازم خانه» «جهیزیه» «تخفیف‌ها» Hovering/clicking «ظروف چینی» opens a large RTL mega menu. Mega menu categories: - سرویس غذاخوری - سرویس چای و قهوه - بشقاب - کاسه - دیس - فنجان و نعلبکی - ظروف تک Add product/category thumbnails where appropriate. --- 9. HOME HERO Create a premium dark navy hero section. Main text: «به صلح‌آباد خوش آمدید» Large heading: «صلح‌آباد» Subheading: «بازار بزرگ خانه و آشپزخانه» Description: «انتخابی از دل بازار بزرگ صلح‌آباد شرقی؛ ظروف چینی، پذیرایی، لوازم آشپزخانه و محصولات جهیزیه با بسته‌بندی مطمئن و ارسال به سراسر کشور.» Primary CTA: «مشاهده محصولات ←» Secondary CTA: «دسته‌بندی‌ها» Add gold badge: «انتخاب از دل بازار» Hero should contain premium product imagery or high-quality visual placeholders representing: - porcelain plate - tea cup - serving dish - kitchenware Do NOT use cheap generic stock-photo aesthetics. --- 10. BENEFITS Create four benefit blocks: 1. 🚚 ارسال به سراسر کشور 2. 📦 بسته‌بندی ویژه ظروف 3. 🔒 پرداخت امن 4. ☎️ پشتیبانی قبل و بعد از خرید Use cream background and premium cards. --- 11. PRODUCT CATEGORIES Create a grid of eight categories. Categories: 1. ظروف چینی 2. پذیرایی 3. چای و قهوه 4. سرویس غذاخوری 5. پارچ و لیوان 6. قابلمه و تابه 7. لوازم آشپزخانه 8. جهیزیه Each card must contain: - visual - title - short description - hover animation - link to category --- 12. BEST SELLERS Section title: «پرفروش‌های بازار» Subtitle: «محبوب‌ترین انتخاب‌های مشتریان» Create realistic product cards. Each card must include: - product image - discount badge - product title - star rating - review count - old price - current price - discount percentage - stock indicator - add-to-cart button - wishlist icon - quick view Use Persian prices. Example products: «سرویس غذاخوری چینی ۲۸ پارچه» «سرویس چای و قهوه ۱۲ پارچه» «دیس پذیرایی طرح کلاسیک» «قابلمه گرانیتی ۸ پارچه» --- 13. MARKET SELECTION BANNER Create a large premium navy/gold banner. Heading: «انتخاب‌های بازار صلح‌آباد» Description: «محصولاتی منتخب با حال‌وهوای بازار و استاندارد یک خرید آنلاین حرفه‌ای.» CTA: «شروع انتخاب» Use subtle Iranian bazaar arch geometry in the background. --- 14. SPECIAL OFFERS Section: «پیشنهادهای ویژه» Each product must show: «٪۲۰ تخفیف» old crossed-out price new price «فرصت محدود» Add subtle countdown UI. Use red only for discount-related information. --- 15. DOWRY SECTION Create a premium section: Title: «جهیزیه و شروع یک خانه جدید» Subtitle: «انتخابی کامل برای شروع یک خانه زیبا» Show categories: - سرویس غذاخوری - سرویس قابلمه - چای و پذیرایی - ابزار آشپزخانه CTA: «مشاهده جهیزیه» Use elegant cream/gold visual styling. --- 16. PREMIUM PICKS Section title: «منتخب صلح‌آباد» Show four large premium products. Labels: «پیشنهاد صلح‌آباد» «محبوب بازار» «انتخاب ویژه» Use large product imagery and luxury spacing. --- 17. WHY SOLHABAD Section title: «چرا صلح‌آباد؟» Create four feature cards: «تنوع واقعی بازار» «انتخاب مستقیم از بازار» «مشاهده و بررسی محصول» «ارسال و بسته‌بندی مطمئن» Add subtle bazaar architecture background. --- 18. BRAND STORY Title: «صلح‌آباد؛ بازار بزرگ خانه و آشپزخانه» Content should explain that Solhabad brings the shopping experience inspired by «بازار بزرگ صلح‌آباد شرقی» into an organized online shopping experience. Create two-column layout: Text + premium market visual. CTA: «داستان صلح‌آباد» --- 19. CUSTOMER REVIEWS Title: «نظر مشتریان» Create three review cards. Each card: - customer name - five gold stars - short Persian review - «✓ خرید تأییدشده» Use realistic but clearly sample/demo reviews. --- 20. SOCIAL / VISUAL GALLERY Create a six-image grid representing: - porcelain - serving - table setting - kitchen tools - new products - market backstage Use consistent visual treatment. --- 21. NEWSLETTER Dark navy section. Title: «از تخفیف‌ها و محصولات جدید باخبر شوید» Input: «شماره موبایل یا ایمیل شما» Gold button: «عضویت» Add privacy reassurance. --- 22. FOOTER Create a large professional footer. Columns: دسته‌بندی‌ها - ظروف چینی - پذیرایی - آشپزخانه - جهیزیه خدمات مشتریان - راهنمای خرید - پیگیری سفارش - ارسال - بازگشت کالا - سوالات متداول درباره صلح‌آباد - درباره ما - تماس با ما - داستان صلح‌آباد ارتباط - شماره تلفن - آدرس - شبکه‌های اجتماعی - نمادهای اعتماد Footer brand: «صلح‌آباد» «بازار بزرگ خانه و آشپزخانه» «خانه‌ای برای انتخاب بهتر» --- 23. PRODUCT PAGE Build a complete WooCommerce-style product page. Example: «سرویس غذاخوری چینی ۲۸ پارچه» Layout: Right/primary: product gallery Left/secondary: product information Information: - product title - brand - rating - review count - SKU - price - old price - discount - stock - quantity selector - add to cart - buy now - wishlist - compare Benefits: - ارسال سراسری - بسته‌بندی ویژه - پرداخت امن - پشتیبانی Tabs: «توضیحات محصول» «مشخصات» «محتویات سرویس» «نظرات مشتریان» Below: «محصولات مرتبط» --- 24. CATEGORY PAGE Example category: «ظروف چینی» Header: breadcrumb category title description product count Filters: - برند - محدوده قیمت - رنگ - تعداد پارچه - موجودی Sorting: «جدیدترین» «پرفروش‌ترین» «ارزان‌ترین» Create responsive product grid. Desktop: 4 columns Tablet: 2-3 columns Mobile: 2 columns where appropriate. --- 25. SEARCH RESULTS Search page must show: «نتایج جستجو برای: ...» Include: - search field - result count - filters - sorting - product grid - empty state Create a professional empty state when nothing is found. --- 26. CART PAGE Build a complete cart. Each cart item: - image - product name - quantity controls - unit price - subtotal - remove button - wishlist option Order summary: «مجموع محصولات» «هزینه ارسال» «تخفیف» «مبلغ نهایی» CTA: «ادامه فرآیند خرید» Also show: «ادامه خرید» --- 27. CHECKOUT Create a professional Persian checkout page. Sections: اطلاعات گیرنده - نام و نام خانوادگی - شماره موبایل آدرس ارسال - استان - شهر - آدرس - کد پستی روش ارسال - پست - ارسال ویژه روش پرداخت - پرداخت آنلاین Right side: Order summary CTA: «پرداخت و ثبت سفارش» Add secure payment indicators. --- 28. ACCOUNT DASHBOARD Create: «حساب کاربری من» Dashboard sections: - سفارش‌های من - سفارش‌های در حال پردازش - آدرس‌ها - علاقه‌مندی‌ها - اطلاعات حساب - خروج Order status examples: «در انتظار پرداخت» «در حال آماده‌سازی» «ارسال شد» «تحویل داده شد» --- 29. LOGIN / REGISTER Create modern RTL forms. Login: «ورود به حساب صلح‌آباد» Phone number Password / OTP option Register: name phone email optional password Terms checkbox --- 30. ORDER TRACKING Page: «پیگیری سفارش» Input: «شماره سفارش» Button: «پیگیری سفارش» Show order timeline: ثبت سفارش ↓ پردازش ↓ بسته‌بندی ↓ ارسال ↓ تحویل --- 31. WISHLIST Create wishlist page. Product cards should have: - image - title - price - remove - add to cart --- 32. COMPARE Create a product comparison page. Compare: - image - price - brand - material - piece count - dimensions - availability --- 33. MOBILE EXPERIENCE Mobile must NOT simply be a scaled desktop. Create a dedicated mobile UX. Bottom navigation: «خانه» «دسته‌بندی» «جستجو» «سبد خرید» «حساب من» Mobile header: logo + search + cart Mobile category layout: 2-column grid Product cards: compact but readable. Checkout: single-column. Filters: mobile drawer/modal. Mega menu: mobile accordion. --- 34. RESPONSIVE BREAKPOINTS Support: Large desktop 1440px+ Desktop 1200px Tablet 768–1199px Mobile 480–767px Small mobile below 480px Everything must remain usable. --- 35. INTERACTIONS Implement real interactions in the prototype: - add to cart - remove from cart - increase/decrease quantity - cart counter - wishlist toggle - search - autocomplete - filters - sorting - category navigation - product quick view - product details - checkout form validation - toast notifications - loading states - empty states - success states - error states - mobile menu - mega menu - modal dialogs Use smooth but subtle animations. Do NOT over-animate. --- 36. PRODUCT DATA Create at least 20 realistic demo products. Categories: - ظروف چینی - پذیرایی - آشپزخانه - جهیزیه - چای و قهوه Each product needs: id name slug category brand price oldPrice discount rating reviewCount stock description specifications pieceCount material images Use realistic Iranian toman pricing. --- 37. PRODUCT VISUALS Do not use random unrelated stock photos. Product visuals should look coherent. Preferred visual style: clean ecommerce product photography white / cream background soft shadows premium presentation consistent perspective If actual product images are unavailable, create elegant visual placeholders that still look like a real product catalog. --- 38. DESIGN SYSTEM Create reusable components: Header TopBar Navigation MegaMenu SearchBar Hero BenefitCard CategoryCard ProductCard ProductGrid ProductGallery Price Rating DiscountBadge FilterSidebar SortBar CartItem OrderSummary ReviewCard Newsletter Footer MobileBottomNav Toast Modal Breadcrumb Button Input Select Tabs Do not duplicate UI code unnecessarily. --- 39. PERFORMANCE The site should be optimized for: - lazy-loaded images - responsive images - WebP/AVIF where possible - minimal JavaScript - optimized CSS - reusable components - no unnecessary animations - fast first render --- 40. SEO Implement: - semantic HTML - proper H1/H2 hierarchy - Persian meta titles - meta descriptions - canonical URLs - breadcrumb structured data - Product schema - Review schema - Organization schema - FAQ schema where appropriate - sitemap-ready structure Example homepage title: «صلح‌آباد | بازار بزرگ خانه و آشپزخانه» Example description: «خرید ظروف چینی، پذیرایی، لوازم آشپزخانه و جهیزیه از صلح‌آباد؛ انتخابی از دل بازار بزرگ خانه و آشپزخانه.» --- 41. ECOMMERCE ARCHITECTURE Build the prototype so it can later connect to: WordPress WooCommerce payment gateway SMS order notifications shipping provider analytics SEO tools security backup Do not hard-code the architecture in a way that prevents future backend integration. --- 42. IRANIAN ECOMMERCE DETAILS Use: - تومان - Persian labels - Persian number formatting where appropriate - Iranian phone number format - Iranian address fields - Iranian checkout terminology Avoid American ecommerce terminology. For example: Do NOT use: "Add to Cart" Use: «افزودن به سبد خرید» Do NOT use: "Checkout" Use: «تکمیل سفارش» --- 43. VISUAL QUALITY REQUIREMENT The result must look like a serious commercial website. Avoid: - generic AI website appearance - excessive rounded cards - random gradients - excessive glassmorphism - childish icons - overly colorful sections - huge unnecessary whitespace - template-like layouts - English UI - inconsistent spacing - inconsistent button styles Aim for: premium Iranian ecommerce + modern marketplace + subtle traditional bazaar identity. --- 44. IMPORTANT IMPLEMENTATION RULE Do not stop after creating the homepage. The first version must include: Home Shop Category Search Product Cart Checkout Account Login/Register Order Tracking Wishlist Compare About Contact FAQ with working navigation between them. --- 45. DEMO FUNCTIONALITY Since this is initially a prototype, use local/demo data. The cart should persist using localStorage or an equivalent client-side mechanism. The user must be able to: 1. browse products 2. open product 3. select quantity 4. add product to cart 5. see cart counter 6. edit cart 7. proceed to checkout 8. fill checkout form 9. see order summary 10. receive success notification --- 46. FINAL UI CHECK Before considering the project complete, verify: - entire interface is Persian - entire interface is RTL - no broken layouts - no English placeholder text - no lorem ipsum - no empty navigation links - buttons work - cart works - search works - category filtering works - product pages work - checkout works - mobile navigation works - desktop navigation works - responsive layout works - colors follow brand system - typography is consistent - spacing is consistent - visual hierarchy is premium --- 47. MOST IMPORTANT DESIGN DIRECTION The website should visually communicate: «این فقط یک فروشگاه اینترنتی نیست؛ نسخه آنلاین یک بازار بزرگ و معتبر برای خانه و آشپزخانه است.» The user should feel: اعتماد تنوع کیفیت اصالت بازار انتخاب زیاد بسته‌بندی مطمئن خرید آسان Build the complete website now. Do not return only a design description. Generate the actual working website interface and functionality.