Add replaceable placeholder images with unique img src paths.

Co-authored-by: Cursor <cursoragent@cursor.com>

public/images/about.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <rect width="1280" height="720" fill="#fef2f2"/>
+  <line x1="0" y1="0" x2="1280" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+  <line x1="1280" y1="0" x2="0" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+</svg>

public/images/banner-1.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <rect width="1280" height="720" fill="#fef2f2"/>
+  <line x1="0" y1="0" x2="1280" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+  <line x1="1280" y1="0" x2="0" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+</svg>

public/images/banner-2.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <rect width="1280" height="720" fill="#fef2f2"/>
+  <line x1="0" y1="0" x2="1280" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+  <line x1="1280" y1="0" x2="0" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+</svg>

public/images/blog-1.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <rect width="1280" height="720" fill="#fef2f2"/>
+  <line x1="0" y1="0" x2="1280" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+  <line x1="1280" y1="0" x2="0" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+</svg>

public/images/blog-2.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <rect width="1280" height="720" fill="#fef2f2"/>
+  <line x1="0" y1="0" x2="1280" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+  <line x1="1280" y1="0" x2="0" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+</svg>

public/images/blog-3.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <rect width="1280" height="720" fill="#fef2f2"/>
+  <line x1="0" y1="0" x2="1280" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+  <line x1="1280" y1="0" x2="0" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+</svg>

public/images/blog-4.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <rect width="1280" height="720" fill="#fef2f2"/>
+  <line x1="0" y1="0" x2="1280" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+  <line x1="1280" y1="0" x2="0" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+</svg>

public/images/category-1.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <rect width="1280" height="720" fill="#fef2f2"/>
+  <line x1="0" y1="0" x2="1280" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+  <line x1="1280" y1="0" x2="0" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+</svg>

public/images/category-2.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <rect width="1280" height="720" fill="#fef2f2"/>
+  <line x1="0" y1="0" x2="1280" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+  <line x1="1280" y1="0" x2="0" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+</svg>

public/images/category-3.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <rect width="1280" height="720" fill="#fef2f2"/>
+  <line x1="0" y1="0" x2="1280" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+  <line x1="1280" y1="0" x2="0" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+</svg>

public/images/category-4.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <rect width="1280" height="720" fill="#fef2f2"/>
+  <line x1="0" y1="0" x2="1280" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+  <line x1="1280" y1="0" x2="0" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+</svg>

public/images/category-5.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <rect width="1280" height="720" fill="#fef2f2"/>
+  <line x1="0" y1="0" x2="1280" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+  <line x1="1280" y1="0" x2="0" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+</svg>

public/images/category-6.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <rect width="1280" height="720" fill="#fef2f2"/>
+  <line x1="0" y1="0" x2="1280" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+  <line x1="1280" y1="0" x2="0" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+</svg>

public/images/category-7.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <rect width="1280" height="720" fill="#fef2f2"/>
+  <line x1="0" y1="0" x2="1280" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+  <line x1="1280" y1="0" x2="0" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+</svg>

public/images/category-8.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <rect width="1280" height="720" fill="#fef2f2"/>
+  <line x1="0" y1="0" x2="1280" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+  <line x1="1280" y1="0" x2="0" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+</svg>

public/images/placeholder.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <rect width="1280" height="720" fill="#fef2f2"/>
+  <line x1="0" y1="0" x2="1280" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+  <line x1="1280" y1="0" x2="0" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+</svg>

public/images/product-1.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <rect width="1280" height="720" fill="#fef2f2"/>
+  <line x1="0" y1="0" x2="1280" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+  <line x1="1280" y1="0" x2="0" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+</svg>

public/images/product-10.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <rect width="1280" height="720" fill="#fef2f2"/>
+  <line x1="0" y1="0" x2="1280" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+  <line x1="1280" y1="0" x2="0" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+</svg>

public/images/product-11.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <rect width="1280" height="720" fill="#fef2f2"/>
+  <line x1="0" y1="0" x2="1280" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+  <line x1="1280" y1="0" x2="0" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+</svg>

public/images/product-12.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <rect width="1280" height="720" fill="#fef2f2"/>
+  <line x1="0" y1="0" x2="1280" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+  <line x1="1280" y1="0" x2="0" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+</svg>

public/images/product-13.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <rect width="1280" height="720" fill="#fef2f2"/>
+  <line x1="0" y1="0" x2="1280" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+  <line x1="1280" y1="0" x2="0" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+</svg>

public/images/product-14.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <rect width="1280" height="720" fill="#fef2f2"/>
+  <line x1="0" y1="0" x2="1280" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+  <line x1="1280" y1="0" x2="0" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+</svg>

public/images/product-15.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <rect width="1280" height="720" fill="#fef2f2"/>
+  <line x1="0" y1="0" x2="1280" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+  <line x1="1280" y1="0" x2="0" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+</svg>

public/images/product-16.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <rect width="1280" height="720" fill="#fef2f2"/>
+  <line x1="0" y1="0" x2="1280" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+  <line x1="1280" y1="0" x2="0" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+</svg>

public/images/product-17.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <rect width="1280" height="720" fill="#fef2f2"/>
+  <line x1="0" y1="0" x2="1280" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+  <line x1="1280" y1="0" x2="0" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+</svg>

public/images/product-18.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <rect width="1280" height="720" fill="#fef2f2"/>
+  <line x1="0" y1="0" x2="1280" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+  <line x1="1280" y1="0" x2="0" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+</svg>

public/images/product-2.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <rect width="1280" height="720" fill="#fef2f2"/>
+  <line x1="0" y1="0" x2="1280" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+  <line x1="1280" y1="0" x2="0" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+</svg>

public/images/product-3.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <rect width="1280" height="720" fill="#fef2f2"/>
+  <line x1="0" y1="0" x2="1280" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+  <line x1="1280" y1="0" x2="0" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+</svg>

public/images/product-4.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <rect width="1280" height="720" fill="#fef2f2"/>
+  <line x1="0" y1="0" x2="1280" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+  <line x1="1280" y1="0" x2="0" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+</svg>

public/images/product-5.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <rect width="1280" height="720" fill="#fef2f2"/>
+  <line x1="0" y1="0" x2="1280" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+  <line x1="1280" y1="0" x2="0" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+</svg>

public/images/product-6.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <rect width="1280" height="720" fill="#fef2f2"/>
+  <line x1="0" y1="0" x2="1280" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+  <line x1="1280" y1="0" x2="0" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+</svg>

public/images/product-7.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <rect width="1280" height="720" fill="#fef2f2"/>
+  <line x1="0" y1="0" x2="1280" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+  <line x1="1280" y1="0" x2="0" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+</svg>

public/images/product-8.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <rect width="1280" height="720" fill="#fef2f2"/>
+  <line x1="0" y1="0" x2="1280" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+  <line x1="1280" y1="0" x2="0" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+</svg>

public/images/product-9.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <rect width="1280" height="720" fill="#fef2f2"/>
+  <line x1="0" y1="0" x2="1280" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+  <line x1="1280" y1="0" x2="0" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+</svg>

public/images/promo-1.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <rect width="1280" height="720" fill="#fef2f2"/>
+  <line x1="0" y1="0" x2="1280" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+  <line x1="1280" y1="0" x2="0" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+</svg>

public/images/promo-2.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <rect width="1280" height="720" fill="#fef2f2"/>
+  <line x1="0" y1="0" x2="1280" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+  <line x1="1280" y1="0" x2="0" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+</svg>

public/images/promo-3.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <rect width="1280" height="720" fill="#fef2f2"/>
+  <line x1="0" y1="0" x2="1280" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+  <line x1="1280" y1="0" x2="0" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+</svg>

public/images/sale-banner.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <rect width="1280" height="720" fill="#fef2f2"/>
+  <line x1="0" y1="0" x2="1280" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+  <line x1="1280" y1="0" x2="0" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+</svg>

public/images/slider-1.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <rect width="1280" height="720" fill="#fef2f2"/>
+  <line x1="0" y1="0" x2="1280" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+  <line x1="1280" y1="0" x2="0" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+</svg>

public/images/slider-2.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <rect width="1280" height="720" fill="#fef2f2"/>
+  <line x1="0" y1="0" x2="1280" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+  <line x1="1280" y1="0" x2="0" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+</svg>

public/images/slider-3.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <rect width="1280" height="720" fill="#fef2f2"/>
+  <line x1="0" y1="0" x2="1280" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+  <line x1="1280" y1="0" x2="0" y2="720" stroke="#fca5a5" stroke-width="2" stroke-dasharray="12 10"/>
+</svg>

src/components/home/AboutSanihome.tsx

@@ -44,6 +44,8 @@ export function AboutSanihome() {
             </div>
           </div>
           <Placeholder
+            src="/images/about.svg"
+            alt="درباره سانی‌هوم"
             width="100%"
             height="360px"
             label="560×360"

src/components/home/BlogCarousel.tsx

@@ -19,6 +19,8 @@ export function BlogCarousel() {
               className="w-[280px] shrink-0 overflow-hidden rounded-xl border border-border bg-surface transition-shadow hover:shadow-md md:w-[300px]"
             >
               <Placeholder
+                src={post.image}
+                alt={post.title}
                 width="100%"
                 height="160px"
                 label="300×160"

src/components/home/FeaturedCategories.tsx

@@ -20,6 +20,8 @@ export function FeaturedCategories() {
               style={{ animationDelay: `${i * 60}ms` }}
             >
               <Placeholder
+                src={cat.image}
+                alt={cat.name}
                 width="72px"
                 height="72px"
                 label="72×72"

src/components/home/HeroSlider.tsx

@@ -7,6 +7,11 @@ import { sliderSlides } from "@/data/sample";
 export function HeroSlider() {
   const [active, setActive] = useState(1);
 
+  const getIndex = (offset: number) => {
+    const len = sliderSlides.length;
+    return (active + offset + len) % len;
+  };
+
   const positions = [
     { offset: -1, scale: "scale-[0.92]", opacity: "opacity-55", z: "z-10" },
     { offset: 0, scale: "scale-100", opacity: "opacity-100", z: "z-20" },
@@ -19,6 +24,7 @@ export function HeroSlider() {
         <div className="relative h-[220px] sm:h-[280px] md:h-[340px] lg:h-[380px]">
           {positions.map(({ offset, scale, opacity, z }) => {
             const isCenter = offset === 0;
+            const slide = sliderSlides[getIndex(offset)];
 
             return (
               <div
@@ -33,6 +39,8 @@ export function HeroSlider() {
               >
                 <div className="overflow-hidden rounded-2xl border border-border bg-surface shadow-lg">
                   <Placeholder
+                    src={slide.image}
+                    alt={slide.title}
                     width="100%"
                     label={isCenter ? "1280×380" : "880×350"}
                     className={`w-full rounded-none border-0 h-[200px] sm:h-[260px] md:h-[310px] ${

src/components/home/SamsungCarousel.tsx

@@ -19,6 +19,7 @@ export function SamsungCarousel() {
               name={product.name}
               brand={product.brand}
               price={product.price}
+              image={product.image}
               variant="brand"
             />
           ))}

src/components/home/SpecialSaleCarousel.tsx

@@ -11,6 +11,8 @@ function SpecialSaleBanner() {
       className="relative w-[220px] shrink-0 self-stretch overflow-hidden rounded-xl border border-border md:w-[240px]"
     >
       <Placeholder
+        src="/images/sale-banner.svg"
+        alt="فروش ویژه"
         width="100%"
         label="240×380"
         className="h-full min-h-[380px] w-full rounded-none border-0"
@@ -38,6 +40,7 @@ export function SpecialSaleCarousel() {
               price={product.price}
               oldPrice={product.oldPrice}
               discount={product.discount}
+              image={product.image}
               variant="sale"
             />
           ))}

src/components/home/ThreeBanners.tsx

@@ -1,9 +1,9 @@
 import { Placeholder } from "@/components/ui/Placeholder";
 
 const banners = [
-  { title: "ماشین لباسشویی", subtitle: "از ۲۸ میلیون", label: "420×160" },
+  { title: "ماشین لباسشویی", subtitle: "از ۲۸ میلیون", label: "420×160", image: "/images/promo-1.svg" },
-  { title: "جاروبرقی", subtitle: "ارسال فوری", label: "420×160" },
+  { title: "جاروبرقی", subtitle: "ارسال فوری", label: "420×160", image: "/images/promo-2.svg" },
-  { title: "لوازم آشپزخانه", subtitle: "تا ۲۰٪ تخفیف", label: "420×160" },
+  { title: "لوازم آشپزخانه", subtitle: "تا ۲۰٪ تخفیف", label: "420×160", image: "/images/promo-3.svg" },
 ];
 
 export function ThreeBanners() {
@@ -18,6 +18,8 @@ export function ThreeBanners() {
               className="group relative overflow-hidden rounded-xl border border-border bg-surface transition-all hover:border-red hover:shadow-md"
             >
               <Placeholder
+                src={banner.image}
+                alt={banner.title}
                 width="100%"
                 height="160px"
                 label={banner.label}

src/components/home/TopSellingCarousel.tsx

@@ -19,6 +19,7 @@ export function TopSellingCarousel() {
               name={product.name}
               brand={product.brand}
               price={product.price}
+              image={product.image}
             />
           ))}
         </Carousel>

src/components/home/TwoBanners.tsx

@@ -9,7 +9,14 @@ export function TwoBanners() {
             href="#"
             className="group relative overflow-hidden rounded-2xl border border-border bg-surface transition-shadow hover:shadow-lg"
           >
-            <Placeholder width="100%" height="200px" label="640×200" className="w-full rounded-none border-0" />
+            <Placeholder
+              src="/images/banner-1.svg"
+              alt="تخفیف ویژه یخچال و فریزر"
+              width="100%"
+              height="200px"
+              label="640×200"
+              className="w-full rounded-none border-0"
+            />
             <div className="absolute inset-0 flex flex-col justify-end bg-gradient-to-t from-red-dark/80 to-transparent p-6">
               <p className="font-display text-xs tracking-widest text-red-muted uppercase">
                 Summer Sale
@@ -22,7 +29,14 @@ export function TwoBanners() {
             href="#"
             className="group relative overflow-hidden rounded-2xl border border-border bg-surface transition-shadow hover:shadow-lg"
           >
-            <Placeholder width="100%" height="200px" label="640×200" className="w-full rounded-none border-0" />
+            <Placeholder
+              src="/images/banner-2.svg"
+              alt="تلویزیون‌های هوشمند ۲۰۲۶"
+              width="100%"
+              height="200px"
+              label="640×200"
+              className="w-full rounded-none border-0"
+            />
             <div className="absolute inset-0 flex flex-col justify-end bg-gradient-to-t from-red-dark/80 to-transparent p-6">
               <p className="font-display text-xs tracking-widest text-red-muted uppercase">
                 Smart TV

src/components/ui/Placeholder.tsx

@@ -1,4 +1,6 @@
 type PlaceholderProps = {
+  src: string;
+  alt?: string;
   width: string;
   height?: string;
   label?: string;
@@ -6,6 +8,8 @@ type PlaceholderProps = {
 };
 
 export function Placeholder({
+  src,
+  alt = "",
   width,
   height,
   label,
@@ -15,12 +19,17 @@ export function Placeholder({
     <div
       className={`relative flex shrink-0 items-center justify-center overflow-hidden border border-dashed border-red-muted/60 bg-red-light/40 ${className}`}
       style={{ width, ...(height ? { height } : {}) }}
-      aria-hidden="true"
     >
-      <div className="absolute inset-0 bg-[linear-gradient(135deg,transparent_45%,rgba(220,38,38,0.06)_50%,transparent_55%)]" />
+      <img
-      <span className="font-display relative z-10 text-xs tracking-wider text-red-dark/50 uppercase">
+        src={src}
-        {label ?? `${width} × ${height ?? ""}`}
+        alt={alt}
-      </span>
+        className="absolute inset-0 h-full w-full object-cover"
+      />
+      {label && (
+        <span className="font-display pointer-events-none relative z-10 rounded bg-white/70 px-1.5 py-0.5 text-xs tracking-wider text-red-dark/50 uppercase">
+          {label}
+        </span>
+      )}
     </div>
   );
 }

src/components/ui/ProductCard.tsx

@@ -7,6 +7,7 @@ type ProductCardProps = {
   price: number;
   oldPrice?: number;
   discount?: number;
+  image: string;
   variant?: "sale" | "default" | "brand";
 };
 
@@ -16,12 +17,20 @@ export function ProductCard({
   price,
   oldPrice,
   discount,
+  image,
   variant = "default",
 }: ProductCardProps) {
   return (
     <article className="group w-[220px] shrink-0 overflow-hidden rounded-xl border border-border bg-surface transition-shadow hover:shadow-md md:w-[240px]">
       <div className="relative">
-        <Placeholder width="100%" height="200px" label="240×200" className="w-full rounded-none border-0 border-b border-dashed" />
+        <Placeholder
+          src={image}
+          alt={name}
+          width="100%"
+          height="200px"
+          label="240×200"
+          className="w-full rounded-none border-0 border-b border-dashed"
+        />
         {discount && (
           <span className="absolute top-3 right-3 rounded-md bg-red px-2 py-0.5 text-xs font-bold text-white">
             {discount}٪

src/data/sample.ts

@@ -1,12 +1,12 @@
 export const categories = [
-  { id: 1, name: "یخچال و فریزر", count: 48 },
+  { id: 1, name: "یخچال و فریزر", count: 48, image: "/images/category-1.svg" },
-  { id: 2, name: "ماشین لباسشویی", count: 36 },
+  { id: 2, name: "ماشین لباسشویی", count: 36, image: "/images/category-2.svg" },
-  { id: 3, name: "تلویزیون", count: 52 },
+  { id: 3, name: "تلویزیون", count: 52, image: "/images/category-3.svg" },
-  { id: 4, name: "جاروبرقی", count: 29 },
+  { id: 4, name: "جاروبرقی", count: 29, image: "/images/category-4.svg" },
-  { id: 5, name: "مایکروویو", count: 18 },
+  { id: 5, name: "مایکروویو", count: 18, image: "/images/category-5.svg" },
-  { id: 6, name: "ظرفشویی", count: 22 },
+  { id: 6, name: "ظرفشویی", count: 22, image: "/images/category-6.svg" },
-  { id: 7, name: "کولر و گرمایش", count: 31 },
+  { id: 7, name: "کولر و گرمایش", count: 31, image: "/images/category-7.svg" },
-  { id: 8, name: "لوازم آشپزخانه", count: 64 },
+  { id: 8, name: "لوازم آشپزخانه", count: 64, image: "/images/category-8.svg" },
 ];
 
 export const specialSaleProducts = [
@@ -17,6 +17,7 @@ export const specialSaleProducts = [
     price: 89500000,
     oldPrice: 102000000,
     discount: 12,
+    image: "/images/product-1.svg",
   },
   {
     id: 2,
@@ -25,6 +26,7 @@ export const specialSaleProducts = [
     price: 42800000,
     oldPrice: 48500000,
     discount: 11,
+    image: "/images/product-2.svg",
   },
   {
     id: 3,
@@ -33,6 +35,7 @@ export const specialSaleProducts = [
     price: 56200000,
     oldPrice: 62000000,
     discount: 9,
+    image: "/images/product-3.svg",
   },
   {
     id: 4,
@@ -41,6 +44,7 @@ export const specialSaleProducts = [
     price: 18900000,
     oldPrice: 23500000,
     discount: 19,
+    image: "/images/product-4.svg",
   },
   {
     id: 5,
@@ -49,6 +53,7 @@ export const specialSaleProducts = [
     price: 12400000,
     oldPrice: 14800000,
     discount: 16,
+    image: "/images/product-5.svg",
   },
   {
     id: 6,
@@ -57,6 +62,7 @@ export const specialSaleProducts = [
     price: 35600000,
     oldPrice: 39900000,
     discount: 10,
+    image: "/images/product-6.svg",
   },
 ];
 
@@ -67,6 +73,7 @@ export const topSellingProducts = [
     brand: "LG",
     price: 67800000,
     sold: 124,
+    image: "/images/product-7.svg",
   },
   {
     id: 8,
@@ -74,6 +81,7 @@ export const topSellingProducts = [
     brand: "LG",
     price: 98500000,
     sold: 89,
+    image: "/images/product-8.svg",
   },
   {
     id: 9,
@@ -81,6 +89,7 @@ export const topSellingProducts = [
     brand: "Samsung",
     price: 38900000,
     sold: 156,
+    image: "/images/product-9.svg",
   },
   {
     id: 10,
@@ -88,6 +97,7 @@ export const topSellingProducts = [
     brand: "Gree",
     price: 24500000,
     sold: 203,
+    image: "/images/product-10.svg",
   },
   {
     id: 11,
@@ -95,6 +105,7 @@ export const topSellingProducts = [
     brand: "Bosch",
     price: 16800000,
     sold: 67,
+    image: "/images/product-11.svg",
   },
   {
     id: 12,
@@ -102,6 +113,7 @@ export const topSellingProducts = [
     brand: "Samsung",
     price: 8900000,
     sold: 178,
+    image: "/images/product-12.svg",
   },
 ];
 
@@ -111,36 +123,42 @@ export const samsungProducts = [
     name: "یخچال Bespoke سامسونگ",
     brand: "Samsung",
     price: 112000000,
+    image: "/images/product-13.svg",
   },
   {
     id: 14,
     name: "ماشین لباسشویی AI EcoBubble",
     brand: "Samsung",
     price: 45600000,
+    image: "/images/product-14.svg",
   },
   {
     id: 15,
     name: "تلویزیون Neo QLED 8K",
     brand: "Samsung",
     price: 185000000,
+    image: "/images/product-15.svg",
   },
   {
     id: 16,
     name: "جاروبرقی Jet ۹۰",
     brand: "Samsung",
     price: 21500000,
+    image: "/images/product-16.svg",
   },
   {
     id: 17,
     name: "مایکروویو Grill سامسونگ",
     brand: "Samsung",
     price: 13800000,
+    image: "/images/product-17.svg",
   },
   {
     id: 18,
     name: "کولر گازی WindFree",
     brand: "Samsung",
     price: 32800000,
+    image: "/images/product-18.svg",
   },
 ];
 
@@ -151,6 +169,7 @@ export const blogPosts = [
     excerpt: "نکات مهم برای انتخاب یخچال با توجه به فضای آشپزخانه و تعداد اعضای خانواده.",
     date: "۱۲ مرداد ۱۴۰۵",
     readTime: "۵ دقیقه",
+    image: "/images/blog-1.svg",
   },
   {
     id: 2,
@@ -158,6 +177,7 @@ export const blogPosts = [
     excerpt: "تفاوت‌های فنی و کاربردی دو تکنولوژی محبوب نمایشگر در سال ۱۴۰۵.",
     date: "۸ مرداد ۱۴۰۵",
     readTime: "۷ دقیقه",
+    image: "/images/blog-2.svg",
   },
   {
     id: 3,
@@ -165,6 +185,7 @@ export const blogPosts = [
     excerpt: "راهکارهای عملی برای صرفه‌جویی در قبض برق با استفاده هوشمند از لوازم برقی.",
     date: "۳ مرداد ۱۴۰۵",
     readTime: "۴ دقیقه",
+    image: "/images/blog-3.svg",
   },
   {
     id: 4,
@@ -172,6 +193,7 @@ export const blogPosts = [
     excerpt: "نگاهی به سری Bespoke و Neo QLED در نمایشگاه لوازم خانگی امسال.",
     date: "۲۸ تیر ۱۴۰۵",
     readTime: "۶ دقیقه",
+    image: "/images/blog-4.svg",
   },
 ];
 
@@ -181,18 +203,21 @@ export const sliderSlides = [
     title: "جشنواره تابستانه لوازم خانگی",
     subtitle: "تا ۳۰٪ تخفیف روی برندهای منتخب",
     cta: "مشاهده پیشنهادها",
+    image: "/images/slider-1.svg",
   },
   {
     id: 2,
     title: "سری جدید Samsung Bespoke",
     subtitle: "طراحی هوشمند برای آشپزخانه مدرن",
     cta: "کاوش مجموعه",
+    image: "/images/slider-2.svg",
   },
   {
     id: 3,
     title: "ارسال رایگان به سراسر کشور",
     subtitle: "برای سفارش‌های بالای ۵ میلیون تومان",
     cta: "خرید کنید",
+    image: "/images/slider-3.svg",
   },
 ];