diff --git a/.github/workflows/deploy-application.yml b/.github/workflows/deploy-application.yml
index 0b8a3fba..986bc6b7 100644
--- a/.github/workflows/deploy-application.yml
+++ b/.github/workflows/deploy-application.yml
@@ -110,6 +110,12 @@ jobs:
           npm ci
           npm run build
 
+      - name: Run Frontend Lint & Format Check
+        working-directory: ./shop
+        run: |
+          npm run lint
+          npm run format:check
+
       - name: Setup Environment
         working-directory: ./shop
         run: |
diff --git a/admin/AGENTS.md b/admin/AGENTS.md
index 80075b94..59cebf25 100644
--- a/admin/AGENTS.md
+++ b/admin/AGENTS.md
@@ -113,7 +113,7 @@ This project has domain-specific skills available in `**/skills/**`. You MUST ac
 # Test Enforcement
 
 - Every change must be programmatically tested. Write a new test or update an existing test, then run the affected tests to make sure they pass.
-- Run the minimum number of tests needed to ensure code quality and speed. Use `php artisan test --compact` with a specific filename or filter.
+- Run the minimum number of tests needed to ensure code quality and speed. Use Pest directly (not `php artisan test`): `vendor/bin/pest` with a specific filename or `--filter`.
 
 === laravel/core rules ===
 
@@ -158,7 +158,7 @@ This project has domain-specific skills available in `**/skills/**`. You MUST ac
 
 - This project uses Pest for testing. Create tests: `php artisan make:test --pest {name}`.
 - The `{name}` argument should not include the test suite directory. Use `php artisan make:test --pest SomeFeatureTest` instead of `php artisan make:test --pest Feature/SomeFeatureTest`.
-- Run tests: `php artisan test --compact` or filter: `php artisan test --compact --filter=testName`.
+- Run tests with Pest directly (not `php artisan test`): `vendor/bin/pest` or filter: `vendor/bin/pest --filter=testName`.
 - Do NOT delete tests without approval.
 
 === filament/filament rules ===
diff --git a/admin/app/Filament/Resources/ProductResource.php b/admin/app/Filament/Resources/ProductResource.php
index 9168ebac..ff7192d6 100644
--- a/admin/app/Filament/Resources/ProductResource.php
+++ b/admin/app/Filament/Resources/ProductResource.php
@@ -15,6 +15,7 @@
 use App\Models\AttributeGroup;
 use App\Models\AttributeGroupCategory;
 use App\Models\Product;
+use App\Models\Variety;
 use Filament\Actions\BulkActionGroup;
 use Filament\Actions\DeleteBulkAction;
 use Filament\Actions\EditAction;
@@ -27,6 +28,7 @@
 use Filament\Forms\Components\TextInput;
 use Filament\Forms\Components\Toggle;
 use Filament\Resources\Resource;
+use Filament\Schemas\Components\Fieldset;
 use Filament\Schemas\Components\Utilities\Get;
 use Filament\Schemas\Components\Utilities\Set;
 use Filament\Schemas\Schema;
@@ -356,6 +358,27 @@ public static function form(Schema $schema): Schema
                             ->required()
                             ->options(VarietyStatusEnum::options())
                             ->default(VarietyStatusEnum::PUBLISHED->value),
+                        Fieldset::make(trans('product.variety_image'))
+                            ->relationship('image')
+                            ->schema([
+                                FileUpload::make('path')
+                                    ->label(trans('product.path'))
+                                    ->image()
+                                    ->nullable()
+                                    ->columnSpanFull(),
+                                TextInput::make('alt_text')
+                                    ->label(trans('product.alt_text'))
+                                    ->nullable()
+                                    ->maxLength(255),
+                            ])
+                            ->mutateRelationshipDataBeforeSaveUsing(function (array $data, Variety $record): array {
+                                if (empty($data['path'])) {
+                                    $record->image?->delete();
+                                }
+
+                                return $data;
+                            })
+                            ->columnSpanFull(),
                     ])
                     ->columnSpanFull(),
             ]);
diff --git a/admin/app/Filament/Resources/VarietyResource.php b/admin/app/Filament/Resources/VarietyResource.php
index e4575c81..1754a76f 100644
--- a/admin/app/Filament/Resources/VarietyResource.php
+++ b/admin/app/Filament/Resources/VarietyResource.php
@@ -15,14 +15,17 @@
 use Filament\Actions\DeleteBulkAction;
 use Filament\Actions\EditAction;
 use Filament\Forms\Components\ColorPicker;
+use Filament\Forms\Components\FileUpload;
 use Filament\Forms\Components\Select;
 use Filament\Forms\Components\TextInput;
 use Filament\Forms\Components\Toggle;
 use Filament\Resources\Resource;
+use Filament\Schemas\Components\Fieldset;
 use Filament\Schemas\Components\Utilities\Get;
 use Filament\Schemas\Schema;
 use Filament\Tables\Columns\ColorColumn;
 use Filament\Tables\Columns\IconColumn;
+use Filament\Tables\Columns\ImageColumn;
 use Filament\Tables\Columns\TextColumn;
 use Filament\Tables\Table;
 use Illuminate\Database\Eloquent\Builder;
@@ -130,6 +133,27 @@ public static function form(Schema $schema): Schema
                     ->columnSpanFull()
                     ->hintIcon('heroicon-o-information-circle')
                     ->hintIconTooltip(trans('variety.additional_attributes_hint')),
+                Fieldset::make(trans('variety.image'))
+                    ->relationship('image')
+                    ->schema([
+                        FileUpload::make('path')
+                            ->label(trans('variety.path'))
+                            ->image()
+                            ->nullable()
+                            ->columnSpanFull(),
+                        TextInput::make('alt_text')
+                            ->label(trans('variety.alt_text'))
+                            ->nullable()
+                            ->maxLength(255),
+                    ])
+                    ->mutateRelationshipDataBeforeSaveUsing(function (array $data, Variety $record): array {
+                        if (empty($data['path'])) {
+                            $record->image?->delete();
+                        }
+
+                        return $data;
+                    })
+                    ->columnSpanFull(),
             ]);
     }
 
@@ -137,6 +161,8 @@ public static function table(Table $table): Table
     {
         return $table
             ->columns([
+                ImageColumn::make('image.path')
+                    ->label(trans('variety.image')),
                 TextColumn::make('product.heading')
                     ->label(trans('variety.product'))
                     ->limit(30)
diff --git a/admin/app/Models/Variety.php b/admin/app/Models/Variety.php
index 6d610747..ecd9a395 100644
--- a/admin/app/Models/Variety.php
+++ b/admin/app/Models/Variety.php
@@ -12,6 +12,7 @@
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
 use Illuminate\Database\Eloquent\Relations\BelongsToMany;
 use Illuminate\Database\Eloquent\Relations\HasMany;
+use Illuminate\Database\Eloquent\Relations\MorphOne;
 
 /**
  * @property positive-int $id
@@ -29,6 +30,7 @@
  * @property Collection<Attribute> $attributes
  * @property Collection<Discount> $discounts
  * @property Collection<Review> $reviews
+ * @property Image|null $image
  */
 class Variety extends Model
 {
@@ -68,6 +70,8 @@ protected static function booted(): void
 
         static::saved(fn (Variety $variety) => $variety->syncProductVarietyCount());
         static::deleted(fn (Variety $variety) => $variety->syncProductVarietyCount());
+
+        static::deleting(fn (Variety $variety) => $variety->image?->delete());
     }
 
     public function syncProductVarietyCount(): void
@@ -94,6 +98,11 @@ public function attribute(): BelongsTo
         return $this->belongsTo(Attribute::class);
     }
 
+    public function image(): MorphOne
+    {
+        return $this->morphOne(Image::class, 'imageable');
+    }
+
     public function attributes(): BelongsToMany
     {
         return $this->belongsToMany(Attribute::class)->withTimestamps();
diff --git a/admin/database/factories/AddressFactory.php b/admin/database/factories/AddressFactory.php
index 5c58373d..433479ce 100644
--- a/admin/database/factories/AddressFactory.php
+++ b/admin/database/factories/AddressFactory.php
@@ -28,7 +28,7 @@ public function definition(): array
             'postal_code' => $this->faker->postcode(),
             'address' => $this->faker->address(),
             'description' => $this->faker->text(),
-            'city_id' => City::factory(),
+            'city_id' => City::query()->inRandomOrder()->value('id') ?? City::factory(),
             'prime' => false,
         ];
     }
diff --git a/admin/database/factories/BannerFactory.php b/admin/database/factories/BannerFactory.php
index 64c0f32f..9643c679 100644
--- a/admin/database/factories/BannerFactory.php
+++ b/admin/database/factories/BannerFactory.php
@@ -34,7 +34,7 @@ public function withImages(int $count = 3): static
         return $this->afterCreating(function (Banner $banner) use ($count) {
             for ($i = 0; $i < $count; $i++) {
                 $banner->images()->create([
-                    'path' => fake()->imageUrl(),
+                    'path' => ImageFactory::placeholderUrl(),
                     'is_featured' => $i === 0,
                     'order' => $i,
                     'alt_text' => fake()->words(2, true),
diff --git a/admin/database/factories/BrandFactory.php b/admin/database/factories/BrandFactory.php
index d6ea7590..4f83f046 100644
--- a/admin/database/factories/BrandFactory.php
+++ b/admin/database/factories/BrandFactory.php
@@ -36,7 +36,7 @@ public function withImage(): BrandFactory | Factory
     {
         return $this->afterCreating(function (Brand $brand) {
             $brand->image()->create([
-                'path' => fake()->imageUrl(),
+                'path' => ImageFactory::placeholderUrl(),
                 'imageable_type' => Brand::class,
                 'imageable_id' => $brand->id,
             ]);
diff --git a/admin/database/factories/CategoryFactory.php b/admin/database/factories/CategoryFactory.php
index 00ef284a..a35a4a39 100644
--- a/admin/database/factories/CategoryFactory.php
+++ b/admin/database/factories/CategoryFactory.php
@@ -40,7 +40,7 @@ public function withImage(): BrandFactory | Factory
     {
         return $this->afterCreating(function (Category $category) {
             $category->image()->create([
-                'path' => fake()->imageUrl(),
+                'path' => ImageFactory::placeholderUrl(),
                 'imageable_type' => Category::class,
                 'imageable_id' => $category->id,
             ]);
diff --git a/admin/database/factories/CityFactory.php b/admin/database/factories/CityFactory.php
index d78c68a8..c0adebe1 100644
--- a/admin/database/factories/CityFactory.php
+++ b/admin/database/factories/CityFactory.php
@@ -22,7 +22,7 @@ public function definition(): array
     {
         return [
             'name' => $this->faker->city,
-            'province_id' => Province::factory()->create()->id,
+            'province_id' => Province::query()->inRandomOrder()->value('id') ?? Province::factory(),
         ];
     }
 }
diff --git a/admin/database/factories/GatewayFactory.php b/admin/database/factories/GatewayFactory.php
index 8386015f..a2beaf7c 100644
--- a/admin/database/factories/GatewayFactory.php
+++ b/admin/database/factories/GatewayFactory.php
@@ -35,7 +35,7 @@ public function withImage(): static
     {
         return $this->afterCreating(function (Gateway $gateway): void {
             $gateway->image()->create([
-                'path' => fake()->imageUrl(),
+                'path' => ImageFactory::placeholderUrl(),
                 'alt_text' => fake()->words(2, true),
             ]);
         });
diff --git a/admin/database/factories/ImageFactory.php b/admin/database/factories/ImageFactory.php
index 0996f642..53a6a3f1 100644
--- a/admin/database/factories/ImageFactory.php
+++ b/admin/database/factories/ImageFactory.php
@@ -28,9 +28,22 @@ public function definition(): array
         $imageableType = $this->faker->randomElement($imageableTypes);
 
         return [
-            'path' => fake()->imageUrl,
+            'path' => self::placeholderUrl(),
             'imageable_id' => $imageableType::factory(),
             'imageable_type' => $imageableType,
         ];
     }
+
+    /**
+     * A live placeholder image URL.
+     *
+     * Faker's default `imageUrl()` points at via.placeholder.com, which has
+     * been shut down; placehold.co is a working replacement.
+     */
+    public static function placeholderUrl(int $width = 640, int $height = 480): string
+    {
+        $color = ltrim(fake()->hexColor(), '#');
+
+        return "https://placehold.co/{$width}x{$height}/{$color}/ffffff?text=" . urlencode(fake()->word());
+    }
 }
diff --git a/admin/database/factories/PageFactory.php b/admin/database/factories/PageFactory.php
index f096afd0..3b4955fb 100644
--- a/admin/database/factories/PageFactory.php
+++ b/admin/database/factories/PageFactory.php
@@ -38,7 +38,7 @@ public function withImage(): static
     {
         return $this->afterCreating(function (Page $page): void {
             $page->image()->create([
-                'path' => fake()->imageUrl(),
+                'path' => ImageFactory::placeholderUrl(),
                 'alt_text' => fake()->words(2, true),
             ]);
         });
diff --git a/admin/database/factories/ProductFactory.php b/admin/database/factories/ProductFactory.php
index aa63faf6..2f0a3cd8 100644
--- a/admin/database/factories/ProductFactory.php
+++ b/admin/database/factories/ProductFactory.php
@@ -56,7 +56,7 @@ public function withImages(int $count = 3): static
         return $this->afterCreating(function (Product $product) use ($count) {
             for ($i = 0; $i < $count; $i++) {
                 $product->images()->create([
-                    'path' => fake()->imageUrl(),
+                    'path' => ImageFactory::placeholderUrl(),
                     'is_featured' => $i === 0, // First image featured
                     'order' => $i,
                     'alt_text' => fake()->words(2, true),
diff --git a/admin/database/factories/ReceiptFactory.php b/admin/database/factories/ReceiptFactory.php
index 182d5e2f..589d62a8 100644
--- a/admin/database/factories/ReceiptFactory.php
+++ b/admin/database/factories/ReceiptFactory.php
@@ -39,7 +39,7 @@ public function withImage(): static
     {
         return $this->afterCreating(function (Receipt $receipt): void {
             $receipt->image()->create([
-                'path' => fake()->imageUrl(),
+                'path' => ImageFactory::placeholderUrl(),
                 'alt_text' => fake()->words(2, true),
             ]);
         });
diff --git a/admin/database/factories/SlideFactory.php b/admin/database/factories/SlideFactory.php
index 0712a452..64ab093c 100644
--- a/admin/database/factories/SlideFactory.php
+++ b/admin/database/factories/SlideFactory.php
@@ -33,7 +33,7 @@ public function withImage(): static
     {
         return $this->afterCreating(function (Slide $slide): void {
             $slide->image()->create([
-                'path' => fake()->imageUrl(),
+                'path' => ImageFactory::placeholderUrl(),
                 'is_featured' => true,
                 'order' => 0,
                 'alt_text' => $slide->heading,
diff --git a/admin/database/factories/VarietyFactory.php b/admin/database/factories/VarietyFactory.php
index 06f549dc..9fc63967 100644
--- a/admin/database/factories/VarietyFactory.php
+++ b/admin/database/factories/VarietyFactory.php
@@ -41,4 +41,31 @@ public function withAttribute(Attribute $attribute): static
             'attribute_id' => $attribute->id,
         ]);
     }
+
+    public function published(): static
+    {
+        return $this->state([
+            'status' => VarietyStatusEnum::PUBLISHED,
+        ]);
+    }
+
+    public function inStock(): static
+    {
+        return $this->state([
+            'has_stock' => true,
+            'inventory' => fake()->numberBetween(5, 100),
+        ]);
+    }
+
+    public function withImage(): static
+    {
+        return $this->afterCreating(function (Variety $variety): void {
+            $variety->image()->create([
+                'path' => ImageFactory::placeholderUrl(),
+                'is_featured' => true,
+                'order' => 0,
+                'alt_text' => $variety->attribute_value ?? $variety->color,
+            ]);
+        });
+    }
 }
diff --git a/admin/database/seeders/CategorySeeder.php b/admin/database/seeders/CategorySeeder.php
index 598a66dd..17cc1a25 100644
--- a/admin/database/seeders/CategorySeeder.php
+++ b/admin/database/seeders/CategorySeeder.php
@@ -8,6 +8,7 @@
 use App\Models\Category;
 use Illuminate\Database\Seeder;
 use Illuminate\Support\Arr; // Import the Arr facade
+use Illuminate\Support\Facades\DB;
 
 class CategorySeeder extends Seeder
 {
@@ -108,6 +109,13 @@ public function run(): void
                 $this->createChildren($category['children'], $category['id']);
             }
         }
+
+        // Explicit IDs above leave Postgres' auto-increment sequence behind, so
+        // advance it past the seeded rows to avoid duplicate-key errors on
+        // categories created later via the admin panel.
+        if (DB::getDriverName() === 'pgsql') {
+            DB::statement("SELECT setval(pg_get_serial_sequence('categories', 'id'), (SELECT MAX(id) FROM categories))");
+        }
     }
 
     private function createChildren(array $children, int $parentId): void
diff --git a/admin/database/seeders/CitySeeder.php b/admin/database/seeders/CitySeeder.php
index d392b925..95983de3 100644
--- a/admin/database/seeders/CitySeeder.php
+++ b/admin/database/seeders/CitySeeder.php
@@ -7,6 +7,7 @@
 use App\Models\City;
 use App\Models\Province;
 use Illuminate\Database\Seeder;
+use Illuminate\Support\Facades\DB;
 
 class CitySeeder extends Seeder
 {
@@ -5747,5 +5748,11 @@ public function run(): void
 
         City::query()->insert($cities);
 
+        // Rows are inserted with explicit ids, so advance the auto-increment
+        // sequences; otherwise the next factory-created province/city collides.
+        if (DB::getDriverName() === 'pgsql') {
+            DB::statement("SELECT setval(pg_get_serial_sequence('provinces', 'id'), (SELECT MAX(id) FROM provinces))");
+            DB::statement("SELECT setval(pg_get_serial_sequence('cities', 'id'), (SELECT MAX(id) FROM cities))");
+        }
     }
 }
diff --git a/admin/database/seeders/ProductSeeder.php b/admin/database/seeders/ProductSeeder.php
index d8241d94..9c8e5b6c 100644
--- a/admin/database/seeders/ProductSeeder.php
+++ b/admin/database/seeders/ProductSeeder.php
@@ -5,6 +5,7 @@
 namespace Database\Seeders;
 
 use App\Models\Product;
+use App\Models\Variety;
 use Illuminate\Database\Seeder;
 
 class ProductSeeder extends Seeder
@@ -12,6 +13,17 @@ class ProductSeeder extends Seeder
     public function run(): void
     {
         Product::query()->truncate();
-        Product::factory()->count(20)->create();
+
+        Product::factory()
+            ->count(20)
+            ->withImages()
+            ->has(
+                Variety::factory()
+                    ->count(3)
+                    ->published()
+                    ->inStock()
+                    ->withImage()
+            )
+            ->create();
     }
 }
diff --git a/admin/database/seeders/VarietySeeder.php b/admin/database/seeders/VarietySeeder.php
index 0cc09049..f515a38f 100644
--- a/admin/database/seeders/VarietySeeder.php
+++ b/admin/database/seeders/VarietySeeder.php
@@ -4,6 +4,7 @@
 
 namespace Database\Seeders;
 
+use App\Models\Product;
 use App\Models\Variety;
 use Illuminate\Database\Seeder;
 
@@ -12,6 +13,21 @@ class VarietySeeder extends Seeder
     public function run(): void
     {
         Variety::query()->truncate();
-        Variety::factory()->count(20)->create();
+
+        $products = Product::query()->get();
+
+        if ($products->isEmpty()) {
+            $products = Product::factory()->count(5)->withImages()->create();
+        }
+
+        $products->each(function (Product $product): void {
+            Variety::factory()
+                ->count(fake()->numberBetween(1, 3))
+                ->for($product)
+                ->published()
+                ->inStock()
+                ->withImage()
+                ->create();
+        });
     }
 }
diff --git a/admin/docs/IMPLEMENTATION.md b/admin/docs/IMPLEMENTATION.md
index 70610cff..6d72e663 100644
--- a/admin/docs/IMPLEMENTATION.md
+++ b/admin/docs/IMPLEMENTATION.md
@@ -20,7 +20,7 @@ Catalog layer and platform basics.
 - [x] Attributes
 - [x] Attribute-Group-Categories
 - [x] Products (+ `product_attribute` pivot, product images)
-- [x] Varieties (+ `variety_counts` auto-sync on Product)
+- [x] Varieties (+ `variety_counts` auto-sync on Product; optional polymorphic image via `images` table — `withImage()` factory state, upload in VarietyResource and the ProductResource variety repeater, deleted with the variety)
 - [x] Discounts (auto-applied price rules per variety)
 - [x] Coupons (+ `coupon_product`, `coupon_variety`, `category_coupon` scoping pivots)
 - [x] Images (polymorphic, used via uploads - no standalone resource by design)
@@ -41,6 +41,8 @@ Cross-cutting improvements landed:
 - `ColorPicker` added to Variety form; `ColorColumn` in the table. Auto-fill from attribute only triggers when `attribute_id` changes, preserving manual overrides.
 - Documentation reorganized into `docs/` directory (`ShoFlow db doc.md`, `VARIETY_GUIDE.md`, `IMPLEMENTATION.md`, `CACHE.md`, `ORDER.md`).
 - **Inventory rule** (`ORDER.md`): stock is decremented only on successful payment (Strategy A); carts never change `varieties.inventory`.
+- **Placeholder images**: factories generate images via `ImageFactory::placeholderUrl()` (`placehold.co`); the dead `via.placeholder.com` service was removed. `ProductSeeder`/`VarietySeeder` attach images by default (`withImages()` / `withImage()`).
+- **Seeder robustness**: `CitySeeder` advances Postgres sequences with `setval` after explicit-ID inserts; `CityFactory`/`AddressFactory` reuse existing province/city rows before creating new ones, fixing `TestSeeder` unique-constraint failures.
 - **Localisation (fa / en)**: `SetLocale` middleware + `/locale/{locale}` route + user-menu switcher. All resources (Brand, Category, Product, Variety, City, Province, Coupon, Discount, ShippingLine, ShippingMethod, ShippingCity, Ancestor, AttributeGroup, AttributeGroupCategory, Attribute, Slider, Slide, Banner, Menu, MenuItem, Page, FAQ, Review, Wishlist, User) have `lang/en` + `lang/fa` files, `trans()`-based labels on all form fields and table columns, and translated enum `label()` methods. List-page subheadings are set via `mount()`. Filament vendor translations published for built-in UI strings.
 - **Persian font**: `A Iranian Sans` loaded from `public/fonts/AIranianSans.ttf`; applied globally when locale is `fa` via `public/css/persian-font.css` and a `renderHook` in `AdminPanelProvider`.
 - **Locale switching** (`en` / `fa`): `SetLocale` middleware reads the locale from session and calls `App::setLocale()`. A `/locale/{locale}` route stores the choice. Two user-menu items (English / فارسی) in `AdminPanelProvider` let admins switch. All Filament sub-package translations (`filament`, `filament-forms`, `filament-tables`, `filament-actions`, `filament-notifications`) are published to `lang/vendor/`.
diff --git a/admin/lang/en/product.php b/admin/lang/en/product.php
index 52b67c6f..76941289 100644
--- a/admin/lang/en/product.php
+++ b/admin/lang/en/product.php
@@ -81,6 +81,7 @@
     'variety_inventory' => 'Inventory',
     'variety_has_stock' => 'Has Stock',
     'variety_status' => 'Status',
+    'variety_image' => 'Variety Image',
 
     // Table columns
     'featured' => 'Featured',
diff --git a/admin/lang/en/variety.php b/admin/lang/en/variety.php
index 860e3499..822e5d91 100644
--- a/admin/lang/en/variety.php
+++ b/admin/lang/en/variety.php
@@ -27,6 +27,10 @@
     'additional_attributes' => 'Additional Attributes',
     'additional_attributes_hint' => 'Secondary attributes for this variety from other groups, e.g. Color when the primary group is Size.',
 
+    'image' => 'Image',
+    'path' => 'Image File',
+    'alt_text' => 'Alt Text',
+
     'product' => 'Product',
     'attribute_value' => 'Value',
     'created_at' => 'Created At',
diff --git a/admin/lang/fa/product.php b/admin/lang/fa/product.php
index af51db7d..e6b53df3 100644
--- a/admin/lang/fa/product.php
+++ b/admin/lang/fa/product.php
@@ -81,6 +81,7 @@
     'variety_inventory' => 'موجودی',
     'variety_has_stock' => 'موجود در انبار',
     'variety_status' => 'وضعیت',
+    'variety_image' => 'تصویر تنوع',
 
     // Table columns
     'featured' => 'تصویر شاخص',
diff --git a/admin/lang/fa/variety.php b/admin/lang/fa/variety.php
index f769e6d6..800e52ba 100644
--- a/admin/lang/fa/variety.php
+++ b/admin/lang/fa/variety.php
@@ -27,6 +27,10 @@
     'additional_attributes' => 'ویژگی‌های اضافی',
     'additional_attributes_hint' => 'ویژگی‌های ثانویه این تنوع از سایر گروه‌ها، مثلاً رنگ وقتی گروه اصلی سایز است.',
 
+    'image' => 'تصویر',
+    'path' => 'فایل تصویر',
+    'alt_text' => 'متن جایگزین',
+
     'product' => 'محصول',
     'attribute_value' => 'مقدار',
     'created_at' => 'تاریخ ایجاد',
diff --git a/admin/tests/Feature/Filament/Resource/VarietyResourceTest.php b/admin/tests/Feature/Filament/Resource/VarietyResourceTest.php
index 852cda9f..3f1cd0e3 100644
--- a/admin/tests/Feature/Filament/Resource/VarietyResourceTest.php
+++ b/admin/tests/Feature/Filament/Resource/VarietyResourceTest.php
@@ -147,6 +147,22 @@
         ->first()->id->toBe($attribute->id);
 });
 
+it('creates a featured image for a variety via the withImage factory state.', function () {
+    $variety = Variety::factory()->withImage()->create();
+
+    expect($variety->refresh()->image)->not->toBeNull()
+        ->and($variety->image->is_featured)->toBeTrue();
+});
+
+it('deletes the variety image when the variety is deleted.', function () {
+    $variety = Variety::factory()->withImage()->create();
+    $imageId = $variety->image->id;
+
+    $variety->delete();
+
+    $this->assertDatabaseMissing('images', ['id' => $imageId]);
+});
+
 it('cascade-deletes variety_attribute pivot rows when variety is deleted.', function () {
     $variety = Variety::factory()->create();
     $attribute = Attribute::factory()->create();
diff --git a/shop/.env.example b/shop/.env.example
index 9403564d..dbbe2a42 100644
--- a/shop/.env.example
+++ b/shop/.env.example
@@ -4,6 +4,12 @@ APP_KEY=
 APP_DEBUG=true
 APP_URL=http://localhost
 
+# Base URL for catalog images uploaded via the admin (Filament) app.
+# The admin serves its uploads at `<admin host>/storage`, so point this there.
+# Keep this separate from ASSET_URL so the storefront's own Vite build assets
+# keep loading from this app. Leave empty if all images use absolute URLs.
+IMAGE_URL=http://127.0.0.1:4040/storage
+
 APP_LOCALE=en
 APP_FALLBACK_LOCALE=en
 APP_FAKER_LOCALE=en_US
diff --git a/shop/.prettierignore b/shop/.prettierignore
new file mode 100644
index 00000000..d0e4d385
--- /dev/null
+++ b/shop/.prettierignore
@@ -0,0 +1,5 @@
+public/build
+bootstrap/ssr
+node_modules
+vendor
+storage
diff --git a/shop/.prettierrc.json b/shop/.prettierrc.json
new file mode 100644
index 00000000..9ce0ff35
--- /dev/null
+++ b/shop/.prettierrc.json
@@ -0,0 +1,8 @@
+{
+    "semi": true,
+    "singleQuote": true,
+    "tabWidth": 4,
+    "printWidth": 100,
+    "trailingComma": "all",
+    "plugins": ["prettier-plugin-tailwindcss"]
+}
diff --git a/shop/AGENTS.md b/shop/AGENTS.md
index 31aa9a43..e5129a69 100644
--- a/shop/AGENTS.md
+++ b/shop/AGENTS.md
@@ -156,9 +156,10 @@ This project has domain-specific skills available in `**/skills/**`. You MUST ac
 ## Running Tests
 
 - Run the minimal number of tests, using an appropriate filter, before finalizing.
-- To run all tests: `php artisan test --compact`.
-- To run all tests in a file: `php artisan test --compact tests/Feature/ExampleTest.php`.
-- To filter on a particular test name: `php artisan test --compact --filter=testName` (recommended after making a change to a related file).
+- Use Pest directly, not `php artisan test`.
+- To run all tests: `vendor/bin/pest`.
+- To run all tests in a file: `vendor/bin/pest tests/Feature/ExampleTest.php`.
+- To filter on a particular test name: `vendor/bin/pest --filter=testName` (recommended after making a change to a related file).
 
 </laravel-boost-guidelines>
 
@@ -203,6 +204,10 @@ The shop UI uses **Inertia + Vue 3** (SSR enabled). Clean, readable code is a ha
   - Register every icon as an object in `resources/js/fontawesome.js` (solid from `@fortawesome/free-solid-svg-icons`, brands from `@fortawesome/free-brands-svg-icons`) and pass the imported icon object: `<Icon :icon="..." />`.
   - Do NOT use string names with `library.add` (e.g. `['fab','instagram']`). Inertia turns FontAwesome's missing-icon `console.error` into an SSR exception, so string lookups break SSR. Passing icon objects is the SSR-safe, tree-shakeable pattern.
 - Pages must use Inertia's `<Head>` for SEO tags (see SEO section) and render meaningful content server-side.
+- **Lint & format the frontend** (the JS/Vue equivalent of Pint/PHPStan):
+  - **Prettier** formats `resources/js` (config in `.prettierrc.json`: 4-space indent, single quotes, semicolons, `printWidth` 100, Tailwind class sorting via `prettier-plugin-tailwindcss`).
+  - **ESLint** (flat config in `eslint.config.js`: `eslint-plugin-vue` recommended + `@vue/eslint-config-prettier`) analyses and auto-fixes Vue/JS issues.
+  - Scripts: `npm run format` (write) / `npm run format:check`, `npm run lint` / `npm run lint:fix`. Run them before finishing frontend work; `composer test-dev` also runs `lint` + `format:check`.
 
 ## Language, RTL & fonts
 
@@ -230,9 +235,21 @@ When adding a new feature, build files in this order, matching existing files:
 
 1. Migration (only when a genuinely new table is needed — most already exist via admin)
 2. Model, factory, seeder
-3. Controller + Inertia page (or Eloquent API Resource for JSON endpoints)
+3. DTOs + Actions for the page/endpoint data, then a thin Controller + Inertia page (or Eloquent API Resource for JSON endpoints)
 4. Test
 
+## Server-side structure (controllers, actions, DTOs)
+
+Keep controllers thin and push logic into single-purpose actions that return typed DTOs. See `ProductController` + `app/Actions/Product/*` + `app/DTOs/*` as the reference.
+
+- **Controllers** only resolve the request: load the model(s), call actions, and hand the result to `Inertia::render(...)`. No payload shaping or business logic in the controller. Inject actions via method (or constructor) parameters; the container resolves them.
+- **Actions** live in `app/Actions/<Area>/` (e.g. `Actions/Catalog`, `Actions/Product`), one responsibility per class, invoked via `__invoke(...)`. Reusable, cross-page actions (image/price shaping) go under `Actions/Catalog`; page-specific ones under their feature folder. Actions depend on other actions through constructor injection.
+- **DTOs** live in `app/DTOs/`, **one per model** (`ProductDTO`, `VarietyDTO`, `ImageDTO`, `ReviewDTO`, ...). They are `readonly` classes using constructor property promotion with `camelCase` properties that match the Inertia/JSON keys the frontend expects.
+  - Do not create DTOs for small value shapes (prices, links, breadcrumbs, variant axes/options). Type those as PHPDoc array shapes instead, e.g. `array{price: int, salePrice: int|null, discountPercent: int|null}` or `array{heading: string, url: string}`.
+  - Provide a `toArray(): array` for the Inertia boundary. Flat DTOs may use `get_object_vars($this)`; DTOs holding nested DTOs convert them explicitly in `toArray()`. Add a `fromArray(array $data): self` only when something actually hydrates the DTO from an array (e.g. cache payloads, queue jobs) — don't add it speculatively.
+  - Actions return DTOs (or plain typed arrays for value shapes / lightweight cards); the controller calls `->toArray()` on DTOs at the Inertia boundary so the frontend receives plain nested arrays. Do not pass DTO objects straight into `Inertia::render` (Inertia testing reads array keys, not object properties).
+- **Type every query closure** (100% type coverage requires it). Eager-load constraints inside `with([...])` receive a `Illuminate\Database\Eloquent\Relations\Relation` — type the param as `Relation` and use base query methods. Larastan can't resolve model scopes (`published()`, `active()`) on a bare `Relation`, so inline the filter instead, e.g. `fn (Relation $query) => $query->where('status', VarietyStatusEnum::PUBLISHED->value)`. `tap()` closures get a `Builder`; `map()`/`filter()`/`each()` over an Eloquent collection get the model type (`fn (Variety $variety) => ...`).
+
 ## Models
 
 - Declare `protected $fillable` (array) and `protected $casts` (array property; `User` uses the `casts()` method).
@@ -277,7 +294,7 @@ When adding a new feature, build files in this order, matching existing files:
 
 ## Tests
 
-- This project uses **Pest** (not PHPUnit — this overrides the auto-generated boost note above). Write tests as Pest functions (`it(...)`, `test(...)`, `expect(...)`) with `declare(strict_types=1);`. Create them with `php artisan make:test --pest {name}`.
+- This project uses **Pest** (not PHPUnit — this overrides the auto-generated boost note above). Write tests as Pest functions (`it(...)`, `test(...)`, `expect(...)`) with `declare(strict_types=1);`. Create them with `php artisan make:test --pest {name}`. Run them with `vendor/bin/pest`, not `php artisan test`.
 - Global setup lives in `tests/Pest.php`: `Feature` tests use `TestCase` + `DatabaseTransactions` (each test runs in a transaction that is rolled back).
 - **Shared database, not sqlite.** The shop is a read-only consumer of the admin-owned schema, so tests run against a real Postgres test database (`shop_flow_test`) whose schema is built by **admin's** migrations — never the shop's. The shop must not own or migrate those tables. Do not switch tests back to sqlite/`RefreshDatabase`; that hides schema drift from production.
 - **One-time local setup** (run from the admin container, pointing at the test DB):
@@ -296,6 +313,8 @@ DB_DATABASE=shop_flow_test php artisan db:seed --class="Database\Seeders\Setting
 
 - **No seller / marketplace system.** ShopFlow is a single-vendor store. Never add `seller_id`, `seller_creator_id`, or any seller relation to models, migrations, or controllers.
 - **Inventory**: stock is decremented only on successful payment (Strategy A); carts never change inventory. See `docs/ORDER.md`.
+- **Quantity cap**: the customer can never choose a quantity above the selected variety's available stock. The quantity input on the product/cart pages must clamp to the variety `inventory`; the add-to-cart action must reject amounts beyond it.
+- **Product gallery**: show all images together — the product images plus every variety image, combined and deduped by URL. Never hide images based on the selection; selecting a variety only switches the main image to that variety's photo (when it exists in the list).
 - **Addresses are immutable history.** Editing an address creates a new record (inheriting the edited one's primary status); addresses are never deleted, so orders keep an accurate history.
 
 ## Roadmap & docs
diff --git a/shop/app/Actions/Catalog/BuildProductCard.php b/shop/app/Actions/Catalog/BuildProductCard.php
new file mode 100644
index 00000000..deab9be4
--- /dev/null
+++ b/shop/app/Actions/Catalog/BuildProductCard.php
@@ -0,0 +1,41 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Actions\Catalog;
+
+use App\Models\Product;
+use App\Models\Variety;
+use Illuminate\Database\Eloquent\Collection;
+
+class BuildProductCard
+{
+    public function __construct(
+        private CalculatePricing $pricing,
+        private TransformImage $transformImage,
+    ) {}
+
+    /**
+     * Lightweight product card payload (used by carousels and related lists),
+     * deriving the lowest available price from the product's varieties.
+     *
+     * @return array<string, mixed>
+     */
+    public function __invoke(Product $product): array
+    {
+        /** @var Collection<int, Variety> $varieties */
+        $varieties = $product->varieties;
+
+        $pricing = $this->pricing->forVarieties($varieties, (int) $product->price);
+
+        return [
+            'id' => $product->id,
+            'heading' => $product->heading,
+            'url' => '/products/'.$product->slug,
+            'image' => ($this->transformImage)($product->featuredImage)?->toArray(),
+            'price' => $pricing['price'],
+            'salePrice' => $pricing['salePrice'],
+            'discountPercent' => $pricing['discountPercent'],
+        ];
+    }
+}
diff --git a/shop/app/Actions/Catalog/CalculatePricing.php b/shop/app/Actions/Catalog/CalculatePricing.php
new file mode 100644
index 00000000..dc7a5aaa
--- /dev/null
+++ b/shop/app/Actions/Catalog/CalculatePricing.php
@@ -0,0 +1,56 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Actions\Catalog;
+
+use App\Models\Variety;
+use Illuminate\Support\Collection;
+
+class CalculatePricing
+{
+    /**
+     * Lowest price (and sale price) across a set of varieties, falling back to
+     * the product's own price when it has none.
+     *
+     * @param  Collection<int, Variety>  $varieties
+     * @return array{price: int, salePrice: int|null, discountPercent: int|null}
+     */
+    public function forVarieties(Collection $varieties, int $fallbackPrice): array
+    {
+        $price = (int) ($varieties->min('price') ?? $fallbackPrice);
+
+        $rawSalePrice = $varieties
+            ->filter(fn (Variety $variety): bool => $variety->sale_price !== null)
+            ->min('sale_price');
+
+        return $this->shape($price, $rawSalePrice === null ? null : (int) $rawSalePrice);
+    }
+
+    /**
+     * Pricing for a single variety.
+     *
+     * @return array{price: int, salePrice: int|null, discountPercent: int|null}
+     */
+    public function forVariety(Variety $variety): array
+    {
+        return $this->shape(
+            (int) $variety->price,
+            $variety->sale_price === null ? null : (int) $variety->sale_price,
+        );
+    }
+
+    /**
+     * @return array{price: int, salePrice: int|null, discountPercent: int|null}
+     */
+    private function shape(int $price, ?int $salePrice): array
+    {
+        $hasDiscount = $salePrice !== null && $salePrice < $price;
+
+        return [
+            'price' => $price,
+            'salePrice' => $hasDiscount ? $salePrice : null,
+            'discountPercent' => $hasDiscount ? (int) round((($price - $salePrice) / $price) * 100) : null,
+        ];
+    }
+}
diff --git a/shop/app/Actions/Catalog/TransformImage.php b/shop/app/Actions/Catalog/TransformImage.php
new file mode 100644
index 00000000..74fd8dd9
--- /dev/null
+++ b/shop/app/Actions/Catalog/TransformImage.php
@@ -0,0 +1,26 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Actions\Catalog;
+
+use App\DTOs\ImageDTO;
+use App\Models\Image;
+
+class TransformImage
+{
+    /**
+     * Shape an image model into an ImageDTO (url + alt), or null when absent.
+     */
+    public function __invoke(?Image $image): ?ImageDTO
+    {
+        if ($image === null) {
+            return null;
+        }
+
+        return new ImageDTO(
+            url: $image->url,
+            alt: (string) ($image->alt_text ?? ''),
+        );
+    }
+}
diff --git a/shop/app/Actions/Home/GetFeaturedBrands.php b/shop/app/Actions/Home/GetFeaturedBrands.php
new file mode 100644
index 00000000..dc01581c
--- /dev/null
+++ b/shop/app/Actions/Home/GetFeaturedBrands.php
@@ -0,0 +1,38 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Actions\Home;
+
+use App\Actions\Catalog\TransformImage;
+use App\Models\Brand;
+
+class GetFeaturedBrands
+{
+    /**
+     * How many brands the strip shows.
+     */
+    private const LIMIT = 12;
+
+    public function __construct(private TransformImage $transformImage) {}
+
+    /**
+     * @return array<int, array<string, mixed>>
+     */
+    public function __invoke(): array
+    {
+        return Brand::query()
+            ->active()
+            ->with('image')
+            ->orderBy('heading')
+            ->limit(self::LIMIT)
+            ->get()
+            ->map(fn (Brand $brand): array => [
+                'id' => $brand->id,
+                'heading' => $brand->heading,
+                'url' => '/brands/'.$brand->slug,
+                'image' => ($this->transformImage)($brand->image)?->toArray(),
+            ])
+            ->all();
+    }
+}
diff --git a/shop/app/Actions/Home/GetHeroSlides.php b/shop/app/Actions/Home/GetHeroSlides.php
new file mode 100644
index 00000000..55a798dd
--- /dev/null
+++ b/shop/app/Actions/Home/GetHeroSlides.php
@@ -0,0 +1,46 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Actions\Home;
+
+use App\Actions\Catalog\TransformImage;
+use App\Models\Slide;
+use App\Models\Slider;
+use Illuminate\Database\Eloquent\Relations\Relation;
+
+class GetHeroSlides
+{
+    /**
+     * Admin-defined slider position the storefront home reads.
+     */
+    private const POSITION = 'home-main';
+
+    public function __construct(private TransformImage $transformImage) {}
+
+    /**
+     * @return array<int, array<string, mixed>>
+     */
+    public function __invoke(): array
+    {
+        $slider = Slider::query()
+            ->published()
+            ->where('position', self::POSITION)
+            ->with(['slides' => fn (Relation $query) => $query->orderBy('order'), 'slides.image'])
+            ->first();
+
+        if ($slider === null) {
+            return [];
+        }
+
+        return $slider->slides
+            ->map(fn (Slide $slide): array => [
+                'id' => $slide->id,
+                'heading' => $slide->heading,
+                'label' => $slide->label,
+                'url' => $slide->url,
+                'image' => ($this->transformImage)($slide->image)?->toArray(),
+            ])
+            ->all();
+    }
+}
diff --git a/shop/app/Actions/Home/GetHomeCategories.php b/shop/app/Actions/Home/GetHomeCategories.php
new file mode 100644
index 00000000..cecb37a1
--- /dev/null
+++ b/shop/app/Actions/Home/GetHomeCategories.php
@@ -0,0 +1,35 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Actions\Home;
+
+use App\Actions\Catalog\TransformImage;
+use App\Models\Category;
+
+class GetHomeCategories
+{
+    public function __construct(private TransformImage $transformImage) {}
+
+    /**
+     * Top-level active categories for the quick-links strip.
+     *
+     * @return array<int, array<string, mixed>>
+     */
+    public function __invoke(): array
+    {
+        return Category::query()
+            ->active()
+            ->whereNull('parent_id')
+            ->with('image')
+            ->orderBy('heading')
+            ->get()
+            ->map(fn (Category $category): array => [
+                'id' => $category->id,
+                'heading' => $category->heading,
+                'url' => '/categories/'.$category->slug,
+                'image' => ($this->transformImage)($category->image)?->toArray(),
+            ])
+            ->all();
+    }
+}
diff --git a/shop/app/Actions/Home/GetProductRows.php b/shop/app/Actions/Home/GetProductRows.php
new file mode 100644
index 00000000..0f9559b7
--- /dev/null
+++ b/shop/app/Actions/Home/GetProductRows.php
@@ -0,0 +1,51 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Actions\Home;
+
+use App\Actions\Catalog\BuildProductCard;
+use App\Enums\VarietyStatusEnum;
+use App\Models\Product;
+use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Database\Eloquent\Relations\Relation;
+
+class GetProductRows
+{
+    /**
+     * How many items each product carousel shows.
+     */
+    private const ROW_LIMIT = 12;
+
+    public function __construct(private BuildProductCard $buildProductCard) {}
+
+    /**
+     * Two product carousels: newest and most viewed. Empty rows are dropped.
+     *
+     * @return array<int, array<string, mixed>>
+     */
+    public function __invoke(): array
+    {
+        $rows = [
+            ['title' => 'جدیدترین محصولات', 'viewAllUrl' => '/products?sort=newest', 'query' => fn (Builder $q) => $q->latest('id')],
+            ['title' => 'پربازدیدترین محصولات', 'viewAllUrl' => '/products?sort=popular', 'query' => fn (Builder $q) => $q->orderByDesc('seen')],
+        ];
+
+        return array_values(array_filter(array_map(function (array $row): array {
+            $products = Product::query()
+                ->published()
+                ->with(['featuredImage', 'varieties' => fn (Relation $q) => $q->where('status', VarietyStatusEnum::PUBLISHED->value)])
+                ->tap($row['query'])
+                ->limit(self::ROW_LIMIT)
+                ->get()
+                ->map(fn (Product $product): array => ($this->buildProductCard)($product))
+                ->all();
+
+            return [
+                'title' => $row['title'],
+                'viewAllUrl' => $row['viewAllUrl'],
+                'products' => $products,
+            ];
+        }, $rows), fn (array $row): bool => $row['products'] !== []));
+    }
+}
diff --git a/shop/app/Actions/Home/GetPromoBanners.php b/shop/app/Actions/Home/GetPromoBanners.php
new file mode 100644
index 00000000..e2a9fd1a
--- /dev/null
+++ b/shop/app/Actions/Home/GetPromoBanners.php
@@ -0,0 +1,38 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Actions\Home;
+
+use App\Actions\Catalog\TransformImage;
+use App\Models\Banner;
+
+class GetPromoBanners
+{
+    /**
+     * Admin-defined banner position the storefront home reads.
+     */
+    private const POSITION = 'home-middle';
+
+    public function __construct(private TransformImage $transformImage) {}
+
+    /**
+     * @return array<int, array<string, mixed>>
+     */
+    public function __invoke(): array
+    {
+        return Banner::query()
+            ->published()
+            ->where('position', self::POSITION)
+            ->with('featuredImage')
+            ->orderBy('sort')
+            ->get()
+            ->map(fn (Banner $banner): array => [
+                'id' => $banner->id,
+                'heading' => $banner->heading,
+                'url' => $banner->url,
+                'image' => ($this->transformImage)($banner->featuredImage)?->toArray(),
+            ])
+            ->all();
+    }
+}
diff --git a/shop/app/Actions/Product/BuildProductBreadcrumbs.php b/shop/app/Actions/Product/BuildProductBreadcrumbs.php
new file mode 100644
index 00000000..7a6c5f92
--- /dev/null
+++ b/shop/app/Actions/Product/BuildProductBreadcrumbs.php
@@ -0,0 +1,36 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Actions\Product;
+
+use App\Models\Category;
+use App\Models\Product;
+
+class BuildProductBreadcrumbs
+{
+    /**
+     * Breadcrumb trail: home, category ancestors, then the product itself.
+     *
+     * @return array<int, array{heading: string, url: string|null}>
+     */
+    public function __invoke(Product $product): array
+    {
+        $chain = [];
+        $category = $product->category;
+
+        while ($category instanceof Category) {
+            array_unshift($chain, [
+                'heading' => $category->heading,
+                'url' => '/categories/'.$category->slug,
+            ]);
+            $category = $category->parent;
+        }
+
+        return [
+            ['heading' => 'خانه', 'url' => '/'],
+            ...$chain,
+            ['heading' => $product->heading, 'url' => null],
+        ];
+    }
+}
diff --git a/shop/app/Actions/Product/BuildProductDetail.php b/shop/app/Actions/Product/BuildProductDetail.php
new file mode 100644
index 00000000..af78df81
--- /dev/null
+++ b/shop/app/Actions/Product/BuildProductDetail.php
@@ -0,0 +1,145 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Actions\Product;
+
+use App\Actions\Catalog\CalculatePricing;
+use App\Actions\Catalog\TransformImage;
+use App\DTOs\ImageDTO;
+use App\DTOs\ProductDTO;
+use App\DTOs\ReviewDTO;
+use App\DTOs\VarietyDTO;
+use App\Models\Attribute;
+use App\Models\Image;
+use App\Models\Product;
+use App\Models\Review;
+use App\Models\Variety;
+use Illuminate\Database\Eloquent\Collection;
+
+class BuildProductDetail
+{
+    public function __construct(
+        private CalculatePricing $pricing,
+        private TransformImage $transformImage,
+        private BuildVariantAxes $buildVariantAxes,
+        private VarietyAttributes $varietyAttributes,
+    ) {}
+
+    /**
+     * Build the full product detail DTO for the storefront page.
+     */
+    public function __invoke(Product $product): ProductDTO
+    {
+        /** @var Collection<int, Variety> $varieties */
+        $varieties = $product->varieties;
+
+        $pricing = $this->pricing->forVarieties($varieties, (int) $product->price);
+
+        return new ProductDTO(
+            id: $product->id,
+            heading: $product->heading,
+            url: '/products/'.$product->slug,
+            content: $product->content,
+            title: $product->title,
+            description: $product->description,
+            noIndex: (bool) $product->no_index,
+            canonical: $product->canonical,
+            image: ($this->transformImage)($product->featuredImage),
+            gallery: $this->gallery($product),
+            brand: $product->brand === null ? null : [
+                'heading' => $product->brand->heading,
+                'url' => '/brands/'.$product->brand->slug,
+            ],
+            category: $product->category === null ? null : [
+                'heading' => $product->category->heading,
+                'url' => '/categories/'.$product->category->slug,
+            ],
+            price: $pricing['price'],
+            salePrice: $pricing['salePrice'],
+            discountPercent: $pricing['discountPercent'],
+            inStock: $varieties->contains(fn (Variety $variety): bool => $this->inStock($variety)),
+            variantAxes: ($this->buildVariantAxes)($varieties),
+            varieties: $varieties->map(fn (Variety $variety): VarietyDTO => $this->variety($variety))->all(),
+            highlights: $product->attributes
+                ->filter(fn (Attribute $attribute): bool => (bool) ($attribute->pivot->is_highlight ?? false))
+                ->map(fn (Attribute $attribute): array => ['value' => $attribute->value])
+                ->values()
+                ->all(),
+            specs: $product->attributes
+                ->map(fn (Attribute $attribute): array => ['value' => $attribute->value])
+                ->all(),
+            reviews: $product->reviews
+                ->map(fn (Review $review): ReviewDTO => new ReviewDTO(
+                    id: $review->id,
+                    heading: $review->heading,
+                    content: $review->content,
+                    author: $review->user?->name,
+                    date: $review->created_at?->toIso8601String(),
+                ))
+                ->all(),
+            reviewCount: $product->reviews->count(),
+        );
+    }
+
+    private function variety(Variety $variety): VarietyDTO
+    {
+        $pricing = $this->pricing->forVariety($variety);
+        $inStock = $this->inStock($variety);
+
+        return new VarietyDTO(
+            id: $variety->id,
+            label: $variety->attribute_value ?? $variety->attribute?->value,
+            color: $variety->color,
+            price: $pricing['price'],
+            salePrice: $pricing['salePrice'],
+            discountPercent: $pricing['discountPercent'],
+            inStock: $inStock,
+            inventory: $inStock ? (int) $variety->inventory : 0,
+            image: ($this->transformImage)($variety->image),
+            options: $this->options($variety),
+        );
+    }
+
+    /**
+     * Map of attribute-group id => list of values for a variety. A variety can
+     * carry several values in the same group (e.g. a color offered in sizes).
+     *
+     * @return array<int, array<int, string>>
+     */
+    private function options(Variety $variety): array
+    {
+        $options = [];
+
+        foreach (($this->varietyAttributes)($variety) as $attribute) {
+            $options[$attribute->attribute_group_id][] = $attribute->value;
+        }
+
+        return array_map(
+            fn (array $values): array => array_values(array_unique($values)),
+            $options,
+        );
+    }
+
+    /**
+     * Featured image first, then the rest of the gallery.
+     *
+     * @return array<int, ImageDTO>
+     */
+    private function gallery(Product $product): array
+    {
+        return $product->images
+            ->sortByDesc('is_featured')
+            ->map(fn (Image $image): ImageDTO => new ImageDTO(
+                url: $image->url,
+                alt: (string) ($image->alt_text ?? $product->heading),
+            ))
+            ->values()
+            ->all();
+    }
+
+    private function inStock(Variety $variety): bool
+    {
+        return $variety->has_stock && $variety->inventory > 0;
+    }
+}
diff --git a/shop/app/Actions/Product/BuildVariantAxes.php b/shop/app/Actions/Product/BuildVariantAxes.php
new file mode 100644
index 00000000..228e38e0
--- /dev/null
+++ b/shop/app/Actions/Product/BuildVariantAxes.php
@@ -0,0 +1,86 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Actions\Product;
+
+use App\Models\Variety;
+use Illuminate\Database\Eloquent\Collection;
+
+class BuildVariantAxes
+{
+    public function __construct(private VarietyAttributes $varietyAttributes) {}
+
+    /**
+     * Build selectable axes (one per attribute group) from the product's
+     * varieties, e.g. a "color" axis and a "size" axis. Each axis lists its
+     * distinct option values, keeping a hex color when the attribute has one.
+     *
+     * @param  Collection<int, Variety>  $varieties
+     * @return array<int, array{id: int, name: string, primary: bool, options: array<int, array{value: string, color: string|null}>}>
+     */
+    public function __invoke(Collection $varieties): array
+    {
+        $axes = [];
+
+        // The primary axis is the group most varieties pin via their primary
+        // attribute (attribute_id). Counting keeps it stable even if a single
+        // variety has inconsistent data; ties fall back to first seen.
+        $primaryVotes = [];
+
+        foreach ($varieties as $variety) {
+            if ($variety->attribute !== null) {
+                $groupId = $variety->attribute->attribute_group_id;
+                $primaryVotes[$groupId] = ($primaryVotes[$groupId] ?? 0) + 1;
+            }
+
+            foreach (($this->varietyAttributes)($variety) as $attribute) {
+                $groupId = $attribute->attribute_group_id;
+
+                $axes[$groupId] ??= [
+                    'id' => $groupId,
+                    'name' => (string) $attribute->attributeGroup->name,
+                    'options' => [],
+                ];
+
+                $axes[$groupId]['options'][$attribute->value] ??= [
+                    'value' => $attribute->value,
+                    'color' => $attribute->color,
+                ];
+            }
+        }
+
+        $primaryGroupId = $this->primaryGroupId($primaryVotes);
+
+        return array_values(array_map(
+            fn (array $axis): array => [
+                'id' => $axis['id'],
+                'name' => $axis['name'],
+                'primary' => $axis['id'] === $primaryGroupId,
+                'options' => array_values($axis['options']),
+            ],
+            $axes,
+        ));
+    }
+
+    /**
+     * The most-voted attribute group, or null when no variety has a primary.
+     *
+     * @param  array<int, int>  $primaryVotes
+     */
+    private function primaryGroupId(array $primaryVotes): ?int
+    {
+        if ($primaryVotes === []) {
+            return null;
+        }
+
+        $primaryGroupId = array_key_first($primaryVotes);
+        foreach ($primaryVotes as $groupId => $votes) {
+            if ($votes > $primaryVotes[$primaryGroupId]) {
+                $primaryGroupId = $groupId;
+            }
+        }
+
+        return $primaryGroupId;
+    }
+}
diff --git a/shop/app/Actions/Product/GetRelatedProducts.php b/shop/app/Actions/Product/GetRelatedProducts.php
new file mode 100644
index 00000000..7ff727d3
--- /dev/null
+++ b/shop/app/Actions/Product/GetRelatedProducts.php
@@ -0,0 +1,43 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Actions\Product;
+
+use App\Actions\Catalog\BuildProductCard;
+use App\Enums\VarietyStatusEnum;
+use App\Models\Product;
+use Illuminate\Database\Eloquent\Relations\Relation;
+
+class GetRelatedProducts
+{
+    /**
+     * How many related products to show.
+     */
+    private const LIMIT = 12;
+
+    public function __construct(private BuildProductCard $buildProductCard) {}
+
+    /**
+     * Related products (lightweight cards) from the same category.
+     *
+     * @return array<int, array<string, mixed>>
+     */
+    public function __invoke(Product $product): array
+    {
+        if ($product->category_id === null) {
+            return [];
+        }
+
+        return Product::query()
+            ->published()
+            ->where('category_id', $product->category_id)
+            ->whereKeyNot($product->id)
+            ->with(['featuredImage', 'varieties' => fn (Relation $query) => $query->where('status', VarietyStatusEnum::PUBLISHED->value)])
+            ->latest('id')
+            ->limit(self::LIMIT)
+            ->get()
+            ->map(fn (Product $related): array => ($this->buildProductCard)($related))
+            ->all();
+    }
+}
diff --git a/shop/app/Actions/Product/VarietyAttributes.php b/shop/app/Actions/Product/VarietyAttributes.php
new file mode 100644
index 00000000..c8326b1c
--- /dev/null
+++ b/shop/app/Actions/Product/VarietyAttributes.php
@@ -0,0 +1,32 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Actions\Product;
+
+use App\Models\Attribute;
+use App\Models\Variety;
+
+class VarietyAttributes
+{
+    /**
+     * The grouped attributes that define a variety: its primary attribute
+     * (attribute_id) first, then any additional pivoted attributes.
+     *
+     * @return array<int, Attribute>
+     */
+    public function __invoke(Variety $variety): array
+    {
+        $attributes = [];
+
+        if ($variety->attribute !== null) {
+            $attributes[] = $variety->attribute;
+        }
+
+        foreach ($variety->attributes as $attribute) {
+            $attributes[] = $attribute;
+        }
+
+        return $attributes;
+    }
+}
diff --git a/shop/app/DTOs/ImageDTO.php b/shop/app/DTOs/ImageDTO.php
new file mode 100644
index 00000000..aa70d6a1
--- /dev/null
+++ b/shop/app/DTOs/ImageDTO.php
@@ -0,0 +1,21 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\DTOs;
+
+readonly class ImageDTO
+{
+    public function __construct(
+        public string $url,
+        public string $alt = '',
+    ) {}
+
+    /**
+     * @return array<string, mixed>
+     */
+    public function toArray(): array
+    {
+        return get_object_vars($this);
+    }
+}
diff --git a/shop/app/DTOs/ProductDTO.php b/shop/app/DTOs/ProductDTO.php
new file mode 100644
index 00000000..0dd461e7
--- /dev/null
+++ b/shop/app/DTOs/ProductDTO.php
@@ -0,0 +1,74 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\DTOs;
+
+readonly class ProductDTO
+{
+    /**
+     * @param  array<int, ImageDTO>  $gallery
+     * @param  array{heading: string, url: string}|null  $brand
+     * @param  array{heading: string, url: string}|null  $category
+     * @param  array<int, array<string, mixed>>  $variantAxes
+     * @param  array<int, VarietyDTO>  $varieties
+     * @param  array<int, array{value: string}>  $highlights
+     * @param  array<int, array{value: string}>  $specs
+     * @param  array<int, ReviewDTO>  $reviews
+     */
+    public function __construct(
+        public int $id,
+        public string $heading,
+        public string $url,
+        public ?string $content,
+        public ?string $title,
+        public ?string $description,
+        public bool $noIndex,
+        public ?string $canonical,
+        public ?ImageDTO $image,
+        public array $gallery,
+        public ?array $brand,
+        public ?array $category,
+        public int $price,
+        public ?int $salePrice,
+        public ?int $discountPercent,
+        public bool $inStock,
+        public array $variantAxes,
+        public array $varieties,
+        public array $highlights,
+        public array $specs,
+        public array $reviews,
+        public int $reviewCount,
+    ) {}
+
+    /**
+     * @return array<string, mixed>
+     */
+    public function toArray(): array
+    {
+        return [
+            'id' => $this->id,
+            'heading' => $this->heading,
+            'url' => $this->url,
+            'content' => $this->content,
+            'title' => $this->title,
+            'description' => $this->description,
+            'noIndex' => $this->noIndex,
+            'canonical' => $this->canonical,
+            'image' => $this->image?->toArray(),
+            'gallery' => array_map(fn (ImageDTO $image): array => $image->toArray(), $this->gallery),
+            'brand' => $this->brand,
+            'category' => $this->category,
+            'price' => $this->price,
+            'salePrice' => $this->salePrice,
+            'discountPercent' => $this->discountPercent,
+            'inStock' => $this->inStock,
+            'variantAxes' => $this->variantAxes,
+            'varieties' => array_map(fn (VarietyDTO $variety): array => $variety->toArray(), $this->varieties),
+            'highlights' => $this->highlights,
+            'specs' => $this->specs,
+            'reviews' => array_map(fn (ReviewDTO $review): array => $review->toArray(), $this->reviews),
+            'reviewCount' => $this->reviewCount,
+        ];
+    }
+}
diff --git a/shop/app/DTOs/ReviewDTO.php b/shop/app/DTOs/ReviewDTO.php
new file mode 100644
index 00000000..fe2f283d
--- /dev/null
+++ b/shop/app/DTOs/ReviewDTO.php
@@ -0,0 +1,24 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\DTOs;
+
+readonly class ReviewDTO
+{
+    public function __construct(
+        public int $id,
+        public ?string $heading,
+        public ?string $content,
+        public ?string $author = null,
+        public ?string $date = null,
+    ) {}
+
+    /**
+     * @return array<string, mixed>
+     */
+    public function toArray(): array
+    {
+        return get_object_vars($this);
+    }
+}
diff --git a/shop/app/DTOs/VarietyDTO.php b/shop/app/DTOs/VarietyDTO.php
new file mode 100644
index 00000000..be2a5e2f
--- /dev/null
+++ b/shop/app/DTOs/VarietyDTO.php
@@ -0,0 +1,43 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\DTOs;
+
+readonly class VarietyDTO
+{
+    /**
+     * @param  array<int, array<int, string>>  $options  attribute-group id => values
+     */
+    public function __construct(
+        public int $id,
+        public ?string $label,
+        public ?string $color,
+        public int $price,
+        public ?int $salePrice,
+        public ?int $discountPercent,
+        public bool $inStock,
+        public int $inventory,
+        public ?ImageDTO $image,
+        public array $options,
+    ) {}
+
+    /**
+     * @return array<string, mixed>
+     */
+    public function toArray(): array
+    {
+        return [
+            'id' => $this->id,
+            'label' => $this->label,
+            'color' => $this->color,
+            'price' => $this->price,
+            'salePrice' => $this->salePrice,
+            'discountPercent' => $this->discountPercent,
+            'inStock' => $this->inStock,
+            'inventory' => $this->inventory,
+            'image' => $this->image?->toArray(),
+            'options' => $this->options,
+        ];
+    }
+}
diff --git a/shop/app/Http/Controllers/HomeController.php b/shop/app/Http/Controllers/HomeController.php
new file mode 100644
index 00000000..7ab249e5
--- /dev/null
+++ b/shop/app/Http/Controllers/HomeController.php
@@ -0,0 +1,32 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Http\Controllers;
+
+use App\Actions\Home\GetFeaturedBrands;
+use App\Actions\Home\GetHeroSlides;
+use App\Actions\Home\GetHomeCategories;
+use App\Actions\Home\GetProductRows;
+use App\Actions\Home\GetPromoBanners;
+use Inertia\Inertia;
+use Inertia\Response;
+
+class HomeController extends Controller
+{
+    public function __invoke(
+        GetHeroSlides $getHeroSlides,
+        GetHomeCategories $getHomeCategories,
+        GetPromoBanners $getPromoBanners,
+        GetProductRows $getProductRows,
+        GetFeaturedBrands $getFeaturedBrands,
+    ): Response {
+        return Inertia::render('Home', [
+            'slides' => $getHeroSlides(),
+            'categories' => $getHomeCategories(),
+            'banners' => $getPromoBanners(),
+            'productRows' => $getProductRows(),
+            'brands' => $getFeaturedBrands(),
+        ]);
+    }
+}
diff --git a/shop/app/Http/Controllers/ProductController.php b/shop/app/Http/Controllers/ProductController.php
new file mode 100644
index 00000000..0ee7d85c
--- /dev/null
+++ b/shop/app/Http/Controllers/ProductController.php
@@ -0,0 +1,51 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Http\Controllers;
+
+use App\Actions\Product\BuildProductBreadcrumbs;
+use App\Actions\Product\BuildProductDetail;
+use App\Actions\Product\GetRelatedProducts;
+use App\Enums\ReviewStatusEnum;
+use App\Enums\VarietyStatusEnum;
+use App\Models\Product;
+use Illuminate\Database\Eloquent\Relations\Relation;
+use Inertia\Inertia;
+use Inertia\Response;
+
+class ProductController extends Controller
+{
+    public function show(
+        string $slug,
+        BuildProductDetail $buildProductDetail,
+        BuildProductBreadcrumbs $buildBreadcrumbs,
+        GetRelatedProducts $getRelatedProducts,
+    ): Response {
+        $product = Product::query()
+            ->published()
+            ->where('slug', $slug)
+            ->with([
+                'featuredImage',
+                'images',
+                'brand',
+                'category',
+                'varieties' => fn (Relation $query) => $query->where('status', VarietyStatusEnum::PUBLISHED->value)->with([
+                    'image',
+                    'attribute.attributeGroup',
+                    'attributes.attributeGroup',
+                ]),
+                'attributes',
+                'reviews' => fn (Relation $query) => $query->where('status', ReviewStatusEnum::APPROVED->value)->whereNull('parent_id')->with('user')->latest(),
+            ])
+            ->firstOrFail();
+
+        $product->increment('seen');
+
+        return Inertia::render('Product/Show', [
+            'product' => $buildProductDetail($product)->toArray(),
+            'breadcrumbs' => $buildBreadcrumbs($product),
+            'related' => $getRelatedProducts($product),
+        ]);
+    }
+}
diff --git a/shop/app/Http/Middleware/HandleInertiaRequests.php b/shop/app/Http/Middleware/HandleInertiaRequests.php
index 68f8e410..d19ca121 100644
--- a/shop/app/Http/Middleware/HandleInertiaRequests.php
+++ b/shop/app/Http/Middleware/HandleInertiaRequests.php
@@ -4,7 +4,10 @@
 
 namespace App\Http\Middleware;
 
+use App\Enums\CategoryStatusEnum;
+use App\Models\Category;
 use App\Models\Setting;
+use Illuminate\Database\Eloquent\Relations\Relation;
 use Illuminate\Http\Request;
 use Illuminate\Support\Collection;
 use Inertia\Middleware;
@@ -48,6 +51,9 @@ public function share(Request $request): array
                 'url' => $this->canonicalUrl($request),
                 'locale' => 'fa_IR',
             ],
+            'nav' => [
+                'categories' => $this->navCategories(),
+            ],
             'footer' => [
                 'about' => $this->value($settings, 'footer_about'),
                 'columns' => [
@@ -67,6 +73,38 @@ public function share(Request $request): array
         ];
     }
 
+    /**
+     * Top-level active categories (with their active children) for the header
+     * navigation. Shared globally so every page's header has the menu.
+     *
+     * Guarded with rescue() so the storefront still renders if the shared
+     * categories table is unavailable.
+     *
+     * @return array<int, array<string, mixed>>
+     */
+    private function navCategories(): array
+    {
+        return rescue(function (): array {
+            return Category::query()
+                ->active()
+                ->whereNull('parent_id')
+                ->with(['children' => fn (Relation $query) => $query->where('status', CategoryStatusEnum::ACTIVE->value)->orderBy('heading')])
+                ->orderBy('heading')
+                ->get()
+                ->map(fn (Category $category): array => [
+                    'heading' => $category->heading,
+                    'url' => '/categories/'.$category->slug,
+                    'children' => $category->children
+                        ->map(fn (Category $child): array => [
+                            'heading' => $child->heading,
+                            'url' => '/categories/'.$child->slug,
+                        ])
+                        ->all(),
+                ])
+                ->all();
+        }, [], false);
+    }
+
     /**
      * Build the canonical/og URL from the configured public origin (APP_URL)
      * rather than the raw request, so it stays correct behind TLS-terminating
diff --git a/shop/app/Models/Attribute.php b/shop/app/Models/Attribute.php
index e8def1b6..a86abfea 100644
--- a/shop/app/Models/Attribute.php
+++ b/shop/app/Models/Attribute.php
@@ -6,6 +6,7 @@
 
 use Illuminate\Database\Eloquent\Collection;
 use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
 use Illuminate\Database\Eloquent\Relations\BelongsToMany;
 use Illuminate\Database\Eloquent\Relations\HasMany;
 
@@ -14,6 +15,7 @@
  * @property positive-int $attribute_group_id
  * @property string|null $color
  * @property string $value
+ * @property AttributeGroup|null $attributeGroup
  * @property Collection<int, Variety> $varieties
  * @property Collection<int, Variety> $directVarieties
  * @property Collection<int, Product> $products
@@ -26,6 +28,11 @@ class Attribute extends Model
         'color',
     ];
 
+    public function attributeGroup(): BelongsTo
+    {
+        return $this->belongsTo(AttributeGroup::class);
+    }
+
     /** Varieties linked via the attribute_variety pivot (additional attributes). */
     public function varieties(): BelongsToMany
     {
diff --git a/shop/app/Models/AttributeGroup.php b/shop/app/Models/AttributeGroup.php
new file mode 100644
index 00000000..b55955b4
--- /dev/null
+++ b/shop/app/Models/AttributeGroup.php
@@ -0,0 +1,26 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Collection;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\HasMany;
+
+/**
+ * @property positive-int $id
+ * @property string $name
+ * @property Collection<int, Attribute> $attributes
+ */
+class AttributeGroup extends Model
+{
+    protected $fillable = [
+        'name',
+    ];
+
+    public function attributes(): HasMany
+    {
+        return $this->hasMany(Attribute::class);
+    }
+}
diff --git a/shop/app/Models/Image.php b/shop/app/Models/Image.php
index c25e70c9..bc0b4f5f 100644
--- a/shop/app/Models/Image.php
+++ b/shop/app/Models/Image.php
@@ -5,8 +5,10 @@
 namespace App\Models;
 
 use Carbon\Carbon;
+use Illuminate\Database\Eloquent\Casts\Attribute;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\Relations\MorphTo;
+use Illuminate\Support\Str;
 
 /**
  * @property positive-int $id
@@ -18,6 +20,7 @@
  * @property positive-int|null $order
  * @property Carbon|null $created_at
  * @property Carbon|null $updated_at
+ * @property-read string $url
  */
 class Image extends Model
 {
@@ -39,4 +42,27 @@ public function imageable(): MorphTo
     {
         return $this->morphTo();
     }
+
+    /**
+     * Resolve the stored relative `path` into a full URL.
+     *
+     * `images.path` is relative to the image host (see the db doc); we prefix
+     * it with `app.image_url` (the admin app's public storage) when set,
+     * leaving already-absolute URLs untouched.
+     */
+    protected function url(): Attribute
+    {
+        return Attribute::get(function (): string {
+            $path = (string) $this->path;
+
+            if ($path === '' || Str::startsWith($path, ['http://', 'https://', '//'])) {
+                return $path;
+            }
+
+            $base = rtrim((string) config('app.image_url'), '/');
+            $path = ltrim($path, '/');
+
+            return $base === '' ? '/'.$path : $base.'/'.$path;
+        });
+    }
 }
diff --git a/shop/app/Models/Review.php b/shop/app/Models/Review.php
index e99f0302..a141fba0 100644
--- a/shop/app/Models/Review.php
+++ b/shop/app/Models/Review.php
@@ -5,6 +5,7 @@
 namespace App\Models;
 
 use App\Enums\ReviewStatusEnum;
+use Carbon\Carbon;
 use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Database\Eloquent\Collection;
 use Illuminate\Database\Eloquent\Model;
@@ -20,6 +21,8 @@
  * @property positive-int|null $variety_id
  * @property positive-int|null $parent_id
  * @property ReviewStatusEnum $status
+ * @property Carbon|null $created_at
+ * @property Carbon|null $updated_at
  * @property User|null $user
  * @property Product $product
  * @property Variety|null $variety
diff --git a/shop/app/Models/Variety.php b/shop/app/Models/Variety.php
index 3b235e1e..1232602c 100644
--- a/shop/app/Models/Variety.php
+++ b/shop/app/Models/Variety.php
@@ -11,6 +11,7 @@
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
 use Illuminate\Database\Eloquent\Relations\BelongsToMany;
 use Illuminate\Database\Eloquent\Relations\HasMany;
+use Illuminate\Database\Eloquent\Relations\MorphOne;
 
 /**
  * @property positive-int $id
@@ -20,13 +21,14 @@
  * @property string|null $color
  * @property positive-int $price
  * @property positive-int|null $sale_price
- * @property positive-int $inventory
+ * @property int<0, max> $inventory
  * @property bool $has_stock
  * @property VarietyStatusEnum $status
  * @property Product $product
  * @property Attribute|null $attribute
  * @property Collection<int, Attribute> $attributes
  * @property Collection<int, Review> $reviews
+ * @property Image|null $image
  */
 class Variety extends Model
 {
@@ -62,6 +64,11 @@ public function attribute(): BelongsTo
         return $this->belongsTo(Attribute::class);
     }
 
+    public function image(): MorphOne
+    {
+        return $this->morphOne(Image::class, 'imageable');
+    }
+
     public function attributes(): BelongsToMany
     {
         return $this->belongsToMany(Attribute::class)->withTimestamps();
diff --git a/shop/composer.json b/shop/composer.json
index 6e7619b4..94231152 100644
--- a/shop/composer.json
+++ b/shop/composer.json
@@ -57,7 +57,9 @@
             "./vendor/bin/pest",
             "./vendor/bin/pint -v --ansi --bail",
             "./vendor/bin/pest --memory-limit=2048M --type-coverage --min=100",
-            "./vendor/bin/phpstan analyze -c ./phpstan.neon --memory-limit=512M"
+            "./vendor/bin/phpstan analyze -c ./phpstan.neon --memory-limit=512M",
+            "npm run lint",
+            "npm run format:check"
         ],
         "post-autoload-dump": [
             "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
diff --git a/shop/config/app.php b/shop/config/app.php
index 423eed59..ff910160 100644
--- a/shop/config/app.php
+++ b/shop/config/app.php
@@ -54,6 +54,23 @@
 
     'url' => env('APP_URL', 'http://localhost'),
 
+    /*
+    |--------------------------------------------------------------------------
+    | Image Base URL
+    |--------------------------------------------------------------------------
+    |
+    | Base URL for catalog images. Filament (admin) saves uploads to the admin
+    | app's public storage, served at `<admin host>/storage`. The storefront is
+    | a separate app, so point this at the admin's storage to resolve relative
+    | `images.path` values. This is intentionally separate from `ASSET_URL`
+    | (which would also rewrite the storefront's own Vite build assets).
+    | Absolute image URLs (e.g. seeded placeholders) are left untouched by the
+    | Image model's `url` accessor.
+    |
+    */
+
+    'image_url' => env('IMAGE_URL'),
+
     /*
     |--------------------------------------------------------------------------
     | Application Timezone
diff --git a/shop/config/inertia.php b/shop/config/inertia.php
new file mode 100644
index 00000000..9bc81bd5
--- /dev/null
+++ b/shop/config/inertia.php
@@ -0,0 +1,44 @@
+<?php
+
+declare(strict_types=1);
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Page components
+    |--------------------------------------------------------------------------
+    |
+    | This storefront keeps its Inertia pages in `resources/js/Pages` (capital
+    | "P"), matching the `resolve()` glob in `resources/js/app.js`. Inertia's
+    | default is lowercase `pages`, so we override the path here; otherwise the
+    | case-sensitive page-existence check in tests fails on Linux.
+    |
+    */
+
+    'pages' => [
+
+        'ensure_pages_exist' => false,
+
+        'paths' => [
+            resource_path('js/Pages'),
+        ],
+
+        'extensions' => [
+            'js',
+            'jsx',
+            'svelte',
+            'ts',
+            'tsx',
+            'vue',
+        ],
+
+    ],
+
+    'testing' => [
+
+        'ensure_pages_exist' => true,
+
+    ],
+
+];
diff --git a/shop/docs/STOREFRONT_IMPLEMENTATION.md b/shop/docs/STOREFRONT_IMPLEMENTATION.md
index 3e6f3f61..ca8b1c30 100644
--- a/shop/docs/STOREFRONT_IMPLEMENTATION.md
+++ b/shop/docs/STOREFRONT_IMPLEMENTATION.md
@@ -23,7 +23,7 @@ A storefront feature is "done" when it has: read/write Eloquent models for the s
 - [x] `A Iranian Sans` font + brand color `#ff8615`
 - [x] Base `AppLayout` + sample `Home` page
 - [x] Eloquent models mapping shared tables (read-focused): `Category`, `Brand`, `Product`, `Variety`, `Attribute`, `Image`, `Banner`, `Slider`/`Slide`, `Menu`/`MenuItem`, `Page`, `Faq`, `Review` (+ status enums and `HasOptions` trait). Relations to not-yet-created models (`AttributeGroup`, `Coupon`, `Discount`) are deferred to their phases.
-- [~] Shared UI kit components: `BaseButton` + `AppLink` + `Icon` done; `PriceTag`, `ProductCard`, `QuantityInput`, `Breadcrumbs`, `Pagination`, `RatingStars`, `EmptyState` pending
+- [~] Shared UI kit components: `BaseButton` + `AppLink` + `Icon` + `PriceTag` + `ProductCard` + `SectionHeading` + `Breadcrumbs` + `RatingStars` done; `QuantityInput`, `Pagination`, `EmptyState` pending
 - [x] Helpers/composables: Persian digits, Jalali date, money formatting (`useFormat`)
 - [x] SEO scaffolding: per-page `<Head>` via `AppHead` component, shared meta defaults (Inertia `seo` shared prop), canonical URL, Open Graph + Twitter, `robots.txt`
 - [x] Error pages (404 / 500) in Persian, RTL (self-contained Blade, brand color, IranSans, no Vite/SSR dependency)
@@ -35,10 +35,13 @@ A storefront feature is "done" when it has: read/write Eloquent models for the s
 
 Read-only catalog. This is where SEO and SSR matter most.
 
-- [ ] Home page: published banners, slider, featured categories, product rows, menu (uses `CACHE.md` keys 1, 2, 8, 3)
+- [x] Home page: `HomeController` + `Home.vue` with hero slider, category strip, promo banner grid, product carousels (newest + most viewed), selected brands; JSON-LD `Organization`/`WebSite`; graceful empty states; feature tests. Caching (`CACHE.md` keys 1, 2, 8, 3) deferred to Phase 6
+  - Header (`AppHeader` + `Header/*`): logo, search, account/cart actions, desktop category menu with dropdowns, mobile drawer; categories shared via Inertia `nav.categories`
+  - `Variety` read model exposes a polymorphic `image` relation (per-color photo) for the upcoming product detail page
 - [ ] Category listing page: products by category with filters (brand, attributes, price range), sorting, pagination
-- [ ] Product detail page: image gallery, variety selection (price + discount + stock from `varieties`), attributes, related products, breadcrumbs
-- [ ] Product reviews (read) on the product page; ratings summary
+- [x] Product detail page: `ProductController@show` (`/products/{slug}`) + `Product/Show.vue`. Gallery shows all images combined (product images + every variety image, deduped by URL); selecting a variety switches the main image to that variety's photo without hiding the others. Variety selector (primary attribute group drives selection, additional attributes constrained by it, never the other way), buy box (price hidden until a variety is fully selected; price/discount/stock, trust badges, quantity), specs, description, breadcrumbs, related carousel; JSON-LD `Product`/`Offer` + `BreadcrumbList`; view counter; feature tests. Add-to-cart wiring deferred to Phase 3
+  - Quantity rule: the quantity stepper must never exceed the selected variety's `inventory` (clamp the max). Enforced with cart wiring in Phase 3
+- [x] Product reviews (read) on the product page (approved only). Ratings summary deferred (no numeric rating field in `reviews`)
 - [ ] Brand page: products for a brand
 - [ ] Search: keyword search over products with results page
 - [ ] CMS pages (`pages.{slug}`) and FAQ page (`faqs.{position}`)
@@ -62,7 +65,7 @@ Auth uses the shared `users` table. Password reset via mobile (`mobile_password_
 Inventory-neutral. A cart never changes `varieties.inventory` (see `ORDER.md`).
 
 - [ ] Cart model mapping `carts` (one row per variety line; user or guest session)
-- [ ] Add to cart / update quantity / remove line
+- [ ] Add to cart / update quantity / remove line. Quantity is capped at the variety's available `inventory` (clamp in the UI and reject over-limit amounts server-side)
 - [ ] Cart page + mini-cart component with live totals
 - [ ] Merge guest cart into user cart on login
 - [ ] Coupon preview at cart (validated, not yet committed)
diff --git a/shop/eslint.config.js b/shop/eslint.config.js
new file mode 100644
index 00000000..b87ff641
--- /dev/null
+++ b/shop/eslint.config.js
@@ -0,0 +1,29 @@
+import js from '@eslint/js';
+import pluginVue from 'eslint-plugin-vue';
+import skipFormatting from '@vue/eslint-config-prettier/skip-formatting';
+import globals from 'globals';
+
+export default [
+    {
+        ignores: ['public/build/**', 'bootstrap/ssr/**', 'node_modules/**', 'vendor/**'],
+    },
+    js.configs.recommended,
+    ...pluginVue.configs['flat/recommended'],
+    {
+        languageOptions: {
+            ecmaVersion: 'latest',
+            sourceType: 'module',
+            globals: {
+                ...globals.browser,
+                ...globals.node,
+            },
+        },
+        rules: {
+            // Inertia pages/components are path-based and often single-word.
+            'vue/multi-word-component-names': 'off',
+            // Product/CMS HTML comes from the trusted admin app.
+            'vue/no-v-html': 'off',
+        },
+    },
+    skipFormatting,
+];
diff --git a/shop/package-lock.json b/shop/package-lock.json
index 0f53d400..375d808a 100644
--- a/shop/package-lock.json
+++ b/shop/package-lock.json
@@ -15,9 +15,16 @@
                 "vue": "^3.5.38"
             },
             "devDependencies": {
+                "@eslint/js": "^10.0.1",
                 "@tailwindcss/vite": "^4.0.0",
+                "@vue/eslint-config-prettier": "^10.2.0",
                 "concurrently": "^9.0.1",
+                "eslint": "^10.6.0",
+                "eslint-plugin-vue": "^10.9.2",
+                "globals": "^17.7.0",
                 "laravel-vite-plugin": "^3.1",
+                "prettier": "^3.8.5",
+                "prettier-plugin-tailwindcss": "^0.8.0",
                 "tailwindcss": "^4.0.0",
                 "vite": "^8.0.0"
             }
@@ -99,6 +106,134 @@
                 "tslib": "^2.4.0"
             }
         },
+        "node_modules/@eslint-community/eslint-utils": {
+            "version": "4.9.1",
+            "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz",
+            "integrity": "sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "eslint-visitor-keys": "^3.4.3"
+            },
+            "engines": {
+                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/eslint"
+            },
+            "peerDependencies": {
+                "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+            }
+        },
+        "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": {
+            "version": "3.4.3",
+            "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+            "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "engines": {
+                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/eslint"
+            }
+        },
+        "node_modules/@eslint-community/regexpp": {
+            "version": "4.12.2",
+            "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.2.tgz",
+            "integrity": "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+            }
+        },
+        "node_modules/@eslint/config-array": {
+            "version": "0.23.5",
+            "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.23.5.tgz",
+            "integrity": "sha512-Y3kKLvC1dvTOT+oGlqNQ1XLqK6D1HU2YXPc52NmAlJZbMMWDzGYXMiPRJ8TYD39muD/OTjlZmNJ4ib7dvSrMBA==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@eslint/object-schema": "^3.0.5",
+                "debug": "^4.3.1",
+                "minimatch": "^10.2.4"
+            },
+            "engines": {
+                "node": "^20.19.0 || ^22.13.0 || >=24"
+            }
+        },
+        "node_modules/@eslint/config-helpers": {
+            "version": "0.6.0",
+            "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.6.0.tgz",
+            "integrity": "sha512-ii6Bw9jJ2zi2cWA2Z+9/QZ/+3DX6kwaV5Q986D/CdP3Lap3w/pgQZ373FV7byY/i7L4IRH/G43I5dz1ClsCbpA==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@eslint/core": "^1.2.1"
+            },
+            "engines": {
+                "node": "^20.19.0 || ^22.13.0 || >=24"
+            }
+        },
+        "node_modules/@eslint/core": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/@eslint/core/-/core-1.2.1.tgz",
+            "integrity": "sha512-MwcE1P+AZ4C6DWlpin/OmOA54mmIZ/+xZuJiQd4SyB29oAJjN30UW9wkKNptW2ctp4cEsvhlLY/CsQ1uoHDloQ==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@types/json-schema": "^7.0.15"
+            },
+            "engines": {
+                "node": "^20.19.0 || ^22.13.0 || >=24"
+            }
+        },
+        "node_modules/@eslint/js": {
+            "version": "10.0.1",
+            "resolved": "https://registry.npmjs.org/@eslint/js/-/js-10.0.1.tgz",
+            "integrity": "sha512-zeR9k5pd4gxjZ0abRoIaxdc7I3nDktoXZk2qOv9gCNWx3mVwEn32VRhyLaRsDiJjTs0xq/T8mfPtyuXu7GWBcA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": "^20.19.0 || ^22.13.0 || >=24"
+            },
+            "funding": {
+                "url": "https://eslint.org/donate"
+            },
+            "peerDependencies": {
+                "eslint": "^10.0.0"
+            },
+            "peerDependenciesMeta": {
+                "eslint": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@eslint/object-schema": {
+            "version": "3.0.5",
+            "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-3.0.5.tgz",
+            "integrity": "sha512-vqTaUEgxzm+YDSdElad6PiRoX4t8VGDjCtt05zn4nU810UIx/uNEV7/lZJ6KwFThKZOzOxzXy48da+No7HZaMw==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "engines": {
+                "node": "^20.19.0 || ^22.13.0 || >=24"
+            }
+        },
+        "node_modules/@eslint/plugin-kit": {
+            "version": "0.7.2",
+            "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.7.2.tgz",
+            "integrity": "sha512-+CNAzxglkrpNf/kKywqQfk74QjtceuOE7Qm+AF8miRvPF/wmmK5+OJOgVh3AVTT3RP2mH3+FOaxlE5v72owk0A==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@eslint/core": "^1.2.1",
+                "levn": "^0.4.1"
+            },
+            "engines": {
+                "node": "^20.19.0 || ^22.13.0 || >=24"
+            }
+        },
         "node_modules/@fortawesome/fontawesome-common-types": {
             "version": "7.2.0",
             "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-7.2.0.tgz",
@@ -154,6 +289,72 @@
                 "vue": ">= 3.0.0 < 4"
             }
         },
+        "node_modules/@humanfs/core": {
+            "version": "0.19.2",
+            "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.2.tgz",
+            "integrity": "sha512-UhXNm+CFMWcbChXywFwkmhqjs3PRCmcSa/hfBgLIb7oQ5HNb1wS0icWsGtSAUNgefHeI+eBrA8I1fxmbHsGdvA==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@humanfs/types": "^0.15.0"
+            },
+            "engines": {
+                "node": ">=18.18.0"
+            }
+        },
+        "node_modules/@humanfs/node": {
+            "version": "0.16.8",
+            "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.8.tgz",
+            "integrity": "sha512-gE1eQNZ3R++kTzFUpdGlpmy8kDZD/MLyHqDwqjkVQI0JMdI1D51sy1H958PNXYkM2rAac7e5/CnIKZrHtPh3BQ==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@humanfs/core": "^0.19.2",
+                "@humanfs/types": "^0.15.0",
+                "@humanwhocodes/retry": "^0.4.0"
+            },
+            "engines": {
+                "node": ">=18.18.0"
+            }
+        },
+        "node_modules/@humanfs/types": {
+            "version": "0.15.0",
+            "resolved": "https://registry.npmjs.org/@humanfs/types/-/types-0.15.0.tgz",
+            "integrity": "sha512-ZZ1w0aoQkwuUuC7Yf+7sdeaNfqQiiLcSRbfI08oAxqLtpXQr9AIVX7Ay7HLDuiLYAaFPu8oBYNq/QIi9URHJ3Q==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "engines": {
+                "node": ">=18.18.0"
+            }
+        },
+        "node_modules/@humanwhocodes/module-importer": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+            "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "engines": {
+                "node": ">=12.22"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/nzakas"
+            }
+        },
+        "node_modules/@humanwhocodes/retry": {
+            "version": "0.4.3",
+            "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz",
+            "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "engines": {
+                "node": ">=18.18"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/nzakas"
+            }
+        },
         "node_modules/@inertiajs/core": {
             "version": "3.4.0",
             "resolved": "https://registry.npmjs.org/@inertiajs/core/-/core-3.4.0.tgz",
@@ -261,6 +462,19 @@
                 "url": "https://github.com/sponsors/Boshen"
             }
         },
+        "node_modules/@pkgr/core": {
+            "version": "0.3.6",
+            "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.3.6.tgz",
+            "integrity": "sha512-SEeaJLb3qBNF/OaXnaR1NmmBbFYk1zC0ZH/52fATcRPLFg/p791YrcyFFy44Bo9sLaGuSuLp5Q6axbb/O+v/RA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": "^14.18.0 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/pkgr"
+            }
+        },
         "node_modules/@rolldown/binding-android-arm64": {
             "version": "1.1.3",
             "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.1.3.tgz",
@@ -348,9 +562,6 @@
             "cpu": [
                 "arm64"
             ],
-            "libc": [
-                "glibc"
-            ],
             "license": "MIT",
             "optional": true,
             "os": [
@@ -367,9 +578,6 @@
             "cpu": [
                 "arm64"
             ],
-            "libc": [
-                "musl"
-            ],
             "license": "MIT",
             "optional": true,
             "os": [
@@ -386,9 +594,6 @@
             "cpu": [
                 "ppc64"
             ],
-            "libc": [
-                "glibc"
-            ],
             "license": "MIT",
             "optional": true,
             "os": [
@@ -405,9 +610,6 @@
             "cpu": [
                 "s390x"
             ],
-            "libc": [
-                "glibc"
-            ],
             "license": "MIT",
             "optional": true,
             "os": [
@@ -424,9 +626,6 @@
             "cpu": [
                 "x64"
             ],
-            "libc": [
-                "glibc"
-            ],
             "license": "MIT",
             "optional": true,
             "os": [
@@ -443,9 +642,6 @@
             "cpu": [
                 "x64"
             ],
-            "libc": [
-                "musl"
-            ],
             "license": "MIT",
             "optional": true,
             "os": [
@@ -660,9 +856,6 @@
                 "arm64"
             ],
             "dev": true,
-            "libc": [
-                "glibc"
-            ],
             "license": "MIT",
             "optional": true,
             "os": [
@@ -680,9 +873,6 @@
                 "arm64"
             ],
             "dev": true,
-            "libc": [
-                "musl"
-            ],
             "license": "MIT",
             "optional": true,
             "os": [
@@ -700,9 +890,6 @@
                 "x64"
             ],
             "dev": true,
-            "libc": [
-                "glibc"
-            ],
             "license": "MIT",
             "optional": true,
             "os": [
@@ -720,9 +907,6 @@
                 "x64"
             ],
             "dev": true,
-            "libc": [
-                "musl"
-            ],
             "license": "MIT",
             "optional": true,
             "os": [
@@ -821,6 +1005,27 @@
                 "tslib": "^2.4.0"
             }
         },
+        "node_modules/@types/esrecurse": {
+            "version": "4.3.1",
+            "resolved": "https://registry.npmjs.org/@types/esrecurse/-/esrecurse-4.3.1.tgz",
+            "integrity": "sha512-xJBAbDifo5hpffDBuHl0Y8ywswbiAp/Wi7Y/GtAgSlZyIABppyurxVueOPE8LUQOxdlgi6Zqce7uoEpqNTeiUw==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/@types/estree": {
+            "version": "1.0.9",
+            "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
+            "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/@types/json-schema": {
+            "version": "7.0.15",
+            "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+            "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/@vitejs/plugin-vue": {
             "version": "6.0.7",
             "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.7.tgz",
@@ -887,6 +1092,21 @@
                 "@vue/shared": "3.5.38"
             }
         },
+        "node_modules/@vue/eslint-config-prettier": {
+            "version": "10.2.0",
+            "resolved": "https://registry.npmjs.org/@vue/eslint-config-prettier/-/eslint-config-prettier-10.2.0.tgz",
+            "integrity": "sha512-GL3YBLwv/+b86yHcNNfPJxOTtVFJ4Mbc9UU3zR+KVoG7SwGTjPT+32fXamscNumElhcpXW3mT0DgzS9w32S7Bw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "eslint-config-prettier": "^10.0.1",
+                "eslint-plugin-prettier": "^5.2.2"
+            },
+            "peerDependencies": {
+                "eslint": ">= 8.21.0",
+                "prettier": ">= 3.0.0"
+            }
+        },
         "node_modules/@vue/reactivity": {
             "version": "3.5.38",
             "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.38.tgz",
@@ -937,6 +1157,46 @@
             "integrity": "sha512-FTW0AFZNaK5/mOqvGBwVfUlNLU38TiQn4+DQgIFUnrBBJQ1crMJ82yeGQLV5jyKFsO8yRukpbuP7x+nRbH6aug==",
             "license": "MIT"
         },
+        "node_modules/acorn": {
+            "version": "8.17.0",
+            "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.17.0.tgz",
+            "integrity": "sha512-xRQbDb9BnwDafYNn6Vwl839DYVjqXYb1XVGtWAZ1kcDc6iwAL4hg3B1dZlRiuENFeO2H53gFG3in621AdERVAg==",
+            "dev": true,
+            "license": "MIT",
+            "bin": {
+                "acorn": "bin/acorn"
+            },
+            "engines": {
+                "node": ">=0.4.0"
+            }
+        },
+        "node_modules/acorn-jsx": {
+            "version": "5.3.2",
+            "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+            "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+            "dev": true,
+            "license": "MIT",
+            "peerDependencies": {
+                "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+            }
+        },
+        "node_modules/ajv": {
+            "version": "6.15.0",
+            "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.15.0.tgz",
+            "integrity": "sha512-fgFx7Hfoq60ytK2c7DhnF8jIvzYgOMxfugjLOSMHjLIPgenqa7S7oaagATUq99mV6IYvN2tRmC0wnTYX6iPbMw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "fast-deep-equal": "^3.1.1",
+                "fast-json-stable-stringify": "^2.0.0",
+                "json-schema-traverse": "^0.4.1",
+                "uri-js": "^4.2.2"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/epoberezkin"
+            }
+        },
         "node_modules/ansi-regex": {
             "version": "5.0.1",
             "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -963,6 +1223,36 @@
                 "url": "https://github.com/chalk/ansi-styles?sponsor=1"
             }
         },
+        "node_modules/balanced-match": {
+            "version": "4.0.4",
+            "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+            "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": "18 || 20 || >=22"
+            }
+        },
+        "node_modules/boolbase": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+            "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+            "dev": true,
+            "license": "ISC"
+        },
+        "node_modules/brace-expansion": {
+            "version": "5.0.6",
+            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.6.tgz",
+            "integrity": "sha512-kLpxurY4Z4r9sgMsyG0Z9uzsBlgiU/EFKhj/h91/8yHu0edo7XuixOIH3VcJ8kkxs6/jPzoI6U9Vj3WqbMQ94g==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "balanced-match": "^4.0.2"
+            },
+            "engines": {
+                "node": "18 || 20 || >=22"
+            }
+        },
         "node_modules/chalk": {
             "version": "4.1.2",
             "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -1053,12 +1343,65 @@
                 "url": "https://github.com/open-cli-tools/concurrently?sponsor=1"
             }
         },
+        "node_modules/cross-spawn": {
+            "version": "7.0.6",
+            "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+            "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "path-key": "^3.1.0",
+                "shebang-command": "^2.0.0",
+                "which": "^2.0.1"
+            },
+            "engines": {
+                "node": ">= 8"
+            }
+        },
+        "node_modules/cssesc": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+            "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+            "dev": true,
+            "license": "MIT",
+            "bin": {
+                "cssesc": "bin/cssesc"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
         "node_modules/csstype": {
             "version": "3.2.3",
             "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
             "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
             "license": "MIT"
         },
+        "node_modules/debug": {
+            "version": "4.4.3",
+            "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+            "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "ms": "^2.1.3"
+            },
+            "engines": {
+                "node": ">=6.0"
+            },
+            "peerDependenciesMeta": {
+                "supports-color": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/deep-is": {
+            "version": "0.1.4",
+            "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+            "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/detect-libc": {
             "version": "2.1.2",
             "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
@@ -1121,53 +1464,405 @@
                 "node": ">=6"
             }
         },
-        "node_modules/estree-walker": {
-            "version": "2.0.2",
-            "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-            "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
-            "license": "MIT"
+        "node_modules/escape-string-regexp": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+            "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
         },
-        "node_modules/fdir": {
-            "version": "6.5.0",
-            "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
-            "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+        "node_modules/eslint": {
+            "version": "10.6.0",
+            "resolved": "https://registry.npmjs.org/eslint/-/eslint-10.6.0.tgz",
+            "integrity": "sha512-6lVbcqSodALYo+4ELD0heG6lFiFxnLMuLkiMi2qV8LMp54N8tE8FT1GMH+ev4Ti00nFjNze2+Su6DsV5OQW3Dg==",
+            "dev": true,
             "license": "MIT",
+            "workspaces": [
+                "packages/*"
+            ],
+            "dependencies": {
+                "@eslint-community/eslint-utils": "^4.8.0",
+                "@eslint-community/regexpp": "^4.12.2",
+                "@eslint/config-array": "^0.23.5",
+                "@eslint/config-helpers": "^0.6.0",
+                "@eslint/core": "^1.2.1",
+                "@eslint/plugin-kit": "^0.7.2",
+                "@humanfs/node": "^0.16.6",
+                "@humanwhocodes/module-importer": "^1.0.1",
+                "@humanwhocodes/retry": "^0.4.2",
+                "@types/estree": "^1.0.6",
+                "ajv": "^6.14.0",
+                "cross-spawn": "^7.0.6",
+                "debug": "^4.3.2",
+                "escape-string-regexp": "^4.0.0",
+                "eslint-scope": "^9.1.2",
+                "eslint-visitor-keys": "^5.0.1",
+                "espree": "^11.2.0",
+                "esquery": "^1.7.0",
+                "esutils": "^2.0.2",
+                "fast-deep-equal": "^3.1.3",
+                "file-entry-cache": "^8.0.0",
+                "find-up": "^5.0.0",
+                "glob-parent": "^6.0.2",
+                "ignore": "^5.2.0",
+                "imurmurhash": "^0.1.4",
+                "is-glob": "^4.0.0",
+                "json-stable-stringify-without-jsonify": "^1.0.1",
+                "minimatch": "^10.2.4",
+                "natural-compare": "^1.4.0",
+                "optionator": "^0.9.3"
+            },
+            "bin": {
+                "eslint": "bin/eslint.js"
+            },
             "engines": {
-                "node": ">=12.0.0"
+                "node": "^20.19.0 || ^22.13.0 || >=24"
+            },
+            "funding": {
+                "url": "https://eslint.org/donate"
             },
             "peerDependencies": {
-                "picomatch": "^3 || ^4"
+                "jiti": "*"
             },
             "peerDependenciesMeta": {
-                "picomatch": {
+                "jiti": {
                     "optional": true
                 }
             }
         },
-        "node_modules/fsevents": {
-            "version": "2.3.3",
-            "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
-            "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-            "hasInstallScript": true,
+        "node_modules/eslint-config-prettier": {
+            "version": "10.1.8",
+            "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-10.1.8.tgz",
+            "integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==",
+            "dev": true,
             "license": "MIT",
-            "optional": true,
-            "os": [
-                "darwin"
-            ],
-            "engines": {
-                "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+            "bin": {
+                "eslint-config-prettier": "bin/cli.js"
+            },
+            "funding": {
+                "url": "https://opencollective.com/eslint-config-prettier"
+            },
+            "peerDependencies": {
+                "eslint": ">=7.0.0"
             }
         },
-        "node_modules/get-caller-file": {
-            "version": "2.0.5",
-            "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
-            "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+        "node_modules/eslint-plugin-prettier": {
+            "version": "5.5.6",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.5.6.tgz",
+            "integrity": "sha512-ifetmTcxWfz+4qRW3pH/ujdTq2jQIj59AxJMIN26K5avYgU8dxycUETQonWiW+wPrYXA0j3Try0l1CnwVQtDqQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "prettier-linter-helpers": "^1.0.1",
+                "synckit": "^0.11.13"
+            },
+            "engines": {
+                "node": "^14.18.0 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/eslint-plugin-prettier"
+            },
+            "peerDependencies": {
+                "@types/eslint": ">=8.0.0",
+                "eslint": ">=8.0.0",
+                "eslint-config-prettier": ">= 7.0.0 <10.0.0 || >=10.1.0",
+                "prettier": ">=3.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/eslint": {
+                    "optional": true
+                },
+                "eslint-config-prettier": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/eslint-plugin-vue": {
+            "version": "10.9.2",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-10.9.2.tgz",
+            "integrity": "sha512-4g7ZP3pYcuqd7Zp0pzUKcos0W+RkjBz4EGdhJ92FcYk6v03Ti/GK5NwjgsjxHK+98eXDbHeK7VtX1az7/8doZA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@eslint-community/eslint-utils": "^4.4.0",
+                "natural-compare": "^1.4.0",
+                "nth-check": "^2.1.1",
+                "postcss-selector-parser": "^7.1.0",
+                "semver": "^7.6.3",
+                "xml-name-validator": "^4.0.0"
+            },
+            "engines": {
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+            },
+            "peerDependencies": {
+                "@stylistic/eslint-plugin": "^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0",
+                "@typescript-eslint/parser": "^7.0.0 || ^8.0.0",
+                "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+                "vue-eslint-parser": "^10.3.0"
+            },
+            "peerDependenciesMeta": {
+                "@stylistic/eslint-plugin": {
+                    "optional": true
+                },
+                "@typescript-eslint/parser": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/eslint-scope": {
+            "version": "9.1.2",
+            "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-9.1.2.tgz",
+            "integrity": "sha512-xS90H51cKw0jltxmvmHy2Iai1LIqrfbw57b79w/J7MfvDfkIkFZ+kj6zC3BjtUwh150HsSSdxXZcsuv72miDFQ==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "dependencies": {
+                "@types/esrecurse": "^4.3.1",
+                "@types/estree": "^1.0.8",
+                "esrecurse": "^4.3.0",
+                "estraverse": "^5.2.0"
+            },
+            "engines": {
+                "node": "^20.19.0 || ^22.13.0 || >=24"
+            },
+            "funding": {
+                "url": "https://opencollective.com/eslint"
+            }
+        },
+        "node_modules/eslint-visitor-keys": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-5.0.1.tgz",
+            "integrity": "sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "engines": {
+                "node": "^20.19.0 || ^22.13.0 || >=24"
+            },
+            "funding": {
+                "url": "https://opencollective.com/eslint"
+            }
+        },
+        "node_modules/espree": {
+            "version": "11.2.0",
+            "resolved": "https://registry.npmjs.org/espree/-/espree-11.2.0.tgz",
+            "integrity": "sha512-7p3DrVEIopW1B1avAGLuCSh1jubc01H2JHc8B4qqGblmg5gI9yumBgACjWo4JlIc04ufug4xJ3SQI8HkS/Rgzw==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "dependencies": {
+                "acorn": "^8.16.0",
+                "acorn-jsx": "^5.3.2",
+                "eslint-visitor-keys": "^5.0.1"
+            },
+            "engines": {
+                "node": "^20.19.0 || ^22.13.0 || >=24"
+            },
+            "funding": {
+                "url": "https://opencollective.com/eslint"
+            }
+        },
+        "node_modules/esquery": {
+            "version": "1.7.0",
+            "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.7.0.tgz",
+            "integrity": "sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==",
+            "dev": true,
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "estraverse": "^5.1.0"
+            },
+            "engines": {
+                "node": ">=0.10"
+            }
+        },
+        "node_modules/esrecurse": {
+            "version": "4.3.0",
+            "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+            "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "dependencies": {
+                "estraverse": "^5.2.0"
+            },
+            "engines": {
+                "node": ">=4.0"
+            }
+        },
+        "node_modules/estraverse": {
+            "version": "5.3.0",
+            "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+            "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "engines": {
+                "node": ">=4.0"
+            }
+        },
+        "node_modules/estree-walker": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+            "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+            "license": "MIT"
+        },
+        "node_modules/esutils": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+            "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/fast-deep-equal": {
+            "version": "3.1.3",
+            "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+            "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/fast-diff": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
+            "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
+            "dev": true,
+            "license": "Apache-2.0"
+        },
+        "node_modules/fast-json-stable-stringify": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+            "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/fast-levenshtein": {
+            "version": "2.0.6",
+            "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+            "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/fdir": {
+            "version": "6.5.0",
+            "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+            "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=12.0.0"
+            },
+            "peerDependencies": {
+                "picomatch": "^3 || ^4"
+            },
+            "peerDependenciesMeta": {
+                "picomatch": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/file-entry-cache": {
+            "version": "8.0.0",
+            "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
+            "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "flat-cache": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=16.0.0"
+            }
+        },
+        "node_modules/find-up": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+            "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "locate-path": "^6.0.0",
+                "path-exists": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/flat-cache": {
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
+            "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "flatted": "^3.2.9",
+                "keyv": "^4.5.4"
+            },
+            "engines": {
+                "node": ">=16"
+            }
+        },
+        "node_modules/flatted": {
+            "version": "3.4.2",
+            "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
+            "integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
+            "dev": true,
+            "license": "ISC"
+        },
+        "node_modules/fsevents": {
+            "version": "2.3.3",
+            "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+            "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+            "hasInstallScript": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+            }
+        },
+        "node_modules/get-caller-file": {
+            "version": "2.0.5",
+            "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+            "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
             "dev": true,
             "license": "ISC",
             "engines": {
                 "node": "6.* || 8.* || >= 10.*"
             }
         },
+        "node_modules/glob-parent": {
+            "version": "6.0.2",
+            "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+            "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "is-glob": "^4.0.3"
+            },
+            "engines": {
+                "node": ">=10.13.0"
+            }
+        },
+        "node_modules/globals": {
+            "version": "17.7.0",
+            "resolved": "https://registry.npmjs.org/globals/-/globals-17.7.0.tgz",
+            "integrity": "sha512-Czmyns5dUsq4seFBR/Kdydhmo8y9kC79hiSkPn0YcGtNnYWnrgt0vjrSjx9tspoDGWm2CMarffRuLjM4xUz8xg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=18"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/graceful-fs": {
             "version": "4.2.11",
             "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
@@ -1185,6 +1880,36 @@
                 "node": ">=8"
             }
         },
+        "node_modules/ignore": {
+            "version": "5.3.2",
+            "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+            "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 4"
+            }
+        },
+        "node_modules/imurmurhash": {
+            "version": "0.1.4",
+            "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+            "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.8.19"
+            }
+        },
+        "node_modules/is-extglob": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+            "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
         "node_modules/is-fullwidth-code-point": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
@@ -1195,6 +1920,26 @@
                 "node": ">=8"
             }
         },
+        "node_modules/is-glob": {
+            "version": "4.0.3",
+            "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+            "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "is-extglob": "^2.1.1"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/isexe": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+            "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+            "dev": true,
+            "license": "ISC"
+        },
         "node_modules/jiti": {
             "version": "2.7.0",
             "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
@@ -1205,6 +1950,37 @@
                 "jiti": "lib/jiti-cli.mjs"
             }
         },
+        "node_modules/json-buffer": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+            "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/json-schema-traverse": {
+            "version": "0.4.1",
+            "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+            "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/json-stable-stringify-without-jsonify": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+            "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/keyv": {
+            "version": "4.5.4",
+            "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+            "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "json-buffer": "3.0.1"
+            }
+        },
         "node_modules/laravel-precognition": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/laravel-precognition/-/laravel-precognition-2.0.0.tgz",
@@ -1249,6 +2025,20 @@
                 }
             }
         },
+        "node_modules/levn": {
+            "version": "0.4.1",
+            "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+            "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "prelude-ls": "^1.2.1",
+                "type-check": "~0.4.0"
+            },
+            "engines": {
+                "node": ">= 0.8.0"
+            }
+        },
         "node_modules/lightningcss": {
             "version": "1.32.0",
             "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
@@ -1385,9 +2175,6 @@
             "cpu": [
                 "arm64"
             ],
-            "libc": [
-                "glibc"
-            ],
             "license": "MPL-2.0",
             "optional": true,
             "os": [
@@ -1408,9 +2195,6 @@
             "cpu": [
                 "arm64"
             ],
-            "libc": [
-                "musl"
-            ],
             "license": "MPL-2.0",
             "optional": true,
             "os": [
@@ -1431,9 +2215,6 @@
             "cpu": [
                 "x64"
             ],
-            "libc": [
-                "glibc"
-            ],
             "license": "MPL-2.0",
             "optional": true,
             "os": [
@@ -1454,9 +2235,6 @@
             "cpu": [
                 "x64"
             ],
-            "libc": [
-                "musl"
-            ],
             "license": "MPL-2.0",
             "optional": true,
             "os": [
@@ -1510,6 +2288,22 @@
                 "url": "https://opencollective.com/parcel"
             }
         },
+        "node_modules/locate-path": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+            "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "p-locate": "^5.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/magic-string": {
             "version": "0.30.21",
             "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
@@ -1519,6 +2313,29 @@
                 "@jridgewell/sourcemap-codec": "^1.5.5"
             }
         },
+        "node_modules/minimatch": {
+            "version": "10.2.5",
+            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
+            "integrity": "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==",
+            "dev": true,
+            "license": "BlueOak-1.0.0",
+            "dependencies": {
+                "brace-expansion": "^5.0.5"
+            },
+            "engines": {
+                "node": "18 || 20 || >=22"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/isaacs"
+            }
+        },
+        "node_modules/ms": {
+            "version": "2.1.3",
+            "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+            "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/nanoid": {
             "version": "3.3.15",
             "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.15.tgz",
@@ -1537,6 +2354,96 @@
                 "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
             }
         },
+        "node_modules/natural-compare": {
+            "version": "1.4.0",
+            "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+            "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/nth-check": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+            "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "dependencies": {
+                "boolbase": "^1.0.0"
+            },
+            "funding": {
+                "url": "https://github.com/fb55/nth-check?sponsor=1"
+            }
+        },
+        "node_modules/optionator": {
+            "version": "0.9.4",
+            "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+            "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "deep-is": "^0.1.3",
+                "fast-levenshtein": "^2.0.6",
+                "levn": "^0.4.1",
+                "prelude-ls": "^1.2.1",
+                "type-check": "^0.4.0",
+                "word-wrap": "^1.2.5"
+            },
+            "engines": {
+                "node": ">= 0.8.0"
+            }
+        },
+        "node_modules/p-limit": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+            "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "yocto-queue": "^0.1.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/p-locate": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+            "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "p-limit": "^3.0.2"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/path-exists": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+            "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/path-key": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+            "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
         "node_modules/picocolors": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -1583,6 +2490,148 @@
                 "node": "^10 || ^12 || >=14"
             }
         },
+        "node_modules/postcss-selector-parser": {
+            "version": "7.1.4",
+            "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.4.tgz",
+            "integrity": "sha512-HeP7D2wyhkR+XaK6v4W8oRF62Dsz4flyuczALJp61GckGm42u1saSSJ/0auvcBqxs3jMRFEcPK34At/0JBKdOg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "cssesc": "^3.0.0",
+                "util-deprecate": "^1.0.2"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/prelude-ls": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+            "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.8.0"
+            }
+        },
+        "node_modules/prettier": {
+            "version": "3.8.5",
+            "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.5.tgz",
+            "integrity": "sha512-zxcTTCedNGJM4R8sj/Cq/F0W/c4iE0afWBcBwMTRtw4WHYP9TWkYjdiH3npPRUYsXQCPR0hTU9yjovOu+E6EQA==",
+            "dev": true,
+            "license": "MIT",
+            "bin": {
+                "prettier": "bin/prettier.cjs"
+            },
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "url": "https://github.com/prettier/prettier?sponsor=1"
+            }
+        },
+        "node_modules/prettier-linter-helpers": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.1.tgz",
+            "integrity": "sha512-SxToR7P8Y2lWmv/kTzVLC1t/GDI2WGjMwNhLLE9qtH8Q13C+aEmuRlzDst4Up4s0Wc8sF2M+J57iB3cMLqftfg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "fast-diff": "^1.1.2"
+            },
+            "engines": {
+                "node": ">=6.0.0"
+            }
+        },
+        "node_modules/prettier-plugin-tailwindcss": {
+            "version": "0.8.0",
+            "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.8.0.tgz",
+            "integrity": "sha512-V8ITGH87yuBDF6JpEZTOVlUz/saAwqb8f3HRgUj8Lh+tGCcrmorhsLpYqzygwFwK0PE2Ib6Mv3M7T/uE2tZV1g==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=20.19"
+            },
+            "peerDependencies": {
+                "@ianvs/prettier-plugin-sort-imports": "*",
+                "@prettier/plugin-hermes": "*",
+                "@prettier/plugin-oxc": "*",
+                "@prettier/plugin-pug": "*",
+                "@shopify/prettier-plugin-liquid": "*",
+                "@trivago/prettier-plugin-sort-imports": "*",
+                "@zackad/prettier-plugin-twig": "*",
+                "prettier": "^3.0",
+                "prettier-plugin-astro": "*",
+                "prettier-plugin-css-order": "*",
+                "prettier-plugin-jsdoc": "*",
+                "prettier-plugin-marko": "*",
+                "prettier-plugin-multiline-arrays": "*",
+                "prettier-plugin-organize-attributes": "*",
+                "prettier-plugin-organize-imports": "*",
+                "prettier-plugin-sort-imports": "*",
+                "prettier-plugin-svelte": "*"
+            },
+            "peerDependenciesMeta": {
+                "@ianvs/prettier-plugin-sort-imports": {
+                    "optional": true
+                },
+                "@prettier/plugin-hermes": {
+                    "optional": true
+                },
+                "@prettier/plugin-oxc": {
+                    "optional": true
+                },
+                "@prettier/plugin-pug": {
+                    "optional": true
+                },
+                "@shopify/prettier-plugin-liquid": {
+                    "optional": true
+                },
+                "@trivago/prettier-plugin-sort-imports": {
+                    "optional": true
+                },
+                "@zackad/prettier-plugin-twig": {
+                    "optional": true
+                },
+                "prettier-plugin-astro": {
+                    "optional": true
+                },
+                "prettier-plugin-css-order": {
+                    "optional": true
+                },
+                "prettier-plugin-jsdoc": {
+                    "optional": true
+                },
+                "prettier-plugin-marko": {
+                    "optional": true
+                },
+                "prettier-plugin-multiline-arrays": {
+                    "optional": true
+                },
+                "prettier-plugin-organize-attributes": {
+                    "optional": true
+                },
+                "prettier-plugin-organize-imports": {
+                    "optional": true
+                },
+                "prettier-plugin-sort-imports": {
+                    "optional": true
+                },
+                "prettier-plugin-svelte": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/punycode": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+            "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/require-directory": {
             "version": "2.1.1",
             "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -1636,6 +2685,42 @@
                 "tslib": "^2.1.0"
             }
         },
+        "node_modules/semver": {
+            "version": "7.8.5",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.5.tgz",
+            "integrity": "sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==",
+            "dev": true,
+            "license": "ISC",
+            "bin": {
+                "semver": "bin/semver.js"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/shebang-command": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+            "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "shebang-regex": "^3.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/shebang-regex": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+            "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
         "node_modules/shell-quote": {
             "version": "1.8.4",
             "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.4.tgz",
@@ -1702,6 +2787,22 @@
                 "url": "https://github.com/chalk/supports-color?sponsor=1"
             }
         },
+        "node_modules/synckit": {
+            "version": "0.11.13",
+            "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.11.13.tgz",
+            "integrity": "sha512-eNRKgb3z66Yp3D2CixVujOUvXLFUTij/zVnV8KRyvFdQwpz7I5DS8UfRkTeLzb64u+dkzDSdelE24izu+zSSUg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@pkgr/core": "^0.3.6"
+            },
+            "engines": {
+                "node": "^14.18.0 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/synckit"
+            }
+        },
         "node_modules/tailwindcss": {
             "version": "4.3.1",
             "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.1.tgz",
@@ -1756,6 +2857,36 @@
             "devOptional": true,
             "license": "0BSD"
         },
+        "node_modules/type-check": {
+            "version": "0.4.0",
+            "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+            "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "prelude-ls": "^1.2.1"
+            },
+            "engines": {
+                "node": ">= 0.8.0"
+            }
+        },
+        "node_modules/uri-js": {
+            "version": "4.4.1",
+            "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+            "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "dependencies": {
+                "punycode": "^2.1.0"
+            }
+        },
+        "node_modules/util-deprecate": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+            "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/vite": {
             "version": "8.1.0",
             "resolved": "https://registry.npmjs.org/vite/-/vite-8.1.0.tgz",
@@ -1878,6 +3009,57 @@
                 }
             }
         },
+        "node_modules/vue-eslint-parser": {
+            "version": "10.4.1",
+            "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-10.4.1.tgz",
+            "integrity": "sha512-Gk6gRDj0n/fkRa3C3l0bBheoBckUq/Rs0F/TvMWIS6nzzx67amAViMe9CkNgsP2tXyQONvGiHQESHwFtZ3aYDA==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "debug": "^4.4.0",
+                "eslint-scope": "^8.2.0 || ^9.0.0",
+                "eslint-visitor-keys": "^4.2.0 || ^5.0.0",
+                "espree": "^10.3.0 || ^11.0.0",
+                "esquery": "^1.6.0",
+                "semver": "^7.6.3"
+            },
+            "engines": {
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/mysticatea"
+            },
+            "peerDependencies": {
+                "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0"
+            }
+        },
+        "node_modules/which": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+            "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "isexe": "^2.0.0"
+            },
+            "bin": {
+                "node-which": "bin/node-which"
+            },
+            "engines": {
+                "node": ">= 8"
+            }
+        },
+        "node_modules/word-wrap": {
+            "version": "1.2.5",
+            "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+            "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
         "node_modules/wrap-ansi": {
             "version": "7.0.0",
             "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
@@ -1896,6 +3078,16 @@
                 "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
             }
         },
+        "node_modules/xml-name-validator": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
+            "integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "engines": {
+                "node": ">=12"
+            }
+        },
         "node_modules/y18n": {
             "version": "5.0.8",
             "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
@@ -1934,6 +3126,19 @@
             "engines": {
                 "node": ">=12"
             }
+        },
+        "node_modules/yocto-queue": {
+            "version": "0.1.0",
+            "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+            "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
         }
     }
 }
diff --git a/shop/package.json b/shop/package.json
index b6dc2b5c..5c92f20c 100644
--- a/shop/package.json
+++ b/shop/package.json
@@ -4,12 +4,23 @@
     "type": "module",
     "scripts": {
         "build": "vite build && vite build --ssr",
-        "dev": "vite"
+        "dev": "vite",
+        "lint": "eslint resources/js",
+        "lint:fix": "eslint resources/js --fix",
+        "format": "prettier --write resources/js",
+        "format:check": "prettier --check resources/js"
     },
     "devDependencies": {
+        "@eslint/js": "^10.0.1",
         "@tailwindcss/vite": "^4.0.0",
+        "@vue/eslint-config-prettier": "^10.2.0",
         "concurrently": "^9.0.1",
+        "eslint": "^10.6.0",
+        "eslint-plugin-vue": "^10.9.2",
+        "globals": "^17.7.0",
         "laravel-vite-plugin": "^3.1",
+        "prettier": "^3.8.5",
+        "prettier-plugin-tailwindcss": "^0.8.0",
         "tailwindcss": "^4.0.0",
         "vite": "^8.0.0"
     },
diff --git a/shop/resources/js/Components/AppHead.vue b/shop/resources/js/Components/AppHead.vue
index 3396fb18..b44c48d5 100644
--- a/shop/resources/js/Components/AppHead.vue
+++ b/shop/resources/js/Components/AppHead.vue
@@ -27,6 +27,10 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    jsonLd: {
+        type: [Object, Array],
+        default: null,
+    },
 });
 
 const page = usePage();
@@ -38,69 +42,50 @@ const canonicalUrl = computed(() => props.canonical || seo.value.url || '');
 const fullTitle = computed(() =>
     props.title ? `${props.title} - ${siteName.value}` : siteName.value,
 );
+const jsonLdString = computed(() => (props.jsonLd ? JSON.stringify(props.jsonLd) : ''));
 </script>
 
 <template>
     <Head :title="title">
-        <meta
-            v-if="description"
-            head-key="description"
-            name="description"
-            :content="description"
-        >
-        <link
-            v-if="canonicalUrl"
-            head-key="canonical"
-            rel="canonical"
-            :href="canonicalUrl"
-        >
-        <meta
-            v-if="noindex"
-            head-key="robots"
-            name="robots"
-            content="noindex, nofollow"
-        >
+        <meta v-if="description" head-key="description" name="description" :content="description" />
+        <link v-if="canonicalUrl" head-key="canonical" rel="canonical" :href="canonicalUrl" />
+        <meta v-if="noindex" head-key="robots" name="robots" content="noindex, nofollow" />
 
-        <meta head-key="og:type" property="og:type" :content="type">
-        <meta head-key="og:site_name" property="og:site_name" :content="siteName">
-        <meta head-key="og:locale" property="og:locale" :content="locale">
-        <meta head-key="og:title" property="og:title" :content="fullTitle">
+        <meta head-key="og:type" property="og:type" :content="type" />
+        <meta head-key="og:site_name" property="og:site_name" :content="siteName" />
+        <meta head-key="og:locale" property="og:locale" :content="locale" />
+        <meta head-key="og:title" property="og:title" :content="fullTitle" />
         <meta
             v-if="description"
             head-key="og:description"
             property="og:description"
             :content="description"
-        >
-        <meta
-            v-if="canonicalUrl"
-            head-key="og:url"
-            property="og:url"
-            :content="canonicalUrl"
-        >
-        <meta
-            v-if="image"
-            head-key="og:image"
-            property="og:image"
-            :content="image"
-        >
+        />
+        <meta v-if="canonicalUrl" head-key="og:url" property="og:url" :content="canonicalUrl" />
+        <meta v-if="image" head-key="og:image" property="og:image" :content="image" />
 
         <meta
             head-key="twitter:card"
             name="twitter:card"
             :content="image ? 'summary_large_image' : 'summary'"
-        >
-        <meta head-key="twitter:title" name="twitter:title" :content="fullTitle">
+        />
+        <meta head-key="twitter:title" name="twitter:title" :content="fullTitle" />
         <meta
             v-if="description"
             head-key="twitter:description"
             name="twitter:description"
             :content="description"
-        >
-        <meta
-            v-if="image"
-            head-key="twitter:image"
-            name="twitter:image"
-            :content="image"
-        >
+        />
+        <meta v-if="image" head-key="twitter:image" name="twitter:image" :content="image" />
+
+        <!-- eslint-disable vue/no-v-text-v-html-on-component -- JSON-LD must be injected as raw script content -->
+        <component
+            :is="'script'"
+            v-if="jsonLdString"
+            head-key="ld-json"
+            type="application/ld+json"
+            v-html="jsonLdString"
+        />
+        <!-- eslint-enable vue/no-v-text-v-html-on-component -->
     </Head>
 </template>
diff --git a/shop/resources/js/Components/AppLink.vue b/shop/resources/js/Components/AppLink.vue
index 38abf5d8..f06c31b7 100644
--- a/shop/resources/js/Components/AppLink.vue
+++ b/shop/resources/js/Components/AppLink.vue
@@ -9,25 +9,19 @@ const props = defineProps({
     },
 });
 
-const isExternal = computed(() =>
-    /^(https?:)?\/\//.test(props.href) ||
-    props.href.startsWith('mailto:') ||
-    props.href.startsWith('tel:'),
+const isExternal = computed(
+    () =>
+        /^(https?:)?\/\//.test(props.href) ||
+        props.href.startsWith('mailto:') ||
+        props.href.startsWith('tel:'),
 );
 </script>
 
 <template>
-    <a
-        v-if="isExternal"
-        :href="href"
-        rel="noopener noreferrer"
-    >
+    <a v-if="isExternal" :href="href" rel="noopener noreferrer">
         <slot />
     </a>
-    <Link
-        v-else
-        :href="href"
-    >
+    <Link v-else :href="href">
         <slot />
     </Link>
 </template>
diff --git a/shop/resources/js/Components/Breadcrumbs.vue b/shop/resources/js/Components/Breadcrumbs.vue
new file mode 100644
index 00000000..96894215
--- /dev/null
+++ b/shop/resources/js/Components/Breadcrumbs.vue
@@ -0,0 +1,37 @@
+<script setup>
+import AppLink from '@/Components/AppLink.vue';
+import Icon from '@/Components/Icon.vue';
+import { uiIcons } from '@/fontawesome';
+
+defineProps({
+    items: {
+        type: Array,
+        default: () => [],
+    },
+});
+</script>
+
+<template>
+    <nav v-if="items.length" aria-label="مسیر" class="text-sm text-gray-500">
+        <ol class="flex flex-wrap items-center gap-1">
+            <li v-for="(item, index) in items" :key="index" class="flex items-center gap-1">
+                <AppLink
+                    v-if="item.url && index < items.length - 1"
+                    :href="item.url"
+                    class="hover:text-brand transition"
+                >
+                    {{ item.heading }}
+                </AppLink>
+                <span v-else class="font-medium text-gray-700">
+                    {{ item.heading }}
+                </span>
+
+                <Icon
+                    v-if="index < items.length - 1"
+                    :icon="uiIcons.chevronLeft"
+                    class="text-xs text-gray-300"
+                />
+            </li>
+        </ol>
+    </nav>
+</template>
diff --git a/shop/resources/js/Components/Footer/AppFooter.vue b/shop/resources/js/Components/Footer/AppFooter.vue
index f9510cca..95162e74 100644
--- a/shop/resources/js/Components/Footer/AppFooter.vue
+++ b/shop/resources/js/Components/Footer/AppFooter.vue
@@ -38,10 +38,7 @@ const emit = defineEmits(['subscribe']);
 <template>
     <footer class="mt-12 bg-white">
         <div class="mx-auto max-w-6xl px-4 py-10">
-            <p
-                v-if="about"
-                class="mb-8 max-w-3xl text-sm leading-7 text-gray-600"
-            >
+            <p v-if="about" class="mb-8 max-w-3xl text-sm leading-7 text-gray-600">
                 {{ about }}
             </p>
 
@@ -63,10 +60,7 @@ const emit = defineEmits(['subscribe']);
             </div>
 
             <div class="mt-10 grid gap-8 border-t border-gray-200 pt-8 md:grid-cols-2">
-                <FooterNewsletter
-                    v-if="showNewsletter"
-                    @subscribe="emit('subscribe', $event)"
-                />
+                <FooterNewsletter v-if="showNewsletter" @subscribe="emit('subscribe', $event)" />
 
                 <FooterSocial :socials="socials" />
             </div>
diff --git a/shop/resources/js/Components/Footer/FooterContact.vue b/shop/resources/js/Components/Footer/FooterContact.vue
index d1081815..0f0af1a0 100644
--- a/shop/resources/js/Components/Footer/FooterContact.vue
+++ b/shop/resources/js/Components/Footer/FooterContact.vue
@@ -24,38 +24,22 @@ defineProps({
 </script>
 
 <template>
-    <div
-        v-if="phone || email || address || hours.length"
-        class="space-y-3 text-sm text-gray-600"
-    >
+    <div v-if="phone || email || address || hours.length" class="space-y-3 text-sm text-gray-600">
         <p class="font-bold text-gray-800">{{ title }}</p>
 
         <p v-if="phone">
-            <a
-                :href="`tel:${phone}`"
-                class="transition hover:text-brand"
-            >{{ phone }}</a>
+            <a :href="`tel:${phone}`" class="hover:text-brand transition">{{ phone }}</a>
         </p>
 
         <p v-if="email">
-            <a
-                :href="`mailto:${email}`"
-                class="transition hover:text-brand"
-            >{{ email }}</a>
+            <a :href="`mailto:${email}`" class="hover:text-brand transition">{{ email }}</a>
         </p>
 
-        <p
-            v-for="line in hours"
-            :key="line"
-            class="leading-6"
-        >
+        <p v-for="line in hours" :key="line" class="leading-6">
             {{ line }}
         </p>
 
-        <p
-            v-if="address"
-            class="leading-7"
-        >
+        <p v-if="address" class="leading-7">
             {{ address }}
         </p>
     </div>
diff --git a/shop/resources/js/Components/Footer/FooterCopyright.vue b/shop/resources/js/Components/Footer/FooterCopyright.vue
index bcec5928..49bec2b4 100644
--- a/shop/resources/js/Components/Footer/FooterCopyright.vue
+++ b/shop/resources/js/Components/Footer/FooterCopyright.vue
@@ -8,10 +8,7 @@ defineProps({
 </script>
 
 <template>
-    <div
-        v-if="text"
-        class="border-t border-gray-200 py-5 text-center text-sm text-gray-500"
-    >
+    <div v-if="text" class="border-t border-gray-200 py-5 text-center text-sm text-gray-500">
         {{ text }}
     </div>
 </template>
diff --git a/shop/resources/js/Components/Footer/FooterLinkColumn.vue b/shop/resources/js/Components/Footer/FooterLinkColumn.vue
index 451da540..ac71d8d1 100644
--- a/shop/resources/js/Components/Footer/FooterLinkColumn.vue
+++ b/shop/resources/js/Components/Footer/FooterLinkColumn.vue
@@ -15,26 +15,17 @@ defineProps({
 
 <template>
     <div v-if="links.length">
-        <p
-            v-if="title"
-            class="mb-4 font-bold text-gray-800"
-        >
+        <p v-if="title" class="mb-4 font-bold text-gray-800">
             {{ title }}
         </p>
 
         <ul class="space-y-2">
-            <li
-                v-for="link in links"
-                :key="link.url"
-            >
-                <AppLink
-                    :href="link.url"
-                    class="text-sm text-gray-600 transition hover:text-brand"
-                >
+            <li v-for="link in links" :key="link.url">
+                <AppLink :href="link.url" class="hover:text-brand text-sm text-gray-600 transition">
                     {{ link.label }}
                     <span
                         v-if="link.badge"
-                        class="me-1 rounded bg-brand px-1.5 py-0.5 text-xs text-white"
+                        class="bg-brand me-1 rounded px-1.5 py-0.5 text-xs text-white"
                     >
                         {{ link.badge }}
                     </span>
diff --git a/shop/resources/js/Components/Footer/FooterNewsletter.vue b/shop/resources/js/Components/Footer/FooterNewsletter.vue
index a12c9efc..a3c2b0c2 100644
--- a/shop/resources/js/Components/Footer/FooterNewsletter.vue
+++ b/shop/resources/js/Components/Footer/FooterNewsletter.vue
@@ -32,20 +32,15 @@ const submit = () => {
         <p class="mb-2 font-bold text-gray-800">{{ title }}</p>
         <p class="mb-3 text-sm text-gray-600">{{ description }}</p>
 
-        <form
-            class="flex gap-2"
-            @submit.prevent="submit"
-        >
+        <form class="flex gap-2" @submit.prevent="submit">
             <input
                 v-model="email"
                 type="email"
                 required
                 placeholder="آدرس ایمیل"
-                class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-brand focus:outline-none"
-            >
-            <BaseButton type="submit">
-                ثبت
-            </BaseButton>
+                class="focus:border-brand w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none"
+            />
+            <BaseButton type="submit"> ثبت </BaseButton>
         </form>
     </div>
 </template>
diff --git a/shop/resources/js/Components/Footer/FooterSocial.vue b/shop/resources/js/Components/Footer/FooterSocial.vue
index 754eb8b6..ff5b9c8b 100644
--- a/shop/resources/js/Components/Footer/FooterSocial.vue
+++ b/shop/resources/js/Components/Footer/FooterSocial.vue
@@ -44,7 +44,7 @@ const iconFor = (social) => {
                 :title="social.name"
                 :aria-label="social.name"
                 rel="noopener noreferrer nofollow"
-                class="flex h-10 w-10 items-center justify-center rounded-full border border-gray-300 text-gray-500 transition hover:border-brand hover:text-brand"
+                class="hover:border-brand hover:text-brand flex h-10 w-10 items-center justify-center rounded-full border border-gray-300 text-gray-500 transition"
             >
                 <Icon :icon="iconFor(social)" />
             </a>
diff --git a/shop/resources/js/Components/Header/AppHeader.vue b/shop/resources/js/Components/Header/AppHeader.vue
new file mode 100644
index 00000000..2e98495c
--- /dev/null
+++ b/shop/resources/js/Components/Header/AppHeader.vue
@@ -0,0 +1,85 @@
+<script setup>
+import { ref } from 'vue';
+import { Link } from '@inertiajs/vue3';
+import AppLink from '@/Components/AppLink.vue';
+import Icon from '@/Components/Icon.vue';
+import HeaderSearch from '@/Components/Header/HeaderSearch.vue';
+import HeaderActions from '@/Components/Header/HeaderActions.vue';
+import CategoryMenu from '@/Components/Header/CategoryMenu.vue';
+import { uiIcons } from '@/fontawesome';
+
+defineProps({
+    categories: {
+        type: Array,
+        default: () => [],
+    },
+});
+
+const mobileOpen = ref(false);
+</script>
+
+<template>
+    <header class="sticky top-0 z-30 border-b border-gray-200 bg-white">
+        <div class="mx-auto flex max-w-6xl items-center gap-4 px-4 py-3">
+            <button
+                type="button"
+                class="rounded-lg p-2 text-gray-700 transition hover:bg-gray-100 md:hidden"
+                aria-label="منو"
+                @click="mobileOpen = !mobileOpen"
+            >
+                <Icon :icon="mobileOpen ? uiIcons.close : uiIcons.menu" />
+            </button>
+
+            <Link href="/" class="text-brand shrink-0 text-xl font-bold"> ShopFlow </Link>
+
+            <div class="hidden flex-1 sm:block">
+                <HeaderSearch />
+            </div>
+
+            <div class="mr-auto">
+                <HeaderActions />
+            </div>
+        </div>
+
+        <div class="border-t border-gray-100 px-4 py-1 sm:hidden">
+            <HeaderSearch />
+        </div>
+
+        <div class="mx-auto hidden max-w-6xl px-4 md:block">
+            <CategoryMenu :categories="categories" />
+        </div>
+
+        <div v-if="mobileOpen" class="border-t border-gray-100 md:hidden">
+            <nav class="mx-auto max-w-6xl px-4 py-2" aria-label="دسته‌بندی‌ها">
+                <details
+                    v-for="category in categories"
+                    :key="category.url"
+                    class="border-b border-gray-50 last:border-0"
+                >
+                    <summary
+                        class="flex cursor-pointer items-center justify-between py-2 text-sm text-gray-700"
+                    >
+                        <AppLink :href="category.url" class="hover:text-brand">
+                            {{ category.heading }}
+                        </AppLink>
+                        <Icon
+                            v-if="category.children.length"
+                            :icon="uiIcons.chevronDown"
+                            class="text-xs text-gray-400"
+                        />
+                    </summary>
+                    <div v-if="category.children.length" class="pr-3 pb-2">
+                        <AppLink
+                            v-for="child in category.children"
+                            :key="child.url"
+                            :href="child.url"
+                            class="hover:text-brand block py-1.5 text-sm text-gray-500"
+                        >
+                            {{ child.heading }}
+                        </AppLink>
+                    </div>
+                </details>
+            </nav>
+        </div>
+    </header>
+</template>
diff --git a/shop/resources/js/Components/Header/CategoryMenu.vue b/shop/resources/js/Components/Header/CategoryMenu.vue
new file mode 100644
index 00000000..5b6637c9
--- /dev/null
+++ b/shop/resources/js/Components/Header/CategoryMenu.vue
@@ -0,0 +1,46 @@
+<script setup>
+import AppLink from '@/Components/AppLink.vue';
+import Icon from '@/Components/Icon.vue';
+import { uiIcons } from '@/fontawesome';
+
+defineProps({
+    categories: {
+        type: Array,
+        default: () => [],
+    },
+});
+</script>
+
+<template>
+    <nav v-if="categories.length" class="hidden md:block" aria-label="دسته‌بندی‌ها">
+        <ul class="flex items-center gap-1">
+            <li v-for="category in categories" :key="category.url" class="group relative">
+                <AppLink
+                    :href="category.url"
+                    class="hover:text-brand flex items-center gap-1 rounded-lg px-3 py-2 text-sm text-gray-700 transition hover:bg-gray-50"
+                >
+                    {{ category.heading }}
+                    <Icon
+                        v-if="category.children.length"
+                        :icon="uiIcons.chevronDown"
+                        class="text-xs text-gray-400"
+                    />
+                </AppLink>
+
+                <div
+                    v-if="category.children.length"
+                    class="invisible absolute top-full right-0 z-20 min-w-48 translate-y-1 rounded-xl border border-gray-100 bg-white p-2 opacity-0 shadow-lg transition group-hover:visible group-hover:translate-y-0 group-hover:opacity-100"
+                >
+                    <AppLink
+                        v-for="child in category.children"
+                        :key="child.url"
+                        :href="child.url"
+                        class="hover:text-brand block rounded-lg px-3 py-2 text-sm text-gray-600 transition hover:bg-gray-50"
+                    >
+                        {{ child.heading }}
+                    </AppLink>
+                </div>
+            </li>
+        </ul>
+    </nav>
+</template>
diff --git a/shop/resources/js/Components/Header/HeaderActions.vue b/shop/resources/js/Components/Header/HeaderActions.vue
new file mode 100644
index 00000000..27448dcb
--- /dev/null
+++ b/shop/resources/js/Components/Header/HeaderActions.vue
@@ -0,0 +1,26 @@
+<script setup>
+import AppLink from '@/Components/AppLink.vue';
+import Icon from '@/Components/Icon.vue';
+import { uiIcons } from '@/fontawesome';
+</script>
+
+<template>
+    <div class="flex items-center gap-1 sm:gap-2">
+        <AppLink
+            href="/login"
+            class="hover:text-brand flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-gray-700 transition hover:bg-gray-100"
+        >
+            <Icon :icon="uiIcons.user" />
+            <span class="hidden sm:inline">حساب کاربری</span>
+        </AppLink>
+
+        <AppLink
+            href="/cart"
+            class="hover:text-brand flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-gray-700 transition hover:bg-gray-100"
+            aria-label="سبد خرید"
+        >
+            <Icon :icon="uiIcons.cart" />
+            <span class="hidden sm:inline">سبد خرید</span>
+        </AppLink>
+    </div>
+</template>
diff --git a/shop/resources/js/Components/Header/HeaderSearch.vue b/shop/resources/js/Components/Header/HeaderSearch.vue
new file mode 100644
index 00000000..ec30c773
--- /dev/null
+++ b/shop/resources/js/Components/Header/HeaderSearch.vue
@@ -0,0 +1,36 @@
+<script setup>
+import { ref } from 'vue';
+import { router } from '@inertiajs/vue3';
+import Icon from '@/Components/Icon.vue';
+import { uiIcons } from '@/fontawesome';
+
+const query = ref('');
+
+function submit() {
+    const term = query.value.trim();
+
+    if (term === '') {
+        return;
+    }
+
+    router.get('/search', { q: term });
+}
+</script>
+
+<template>
+    <form
+        class="focus-within:ring-brand flex w-full items-center gap-2 rounded-xl bg-gray-100 px-3 py-2 focus-within:ring-2"
+        role="search"
+        @submit.prevent="submit"
+    >
+        <Icon :icon="uiIcons.search" class="text-gray-400" />
+        <input
+            v-model="query"
+            type="search"
+            name="q"
+            placeholder="جستجو در فروشگاه..."
+            class="w-full bg-transparent text-sm text-gray-700 placeholder-gray-400 focus:outline-none"
+            aria-label="جستجو"
+        />
+    </form>
+</template>
diff --git a/shop/resources/js/Components/Home/BannerGrid.vue b/shop/resources/js/Components/Home/BannerGrid.vue
new file mode 100644
index 00000000..0f0730b0
--- /dev/null
+++ b/shop/resources/js/Components/Home/BannerGrid.vue
@@ -0,0 +1,35 @@
+<script setup>
+import { computed } from 'vue';
+import AppLink from '@/Components/AppLink.vue';
+
+const props = defineProps({
+    banners: {
+        type: Array,
+        default: () => [],
+    },
+});
+
+// Only banners that actually have an image are worth rendering.
+const visibleBanners = computed(() => props.banners.filter((banner) => banner.image));
+</script>
+
+<template>
+    <section v-if="visibleBanners.length">
+        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            <component
+                :is="banner.url ? AppLink : 'div'"
+                v-for="banner in visibleBanners"
+                :key="banner.id"
+                :href="banner.url || undefined"
+                class="overflow-hidden rounded-xl"
+            >
+                <img
+                    :src="banner.image.url"
+                    :alt="banner.image.alt || banner.heading"
+                    loading="lazy"
+                    class="h-full w-full object-cover transition duration-300 hover:scale-105"
+                />
+            </component>
+        </div>
+    </section>
+</template>
diff --git a/shop/resources/js/Components/Home/BrandStrip.vue b/shop/resources/js/Components/Home/BrandStrip.vue
new file mode 100644
index 00000000..07999da9
--- /dev/null
+++ b/shop/resources/js/Components/Home/BrandStrip.vue
@@ -0,0 +1,37 @@
+<script setup>
+import AppLink from '@/Components/AppLink.vue';
+import SectionHeading from '@/Components/SectionHeading.vue';
+
+defineProps({
+    brands: {
+        type: Array,
+        default: () => [],
+    },
+});
+</script>
+
+<template>
+    <section v-if="brands.length">
+        <SectionHeading title="برندهای منتخب" />
+
+        <div class="grid grid-cols-3 gap-4 sm:grid-cols-4 md:grid-cols-6">
+            <AppLink
+                v-for="brand in brands"
+                :key="brand.id"
+                :href="brand.url"
+                class="hover:border-brand flex items-center justify-center rounded-xl border border-gray-100 bg-white p-4 transition"
+            >
+                <img
+                    v-if="brand.image"
+                    :src="brand.image.url"
+                    :alt="brand.image.alt || brand.heading"
+                    loading="lazy"
+                    class="h-12 w-full object-contain"
+                />
+                <span v-else class="text-sm font-medium text-gray-700">
+                    {{ brand.heading }}
+                </span>
+            </AppLink>
+        </div>
+    </section>
+</template>
diff --git a/shop/resources/js/Components/Home/CategoryStrip.vue b/shop/resources/js/Components/Home/CategoryStrip.vue
new file mode 100644
index 00000000..5aed8130
--- /dev/null
+++ b/shop/resources/js/Components/Home/CategoryStrip.vue
@@ -0,0 +1,41 @@
+<script setup>
+import AppLink from '@/Components/AppLink.vue';
+import Icon from '@/Components/Icon.vue';
+import { uiIcons } from '@/fontawesome';
+
+defineProps({
+    categories: {
+        type: Array,
+        default: () => [],
+    },
+});
+</script>
+
+<template>
+    <section v-if="categories.length">
+        <div class="grid grid-cols-3 gap-4 sm:grid-cols-4 md:grid-cols-6">
+            <AppLink
+                v-for="category in categories"
+                :key="category.id"
+                :href="category.url"
+                class="group flex flex-col items-center gap-2 text-center"
+            >
+                <span
+                    class="group-hover:ring-brand flex h-16 w-16 items-center justify-center overflow-hidden rounded-full bg-gray-100 ring-1 ring-gray-100 transition sm:h-20 sm:w-20"
+                >
+                    <img
+                        v-if="category.image"
+                        :src="category.image.url"
+                        :alt="category.image.alt || category.heading"
+                        loading="lazy"
+                        class="h-full w-full object-cover"
+                    />
+                    <Icon v-else :icon="uiIcons.image" class="text-2xl text-gray-300" />
+                </span>
+                <span class="group-hover:text-brand text-xs text-gray-700 sm:text-sm">
+                    {{ category.heading }}
+                </span>
+            </AppLink>
+        </div>
+    </section>
+</template>
diff --git a/shop/resources/js/Components/Home/HeroSlider.vue b/shop/resources/js/Components/Home/HeroSlider.vue
new file mode 100644
index 00000000..bd8544d1
--- /dev/null
+++ b/shop/resources/js/Components/Home/HeroSlider.vue
@@ -0,0 +1,109 @@
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import AppLink from '@/Components/AppLink.vue';
+import Icon from '@/Components/Icon.vue';
+import { uiIcons } from '@/fontawesome';
+
+const props = defineProps({
+    slides: {
+        type: Array,
+        default: () => [],
+    },
+});
+
+const current = ref(0);
+const count = computed(() => props.slides.length);
+
+function go(index) {
+    if (count.value === 0) {
+        return;
+    }
+
+    current.value = (index + count.value) % count.value;
+}
+
+const next = () => go(current.value + 1);
+const prev = () => go(current.value - 1);
+
+let timer = null;
+
+onMounted(() => {
+    if (count.value > 1) {
+        timer = window.setInterval(next, 6000);
+    }
+});
+
+onBeforeUnmount(() => {
+    if (timer !== null) {
+        window.clearInterval(timer);
+    }
+});
+</script>
+
+<template>
+    <section
+        v-if="count"
+        class="relative overflow-hidden rounded-2xl bg-gray-100"
+        aria-roledescription="carousel"
+    >
+        <div class="relative aspect-[21/9] w-full sm:aspect-[3/1]">
+            <component
+                :is="slide.url ? AppLink : 'div'"
+                v-for="(slide, index) in slides"
+                :key="slide.id"
+                :href="slide.url || undefined"
+                class="absolute inset-0 transition-opacity duration-700"
+                :class="index === current ? 'opacity-100' : 'pointer-events-none opacity-0'"
+            >
+                <img
+                    v-if="slide.image"
+                    :src="slide.image.url"
+                    :alt="slide.image.alt || slide.heading || ''"
+                    class="h-full w-full object-cover"
+                />
+                <div
+                    v-if="slide.heading || slide.label"
+                    class="absolute right-0 bottom-0 left-0 bg-gradient-to-t from-black/60 to-transparent p-4 text-white sm:p-6"
+                >
+                    <p v-if="slide.heading" class="text-base font-bold sm:text-2xl">
+                        {{ slide.heading }}
+                    </p>
+                    <p v-if="slide.label" class="mt-1 text-xs sm:text-sm">
+                        {{ slide.label }}
+                    </p>
+                </div>
+            </component>
+        </div>
+
+        <template v-if="count > 1">
+            <button
+                type="button"
+                class="absolute top-1/2 right-3 -translate-y-1/2 rounded-full bg-white/80 p-2 text-gray-800 shadow transition hover:bg-white"
+                aria-label="اسلاید قبلی"
+                @click="prev"
+            >
+                <Icon :icon="uiIcons.chevronRight" />
+            </button>
+            <button
+                type="button"
+                class="absolute top-1/2 left-3 -translate-y-1/2 rounded-full bg-white/80 p-2 text-gray-800 shadow transition hover:bg-white"
+                aria-label="اسلاید بعدی"
+                @click="next"
+            >
+                <Icon :icon="uiIcons.chevronLeft" />
+            </button>
+
+            <div class="absolute bottom-3 left-1/2 flex -translate-x-1/2 gap-2">
+                <button
+                    v-for="(slide, index) in slides"
+                    :key="slide.id"
+                    type="button"
+                    class="h-2 rounded-full transition-all"
+                    :class="index === current ? 'bg-brand w-5' : 'w-2 bg-white/70'"
+                    :aria-label="`اسلاید ${index + 1}`"
+                    @click="go(index)"
+                />
+            </div>
+        </template>
+    </section>
+</template>
diff --git a/shop/resources/js/Components/Home/ProductCarousel.vue b/shop/resources/js/Components/Home/ProductCarousel.vue
new file mode 100644
index 00000000..e32937a0
--- /dev/null
+++ b/shop/resources/js/Components/Home/ProductCarousel.vue
@@ -0,0 +1,71 @@
+<script setup>
+import { ref } from 'vue';
+import Icon from '@/Components/Icon.vue';
+import ProductCard from '@/Components/ProductCard.vue';
+import SectionHeading from '@/Components/SectionHeading.vue';
+import { uiIcons } from '@/fontawesome';
+
+defineProps({
+    title: {
+        type: String,
+        required: true,
+    },
+    viewAllUrl: {
+        type: String,
+        default: '',
+    },
+    products: {
+        type: Array,
+        default: () => [],
+    },
+});
+
+const track = ref(null);
+
+// Scroll by roughly one viewport; sign is flipped because the layout is RTL.
+function scroll(direction) {
+    if (track.value === null) {
+        return;
+    }
+
+    track.value.scrollBy({ left: direction * track.value.clientWidth * 0.8, behavior: 'smooth' });
+}
+</script>
+
+<template>
+    <section v-if="products.length">
+        <SectionHeading :title="title" :view-all-url="viewAllUrl" />
+
+        <div class="relative">
+            <div
+                ref="track"
+                class="flex snap-x snap-mandatory [scrollbar-width:none] gap-4 overflow-x-auto scroll-smooth pb-2 [&::-webkit-scrollbar]:hidden"
+            >
+                <div
+                    v-for="product in products"
+                    :key="product.id"
+                    class="w-40 shrink-0 snap-start sm:w-48"
+                >
+                    <ProductCard :product="product" />
+                </div>
+            </div>
+
+            <button
+                type="button"
+                class="hover:text-brand absolute top-1/2 -right-2 hidden -translate-y-1/2 rounded-full border border-gray-200 bg-white p-2 text-gray-700 shadow-sm transition md:block"
+                aria-label="قبلی"
+                @click="scroll(1)"
+            >
+                <Icon :icon="uiIcons.chevronRight" />
+            </button>
+            <button
+                type="button"
+                class="hover:text-brand absolute top-1/2 -left-2 hidden -translate-y-1/2 rounded-full border border-gray-200 bg-white p-2 text-gray-700 shadow-sm transition md:block"
+                aria-label="بعدی"
+                @click="scroll(-1)"
+            >
+                <Icon :icon="uiIcons.chevronLeft" />
+            </button>
+        </div>
+    </section>
+</template>
diff --git a/shop/resources/js/Components/PriceTag.vue b/shop/resources/js/Components/PriceTag.vue
new file mode 100644
index 00000000..416d66af
--- /dev/null
+++ b/shop/resources/js/Components/PriceTag.vue
@@ -0,0 +1,44 @@
+<script setup>
+import { computed } from 'vue';
+import { useFormat } from '@/composables/useFormat';
+
+const props = defineProps({
+    price: {
+        type: Number,
+        required: true,
+    },
+    salePrice: {
+        type: Number,
+        default: null,
+    },
+    discountPercent: {
+        type: Number,
+        default: null,
+    },
+});
+
+const { formatPrice, toPersianDigits } = useFormat();
+
+const hasDiscount = computed(() => props.salePrice !== null && props.salePrice < props.price);
+const finalPrice = computed(() => (hasDiscount.value ? props.salePrice : props.price));
+</script>
+
+<template>
+    <div class="flex items-center justify-between gap-2">
+        <div class="flex flex-col">
+            <span v-if="hasDiscount" class="text-xs text-gray-400 line-through">
+                {{ formatPrice(price) }}
+            </span>
+            <span class="text-sm font-bold text-gray-900">
+                {{ formatPrice(finalPrice) }}
+            </span>
+        </div>
+
+        <span
+            v-if="hasDiscount && discountPercent"
+            class="bg-brand rounded-full px-2 py-0.5 text-xs font-bold text-white"
+        >
+            {{ toPersianDigits(discountPercent) }}٪
+        </span>
+    </div>
+</template>
diff --git a/shop/resources/js/Components/Product/BuyBox.vue b/shop/resources/js/Components/Product/BuyBox.vue
new file mode 100644
index 00000000..823665f0
--- /dev/null
+++ b/shop/resources/js/Components/Product/BuyBox.vue
@@ -0,0 +1,155 @@
+<script setup>
+import { computed, ref, watch } from 'vue';
+import Icon from '@/Components/Icon.vue';
+import { uiIcons } from '@/fontawesome';
+import { useFormat } from '@/composables/useFormat';
+
+const props = defineProps({
+    price: {
+        type: Number,
+        default: null,
+    },
+    salePrice: {
+        type: Number,
+        default: null,
+    },
+    discountPercent: {
+        type: Number,
+        default: null,
+    },
+    inStock: {
+        type: Boolean,
+        default: false,
+    },
+    inventory: {
+        type: Number,
+        default: null,
+    },
+    selected: {
+        type: Boolean,
+        default: true,
+    },
+});
+
+const { formatPrice, toPersianDigits } = useFormat();
+
+const quantity = ref(1);
+const hasDiscount = computed(() => props.salePrice !== null && props.salePrice < props.price);
+const finalPrice = computed(() => (hasDiscount.value ? props.salePrice : props.price));
+
+// Highest quantity the customer may pick; null inventory means no known cap.
+const maxQuantity = computed(() =>
+    props.inventory === null ? Infinity : Math.max(0, props.inventory),
+);
+const atMax = computed(() => quantity.value >= maxQuantity.value);
+
+const trust = [
+    { icon: uiIcons.shield, label: 'تضمین اصالت کالا' },
+    { icon: uiIcons.returns, label: '۷ روز ضمانت بازگشت' },
+    { icon: uiIcons.truck, label: 'ارسال سریع' },
+];
+
+function changeQuantity(delta) {
+    const next = quantity.value + delta;
+
+    quantity.value = Math.min(maxQuantity.value, Math.max(1, next));
+}
+
+// Reset to 1 and clamp whenever the selected variety (its stock) changes.
+watch(
+    () => [props.inventory, props.selected, props.inStock],
+    () => {
+        quantity.value = 1;
+    },
+);
+</script>
+
+<template>
+    <div class="flex flex-col gap-4 rounded-2xl border border-gray-100 bg-white p-4">
+        <ul class="flex flex-col gap-3">
+            <li
+                v-for="item in trust"
+                :key="item.label"
+                class="flex items-center gap-2 text-sm text-gray-600"
+            >
+                <Icon :icon="item.icon" class="text-brand" />
+                <span>{{ item.label }}</span>
+            </li>
+        </ul>
+
+        <div class="border-t border-gray-100 pt-4">
+            <p
+                v-if="!selected"
+                class="rounded-lg bg-gray-50 px-4 py-3 text-center text-sm font-medium text-gray-500"
+            >
+                لطفاً ویژگی‌های محصول را انتخاب کنید
+            </p>
+
+            <div v-else-if="inStock" class="flex flex-col gap-3">
+                <div class="flex items-center justify-between">
+                    <span class="text-sm text-gray-500">قیمت</span>
+                    <span
+                        v-if="hasDiscount && discountPercent"
+                        class="bg-brand rounded-full px-2 py-0.5 text-xs font-bold text-white"
+                    >
+                        {{ toPersianDigits(discountPercent) }}٪ تخفیف
+                    </span>
+                </div>
+
+                <div class="flex items-baseline justify-between">
+                    <span v-if="hasDiscount" class="text-sm text-gray-400 line-through">
+                        {{ formatPrice(price) }}
+                    </span>
+                    <span class="text-lg font-bold text-gray-900">
+                        {{ formatPrice(finalPrice) }}
+                    </span>
+                </div>
+
+                <div class="flex items-center justify-between gap-3">
+                    <span class="text-sm text-gray-500">تعداد</span>
+                    <div class="flex h-10 items-center rounded-lg border border-gray-200">
+                        <button
+                            type="button"
+                            class="hover:text-brand px-3 text-gray-600 transition disabled:text-gray-300"
+                            aria-label="افزایش"
+                            :disabled="atMax"
+                            @click="changeQuantity(1)"
+                        >
+                            <Icon :icon="uiIcons.plus" class="shrink-0 text-sm" />
+                        </button>
+                        <span class="min-w-[2rem] text-center text-sm font-medium">
+                            {{ toPersianDigits(quantity) }}
+                        </span>
+                        <button
+                            type="button"
+                            class="hover:text-brand px-3 text-gray-600 transition disabled:text-gray-300"
+                            aria-label="کاهش"
+                            :disabled="quantity <= 1"
+                            @click="changeQuantity(-1)"
+                        >
+                            <Icon :icon="uiIcons.minus" class="shrink-0 text-sm" />
+                        </button>
+                    </div>
+                </div>
+
+                <p v-if="atMax && inventory !== null" class="text-xs text-gray-400">
+                    بیشترین تعداد موجود: {{ toPersianDigits(inventory) }}
+                </p>
+
+                <button
+                    type="button"
+                    class="bg-brand hover:bg-brand/90 h-12 w-full rounded-xl text-sm font-bold text-white transition"
+                >
+                    افزودن به سبد خرید
+                </button>
+            </div>
+
+            <p
+                v-else
+                class="rounded-lg bg-gray-50 px-4 py-3 text-center text-sm font-medium text-gray-400"
+            >
+                ناموجود
+            </p>
+        </div>
+    </div>
+</template>
diff --git a/shop/resources/js/Components/Product/ProductGallery.vue b/shop/resources/js/Components/Product/ProductGallery.vue
new file mode 100644
index 00000000..77840832
--- /dev/null
+++ b/shop/resources/js/Components/Product/ProductGallery.vue
@@ -0,0 +1,82 @@
+<script setup>
+import { ref, watch } from 'vue';
+import Icon from '@/Components/Icon.vue';
+import { uiIcons } from '@/fontawesome';
+
+const props = defineProps({
+    images: {
+        type: Array,
+        default: () => [],
+    },
+    activeUrl: {
+        type: String,
+        default: null,
+    },
+    alt: {
+        type: String,
+        default: '',
+    },
+});
+
+const activeIndex = ref(0);
+
+watch(
+    () => props.images,
+    () => {
+        activeIndex.value = 0;
+    },
+);
+
+// Switch the main image to the selected variety's photo when it's in the list.
+watch(
+    () => props.activeUrl,
+    (url) => {
+        if (!url) {
+            return;
+        }
+
+        const index = props.images.findIndex((image) => image.url === url);
+
+        if (index !== -1) {
+            activeIndex.value = index;
+        }
+    },
+    { immediate: true },
+);
+</script>
+
+<template>
+    <div class="flex flex-col gap-3">
+        <div
+            class="flex aspect-square items-center justify-center overflow-hidden rounded-2xl border border-gray-100 bg-gray-50"
+        >
+            <img
+                v-if="images.length"
+                :src="images[activeIndex].url"
+                :alt="images[activeIndex].alt || alt"
+                class="h-full w-full object-contain"
+            />
+            <Icon v-else :icon="uiIcons.image" class="text-6xl text-gray-300" />
+        </div>
+
+        <div v-if="images.length > 1" class="flex flex-wrap gap-2">
+            <button
+                v-for="(image, index) in images"
+                :key="index"
+                type="button"
+                class="h-16 w-16 overflow-hidden rounded-lg border bg-white transition"
+                :class="
+                    index === activeIndex ? 'border-brand' : 'border-gray-200 hover:border-gray-300'
+                "
+                @click="activeIndex = index"
+            >
+                <img
+                    :src="image.url"
+                    :alt="image.alt || alt"
+                    loading="lazy"
+                    class="h-full w-full object-contain"
+                />
+            </button>
+        </div>
+    </div>
+</template>
diff --git a/shop/resources/js/Components/Product/ProductReviews.vue b/shop/resources/js/Components/Product/ProductReviews.vue
new file mode 100644
index 00000000..1e7f6118
--- /dev/null
+++ b/shop/resources/js/Components/Product/ProductReviews.vue
@@ -0,0 +1,41 @@
+<script setup>
+import { useFormat } from '@/composables/useFormat';
+
+defineProps({
+    reviews: {
+        type: Array,
+        default: () => [],
+    },
+});
+
+const { formatDate } = useFormat();
+</script>
+
+<template>
+    <section id="reviews">
+        <h2 class="mb-4 text-lg font-bold text-gray-900">دیدگاه کاربران</h2>
+
+        <div v-if="reviews.length" class="flex flex-col gap-4">
+            <article
+                v-for="review in reviews"
+                :key="review.id"
+                class="rounded-2xl border border-gray-100 bg-white p-4"
+            >
+                <div class="mb-2 flex items-center justify-between">
+                    <h3 class="font-bold text-gray-800">{{ review.heading }}</h3>
+                    <span v-if="review.date" class="text-xs text-gray-400">
+                        {{ formatDate(review.date) }}
+                    </span>
+                </div>
+                <p class="mb-2 text-sm leading-relaxed text-gray-600">{{ review.content }}</p>
+                <span v-if="review.author" class="text-xs text-gray-400">
+                    {{ review.author }}
+                </span>
+            </article>
+        </div>
+
+        <p v-else class="rounded-2xl bg-gray-50 px-4 py-6 text-center text-sm text-gray-400">
+            هنوز دیدگاهی برای این محصول ثبت نشده است.
+        </p>
+    </section>
+</template>
diff --git a/shop/resources/js/Components/Product/ProductSpecs.vue b/shop/resources/js/Components/Product/ProductSpecs.vue
new file mode 100644
index 00000000..288d51ef
--- /dev/null
+++ b/shop/resources/js/Components/Product/ProductSpecs.vue
@@ -0,0 +1,28 @@
+<script setup>
+import Icon from '@/Components/Icon.vue';
+import { uiIcons } from '@/fontawesome';
+
+defineProps({
+    specs: {
+        type: Array,
+        default: () => [],
+    },
+});
+</script>
+
+<template>
+    <section v-if="specs.length" id="specs">
+        <h2 class="mb-4 text-lg font-bold text-gray-900">مشخصات کالا</h2>
+
+        <ul class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+            <li
+                v-for="(spec, index) in specs"
+                :key="index"
+                class="flex items-center gap-2 rounded-lg bg-gray-50 px-3 py-2 text-sm text-gray-700"
+            >
+                <Icon :icon="uiIcons.check" class="text-brand" />
+                <span>{{ spec.value }}</span>
+            </li>
+        </ul>
+    </section>
+</template>
diff --git a/shop/resources/js/Components/Product/VarietySelector.vue b/shop/resources/js/Components/Product/VarietySelector.vue
new file mode 100644
index 00000000..379db624
--- /dev/null
+++ b/shop/resources/js/Components/Product/VarietySelector.vue
@@ -0,0 +1,210 @@
+<script setup>
+import { computed, ref, watch } from 'vue';
+
+const props = defineProps({
+    axes: {
+        type: Array,
+        default: () => [],
+    },
+    varieties: {
+        type: Array,
+        default: () => [],
+    },
+    modelValue: {
+        type: Number,
+        default: null,
+    },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const hasAxes = computed(() => props.axes.length > 0);
+
+// selected[groupId] = value
+const selected = ref({});
+
+function variety(id) {
+    return props.varieties.find((item) => item.id === id) ?? null;
+}
+
+// A variety's values for one group (it may offer several, e.g. many sizes).
+function valuesFor(item, groupId) {
+    return (item.options?.[groupId] ?? []).map(String);
+}
+
+function carries(item, groupId, value) {
+    return valuesFor(item, groupId).includes(String(value));
+}
+
+function matches(item, selection) {
+    return Object.entries(selection).every(([group, value]) => carries(item, group, value));
+}
+
+// Every axis must be chosen before a variety counts as selected.
+const isComplete = computed(
+    () => hasAxes.value && props.axes.every((axis) => selected.value[axis.id] !== undefined),
+);
+
+// The variety that fits the current selection, only once it's complete.
+const activeVariety = computed(() => {
+    if (!isComplete.value) {
+        return null;
+    }
+
+    const candidates = props.varieties.filter((item) => matches(item, selected.value));
+
+    return candidates.find((item) => item.inStock) ?? candidates[0] ?? null;
+});
+
+// Start with nothing selected unless the parent points at a specific variety.
+function initSelection() {
+    selected.value = {};
+
+    const start = variety(props.modelValue);
+
+    if (!start) {
+        return;
+    }
+
+    for (const axis of props.axes) {
+        const value = valuesFor(start, axis.id)[0];
+
+        if (value !== undefined) {
+            selected.value[axis.id] = value;
+        }
+    }
+}
+
+initSelection();
+
+watch(
+    activeVariety,
+    (item) => {
+        emit('update:modelValue', item ? item.id : null);
+    },
+    { immediate: true },
+);
+
+// Flat fallback (no attribute axes): a lone in-stock variety needs no choice,
+// so auto-select it instead of forcing a meaningless click.
+if (!hasAxes.value && props.varieties.length === 1 && props.varieties[0].inStock) {
+    emit('update:modelValue', props.varieties[0].id);
+}
+
+function isSelected(groupId, value) {
+    return String(selected.value[groupId]) === String(value);
+}
+
+// Availability rules:
+// - Primary axis (e.g. color) is the variety selector, so it's only limited by
+//   stock, never by the secondary axes.
+// - Secondary axes (e.g. size) are limited to what the chosen primary offers.
+function isAvailable(groupId, value, isPrimary) {
+    return props.varieties.some((item) => {
+        if (!item.inStock || !carries(item, groupId, value)) {
+            return false;
+        }
+
+        if (isPrimary) {
+            return true;
+        }
+
+        return Object.entries(selected.value).every(
+            ([group, selectedValue]) =>
+                String(group) === String(groupId) || carries(item, group, selectedValue),
+        );
+    });
+}
+
+function selectOption(groupId, value, isPrimary) {
+    if (!isAvailable(groupId, value, isPrimary)) {
+        return;
+    }
+
+    const next = { ...selected.value, [groupId]: value };
+
+    // Drop selections on other axes that no longer have any in-stock match.
+    for (const axis of props.axes) {
+        if (String(axis.id) === String(groupId) || next[axis.id] === undefined) {
+            continue;
+        }
+
+        const stillValid = props.varieties.some((item) => item.inStock && matches(item, next));
+
+        if (!stillValid) {
+            delete next[axis.id];
+        }
+    }
+
+    selected.value = next;
+}
+
+// Flat fallback: products whose varieties have no grouped attributes.
+function selectVariety(item) {
+    if (item.inStock) {
+        emit('update:modelValue', item.id);
+    }
+}
+</script>
+
+<template>
+    <div v-if="hasAxes" class="flex flex-col gap-4">
+        <div v-for="axis in axes" :key="axis.id" class="flex flex-col gap-2">
+            <span class="text-sm font-medium text-gray-700">{{ axis.name }}</span>
+
+            <div class="flex flex-wrap gap-2">
+                <button
+                    v-for="option in axis.options"
+                    :key="option.value"
+                    type="button"
+                    :disabled="!isAvailable(axis.id, option.value, axis.primary)"
+                    class="flex items-center gap-2 rounded-lg border px-3 py-2 text-sm transition"
+                    :class="[
+                        isSelected(axis.id, option.value)
+                            ? 'border-brand bg-brand/5 text-brand'
+                            : 'border-gray-200 text-gray-700 hover:border-gray-300',
+                        !isAvailable(axis.id, option.value, axis.primary)
+                            ? 'cursor-not-allowed text-gray-300 line-through'
+                            : '',
+                    ]"
+                    @click="selectOption(axis.id, option.value, axis.primary)"
+                >
+                    <span
+                        v-if="option.color"
+                        class="h-4 w-4 rounded-full border border-gray-200"
+                        :style="{ backgroundColor: option.color }"
+                    />
+                    <span>{{ option.value }}</span>
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <div v-else-if="varieties.length" class="flex flex-col gap-3">
+        <span class="text-sm font-medium text-gray-700">انتخاب نوع کالا</span>
+
+        <div class="flex flex-wrap gap-2">
+            <button
+                v-for="item in varieties"
+                :key="item.id"
+                type="button"
+                :disabled="!item.inStock"
+                class="flex items-center gap-2 rounded-lg border px-3 py-2 text-sm transition"
+                :class="[
+                    item.id === modelValue
+                        ? 'border-brand bg-brand/5 text-brand'
+                        : 'border-gray-200 text-gray-700 hover:border-gray-300',
+                    !item.inStock ? 'cursor-not-allowed text-gray-300 line-through' : '',
+                ]"
+                @click="selectVariety(item)"
+            >
+                <span
+                    v-if="item.color"
+                    class="h-4 w-4 rounded-full border border-gray-200"
+                    :style="{ backgroundColor: item.color }"
+                />
+                <span>{{ item.label || 'پیش‌فرض' }}</span>
+            </button>
+        </div>
+    </div>
+</template>
diff --git a/shop/resources/js/Components/ProductCard.vue b/shop/resources/js/Components/ProductCard.vue
new file mode 100644
index 00000000..0341f1b9
--- /dev/null
+++ b/shop/resources/js/Components/ProductCard.vue
@@ -0,0 +1,45 @@
+<script setup>
+import AppLink from '@/Components/AppLink.vue';
+import Icon from '@/Components/Icon.vue';
+import PriceTag from '@/Components/PriceTag.vue';
+import { uiIcons } from '@/fontawesome';
+
+defineProps({
+    product: {
+        type: Object,
+        required: true,
+    },
+});
+</script>
+
+<template>
+    <AppLink
+        :href="product.url"
+        class="group hover:border-brand flex h-full flex-col overflow-hidden rounded-xl border border-gray-100 bg-white transition hover:shadow-md"
+    >
+        <div class="flex aspect-square items-center justify-center overflow-hidden bg-gray-50">
+            <img
+                v-if="product.image"
+                :src="product.image.url"
+                :alt="product.image.alt || product.heading"
+                loading="lazy"
+                class="h-full w-full object-contain transition duration-300 group-hover:scale-105"
+            />
+            <Icon v-else :icon="uiIcons.image" class="text-4xl text-gray-300" />
+        </div>
+
+        <div class="flex flex-1 flex-col gap-3 p-3">
+            <h3 class="line-clamp-2 min-h-[2.5rem] text-sm leading-relaxed text-gray-700">
+                {{ product.heading }}
+            </h3>
+
+            <div class="mt-auto">
+                <PriceTag
+                    :price="product.price"
+                    :sale-price="product.salePrice"
+                    :discount-percent="product.discountPercent"
+                />
+            </div>
+        </div>
+    </AppLink>
+</template>
diff --git a/shop/resources/js/Components/RatingStars.vue b/shop/resources/js/Components/RatingStars.vue
new file mode 100644
index 00000000..9a11b6cc
--- /dev/null
+++ b/shop/resources/js/Components/RatingStars.vue
@@ -0,0 +1,34 @@
+<script setup>
+import { computed } from 'vue';
+import Icon from '@/Components/Icon.vue';
+import { uiIcons } from '@/fontawesome';
+
+const props = defineProps({
+    rating: {
+        type: Number,
+        default: 0,
+    },
+    count: {
+        type: Number,
+        default: null,
+    },
+});
+
+const stars = computed(() =>
+    Array.from({ length: 5 }, (_, index) => index < Math.round(props.rating)),
+);
+</script>
+
+<template>
+    <div class="flex items-center gap-2">
+        <div class="flex items-center gap-0.5 text-sm">
+            <Icon
+                v-for="(filled, index) in stars"
+                :key="index"
+                :icon="uiIcons.star"
+                :class="filled ? 'text-amber-400' : 'text-gray-200'"
+            />
+        </div>
+        <span v-if="count !== null" class="text-xs text-gray-400"> ({{ count }}) </span>
+    </div>
+</template>
diff --git a/shop/resources/js/Components/SectionHeading.vue b/shop/resources/js/Components/SectionHeading.vue
new file mode 100644
index 00000000..5cd5bb44
--- /dev/null
+++ b/shop/resources/js/Components/SectionHeading.vue
@@ -0,0 +1,37 @@
+<script setup>
+import AppLink from '@/Components/AppLink.vue';
+import Icon from '@/Components/Icon.vue';
+import { uiIcons } from '@/fontawesome';
+
+defineProps({
+    title: {
+        type: String,
+        required: true,
+    },
+    viewAllUrl: {
+        type: String,
+        default: '',
+    },
+    viewAllLabel: {
+        type: String,
+        default: 'مشاهده همه',
+    },
+});
+</script>
+
+<template>
+    <div class="mb-4 flex items-center justify-between">
+        <h2 class="text-lg font-bold text-gray-900 sm:text-xl">
+            {{ title }}
+        </h2>
+
+        <AppLink
+            v-if="viewAllUrl"
+            :href="viewAllUrl"
+            class="text-brand flex items-center gap-1 text-sm font-medium hover:opacity-80"
+        >
+            {{ viewAllLabel }}
+            <Icon :icon="uiIcons.chevronLeft" class="text-xs" />
+        </AppLink>
+    </div>
+</template>
diff --git a/shop/resources/js/Layouts/AppLayout.vue b/shop/resources/js/Layouts/AppLayout.vue
index 14b4e9cd..3342cdbb 100644
--- a/shop/resources/js/Layouts/AppLayout.vue
+++ b/shop/resources/js/Layouts/AppLayout.vue
@@ -1,23 +1,18 @@
 <script setup>
 import { computed } from 'vue';
 import { usePage } from '@inertiajs/vue3';
+import AppHeader from '@/Components/Header/AppHeader.vue';
 import AppFooter from '@/Components/Footer/AppFooter.vue';
 
 const page = usePage();
 
 const footer = computed(() => page.props.footer ?? {});
+const navCategories = computed(() => page.props.nav?.categories ?? []);
 </script>
 
 <template>
     <div class="min-h-screen bg-gray-50 text-gray-900">
-        <header class="border-b border-gray-200 bg-white">
-            <div class="mx-auto flex max-w-6xl items-center justify-between px-4 py-4">
-                <span class="text-lg font-bold">ShopFlow</span>
-                <nav class="flex gap-4 text-sm">
-                    <a href="/" class="hover:text-brand">خانه</a>
-                </nav>
-            </div>
-        </header>
+        <AppHeader :categories="navCategories" />
 
         <main class="mx-auto max-w-6xl px-4 py-8">
             <slot />
diff --git a/shop/resources/js/Pages/Home.vue b/shop/resources/js/Pages/Home.vue
index 15dda754..0f815956 100644
--- a/shop/resources/js/Pages/Home.vue
+++ b/shop/resources/js/Pages/Home.vue
@@ -1,25 +1,80 @@
 <script setup>
+import { computed } from 'vue';
+import { usePage } from '@inertiajs/vue3';
 import AppHead from '@/Components/AppHead.vue';
 import AppLayout from '@/Layouts/AppLayout.vue';
+import HeroSlider from '@/Components/Home/HeroSlider.vue';
+import CategoryStrip from '@/Components/Home/CategoryStrip.vue';
+import BannerGrid from '@/Components/Home/BannerGrid.vue';
+import ProductCarousel from '@/Components/Home/ProductCarousel.vue';
+import BrandStrip from '@/Components/Home/BrandStrip.vue';
 
 defineProps({
-    message: {
-        type: String,
-        default: '',
+    slides: {
+        type: Array,
+        default: () => [],
+    },
+    categories: {
+        type: Array,
+        default: () => [],
+    },
+    banners: {
+        type: Array,
+        default: () => [],
+    },
+    productRows: {
+        type: Array,
+        default: () => [],
+    },
+    brands: {
+        type: Array,
+        default: () => [],
     },
 });
+
+const page = usePage();
+const seo = computed(() => page.props.seo ?? {});
+
+const jsonLd = computed(() => [
+    {
+        '@context': 'https://schema.org',
+        '@type': 'Organization',
+        name: seo.value.siteName ?? '',
+        url: seo.value.url ?? '',
+    },
+    {
+        '@context': 'https://schema.org',
+        '@type': 'WebSite',
+        name: seo.value.siteName ?? '',
+        url: seo.value.url ?? '',
+    },
+]);
 </script>
 
 <template>
     <AppHead
-        title="خانه"
-        description="فروشگاه آنلاین ShopFlow"
+        title="فروشگاه اینترنتی"
+        description="خرید آنلاین از فروشگاه اینترنتی ShopFlow؛ پوشاک، لوازم آرایشی، کالای دیجیتال و کالاهای خانه با بهترین قیمت."
+        :json-ld="jsonLd"
     />
 
     <AppLayout>
-        <section class="rounded-xl bg-white p-10 text-center shadow-sm">
-            <h1 class="text-2xl font-bold">به ShopFlow خوش آمدید</h1>
-            <p class="mt-4 text-gray-600">{{ message }}</p>
-        </section>
+        <div class="flex flex-col gap-10">
+            <HeroSlider :slides="slides" />
+
+            <CategoryStrip :categories="categories" />
+
+            <BannerGrid :banners="banners" />
+
+            <ProductCarousel
+                v-for="row in productRows"
+                :key="row.title"
+                :title="row.title"
+                :view-all-url="row.viewAllUrl"
+                :products="row.products"
+            />
+
+            <BrandStrip :brands="brands" />
+        </div>
     </AppLayout>
 </template>
diff --git a/shop/resources/js/Pages/Product/Show.vue b/shop/resources/js/Pages/Product/Show.vue
new file mode 100644
index 00000000..10696a5e
--- /dev/null
+++ b/shop/resources/js/Pages/Product/Show.vue
@@ -0,0 +1,235 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { usePage } from '@inertiajs/vue3';
+import AppHead from '@/Components/AppHead.vue';
+import AppLayout from '@/Layouts/AppLayout.vue';
+import AppLink from '@/Components/AppLink.vue';
+import Breadcrumbs from '@/Components/Breadcrumbs.vue';
+import RatingStars from '@/Components/RatingStars.vue';
+import ProductGallery from '@/Components/Product/ProductGallery.vue';
+import VarietySelector from '@/Components/Product/VarietySelector.vue';
+import BuyBox from '@/Components/Product/BuyBox.vue';
+import ProductSpecs from '@/Components/Product/ProductSpecs.vue';
+import ProductReviews from '@/Components/Product/ProductReviews.vue';
+import ProductCarousel from '@/Components/Home/ProductCarousel.vue';
+
+const props = defineProps({
+    product: {
+        type: Object,
+        required: true,
+    },
+    breadcrumbs: {
+        type: Array,
+        default: () => [],
+    },
+    related: {
+        type: Array,
+        default: () => [],
+    },
+});
+
+const page = usePage();
+const seo = computed(() => page.props.seo ?? {});
+
+const selectedVarietyId = ref(null);
+const hasVarieties = props.product.varieties.length > 0;
+
+const selectedVariety = computed(
+    () => props.product.varieties.find((variety) => variety.id === selectedVarietyId.value) ?? null,
+);
+
+// Show every image: the product gallery plus each variety's image, combined
+// and deduped by URL. Nothing is hidden when a variety is selected.
+const galleryImages = computed(() => {
+    const base = props.product.gallery ?? [];
+
+    const varietyImages = props.product.varieties
+        .map((variety) => variety.image)
+        .filter((image) => image);
+
+    const seen = new Set();
+
+    return [...base, ...varietyImages].filter((image) => {
+        if (seen.has(image.url)) {
+            return false;
+        }
+
+        seen.add(image.url);
+
+        return true;
+    });
+});
+
+// Selecting a variety just switches the main image to that variety's photo.
+const activeImageUrl = computed(() => selectedVariety.value?.image?.url ?? null);
+
+// True when the product has varieties but none of them are buyable.
+const allVarietiesOutOfStock = computed(
+    () => hasVarieties && !props.product.varieties.some((variety) => variety.inStock),
+);
+
+const buyBox = computed(() => {
+    if (selectedVariety.value) {
+        return { ...selectedVariety.value, selected: true };
+    }
+
+    // Simple product without varieties: show its own price right away.
+    if (!hasVarieties) {
+        return {
+            price: props.product.price,
+            salePrice: props.product.salePrice,
+            discountPercent: props.product.discountPercent,
+            inStock: props.product.inStock,
+            inventory: null,
+            selected: true,
+        };
+    }
+
+    // Everything is out of stock: show the unavailable state, not a prompt.
+    if (allVarietiesOutOfStock.value) {
+        return {
+            price: null,
+            salePrice: null,
+            discountPercent: null,
+            inStock: false,
+            inventory: 0,
+            selected: true,
+        };
+    }
+
+    // Has varieties but none chosen yet: hide price until the user selects.
+    return {
+        price: null,
+        salePrice: null,
+        discountPercent: null,
+        inStock: false,
+        inventory: null,
+        selected: false,
+    };
+});
+
+const metaTitle = computed(() => props.product.title || props.product.heading);
+const metaDescription = computed(
+    () =>
+        props.product.description ||
+        `خرید ${props.product.heading} با بهترین قیمت از فروشگاه اینترنتی.`,
+);
+
+const jsonLd = computed(() => {
+    const offerPrice = props.product.salePrice ?? props.product.price;
+
+    const data = [
+        {
+            '@context': 'https://schema.org',
+            '@type': 'Product',
+            name: props.product.heading,
+            description: metaDescription.value,
+            sku: String(props.product.id),
+            image: galleryImages.value.map((image) => image.url),
+            offers: {
+                '@type': 'Offer',
+                price: offerPrice,
+                priceCurrency: 'IRR',
+                availability: props.product.inStock
+                    ? 'https://schema.org/InStock'
+                    : 'https://schema.org/OutOfStock',
+                url: props.product.canonical || seo.value.url || '',
+            },
+        },
+        {
+            '@context': 'https://schema.org',
+            '@type': 'BreadcrumbList',
+            itemListElement: props.breadcrumbs.map((item, index) => ({
+                '@type': 'ListItem',
+                position: index + 1,
+                name: item.heading,
+            })),
+        },
+    ];
+
+    if (props.product.brand) {
+        data[0].brand = { '@type': 'Brand', name: props.product.brand.heading };
+    }
+
+    return data;
+});
+</script>
+
+<template>
+    <AppHead
+        :title="metaTitle"
+        :description="metaDescription"
+        :canonical="product.canonical || ''"
+        :image="product.image ? product.image.url : ''"
+        :noindex="product.noIndex"
+        type="product"
+        :json-ld="jsonLd"
+    />
+
+    <AppLayout>
+        <div class="flex flex-col gap-8">
+            <Breadcrumbs :items="breadcrumbs" />
+
+            <div class="grid grid-cols-1 gap-8 lg:grid-cols-12">
+                <div class="lg:col-span-5">
+                    <ProductGallery
+                        :images="galleryImages"
+                        :active-url="activeImageUrl"
+                        :alt="product.heading"
+                    />
+                </div>
+
+                <div class="flex flex-col gap-4 lg:col-span-4">
+                    <h1 class="text-xl leading-relaxed font-bold text-gray-900">
+                        {{ product.heading }}
+                    </h1>
+
+                    <div class="flex flex-wrap items-center gap-4">
+                        <AppLink
+                            v-if="product.brand"
+                            :href="product.brand.url"
+                            class="text-brand text-sm transition hover:underline"
+                        >
+                            {{ product.brand.heading }}
+                        </AppLink>
+
+                        <a href="#reviews">
+                            <RatingStars :rating="0" :count="product.reviewCount" />
+                        </a>
+                    </div>
+
+                    <VarietySelector
+                        v-model="selectedVarietyId"
+                        :axes="product.variantAxes"
+                        :varieties="product.varieties"
+                    />
+                </div>
+
+                <div class="lg:col-span-3">
+                    <BuyBox
+                        :price="buyBox.price"
+                        :sale-price="buyBox.salePrice"
+                        :discount-percent="buyBox.discountPercent"
+                        :in-stock="buyBox.inStock"
+                        :inventory="buyBox.inventory"
+                        :selected="buyBox.selected"
+                    />
+                </div>
+            </div>
+
+            <section v-if="product.content" id="description">
+                <h2 class="mb-4 text-lg font-bold text-gray-900">معرفی محصول</h2>
+                <div
+                    class="prose prose-sm max-w-none leading-loose text-gray-700"
+                    v-html="product.content"
+                />
+            </section>
+
+            <ProductSpecs :specs="product.specs" />
+
+            <ProductReviews :reviews="product.reviews" />
+
+            <ProductCarousel v-if="related.length" title="محصولات مشابه" :products="related" />
+        </div>
+    </AppLayout>
+</template>
diff --git a/shop/resources/js/app.js b/shop/resources/js/app.js
index 1618812f..288f0f88 100644
--- a/shop/resources/js/app.js
+++ b/shop/resources/js/app.js
@@ -10,10 +10,7 @@ const appName = import.meta.env.VITE_APP_NAME || 'ShopFlow';
 createInertiaApp({
     title: (title) => (title ? `${title} - ${appName}` : appName),
     resolve: (name) =>
-        resolvePageComponent(
-            `./Pages/${name}.vue`,
-            import.meta.glob('./Pages/**/*.vue'),
-        ),
+        resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
     setup({ el, App, props, plugin }) {
         createApp({ render: () => h(App, props) })
             .use(plugin)
diff --git a/shop/resources/js/fontawesome.js b/shop/resources/js/fontawesome.js
index 8a160bfe..fb2947c9 100644
--- a/shop/resources/js/fontawesome.js
+++ b/shop/resources/js/fontawesome.js
@@ -1,7 +1,26 @@
 import { config } from '@fortawesome/fontawesome-svg-core';
 import '@fortawesome/fontawesome-svg-core/styles.css';
 import { faInstagram, faTelegram, faLinkedinIn } from '@fortawesome/free-brands-svg-icons';
-import { faLink } from '@fortawesome/free-solid-svg-icons';
+import {
+    faLink,
+    faChevronLeft,
+    faChevronRight,
+    faChevronDown,
+    faTag,
+    faImage,
+    faMagnifyingGlass,
+    faUser,
+    faCartShopping,
+    faBars,
+    faXmark,
+    faStar,
+    faShieldHalved,
+    faTruckFast,
+    faRotateLeft,
+    faCheck,
+    faPlus,
+    faMinus,
+} from '@fortawesome/free-solid-svg-icons';
 
 // Vite bundles the CSS above, so disable runtime CSS injection (avoids SSR mismatch).
 config.autoAddCss = false;
@@ -13,3 +32,24 @@ export const socialIcons = {
     linkedin: faLinkedinIn,
     fallback: faLink,
 };
+
+// Shared UI icons used across storefront components.
+export const uiIcons = {
+    chevronLeft: faChevronLeft,
+    chevronRight: faChevronRight,
+    chevronDown: faChevronDown,
+    tag: faTag,
+    image: faImage,
+    search: faMagnifyingGlass,
+    user: faUser,
+    cart: faCartShopping,
+    menu: faBars,
+    close: faXmark,
+    star: faStar,
+    shield: faShieldHalved,
+    truck: faTruckFast,
+    returns: faRotateLeft,
+    check: faCheck,
+    plus: faPlus,
+    minus: faMinus,
+};
diff --git a/shop/resources/js/ssr.js b/shop/resources/js/ssr.js
index 2e4ba327..b17f95d9 100644
--- a/shop/resources/js/ssr.js
+++ b/shop/resources/js/ssr.js
@@ -14,10 +14,7 @@ createServer((page) =>
         render: renderToString,
         title: (title) => (title ? `${title} - ${appName}` : appName),
         resolve: (name) =>
-            resolvePageComponent(
-                `./Pages/${name}.vue`,
-                import.meta.glob('./Pages/**/*.vue'),
-            ),
+            resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
         setup({ App, props, plugin }) {
             return createSSRApp({ render: () => h(App, props) }).use(plugin);
         },
diff --git a/shop/routes/web.php b/shop/routes/web.php
index fdf5caee..1f4ab360 100644
--- a/shop/routes/web.php
+++ b/shop/routes/web.php
@@ -2,9 +2,10 @@
 
 declare(strict_types=1);
 
+use App\Http\Controllers\HomeController;
+use App\Http\Controllers\ProductController;
 use Illuminate\Support\Facades\Route;
-use Inertia\Inertia;
 
-Route::get('/', fn () => Inertia::render('Home', [
-    'message' => 'فروشگاه آنلاین، آماده توسعه.',
-]));
+Route::get('/', HomeController::class)->name('home');
+
+Route::get('/products/{slug}', [ProductController::class, 'show'])->name('products.show');
diff --git a/shop/tests/Feature/HomePageTest.php b/shop/tests/Feature/HomePageTest.php
new file mode 100644
index 00000000..e1268075
--- /dev/null
+++ b/shop/tests/Feature/HomePageTest.php
@@ -0,0 +1,140 @@
+<?php
+
+declare(strict_types=1);
+
+use App\Enums\BannerStatusEnum;
+use App\Enums\BrandStatusEnum;
+use App\Enums\CategoryStatusEnum;
+use App\Enums\ProductStatusEnum;
+use App\Enums\SliderStatusEnum;
+use App\Enums\VarietyStatusEnum;
+use App\Models\Banner;
+use App\Models\Brand;
+use App\Models\Category;
+use App\Models\Image;
+use App\Models\Product;
+use App\Models\Slide;
+use App\Models\Slider;
+use App\Models\Variety;
+use Inertia\Testing\AssertableInertia;
+
+function featureImage(string $type, int $id, bool $featured = true): void
+{
+    Image::create([
+        'path' => 'media/sample.jpg',
+        'imageable_type' => $type,
+        'imageable_id' => $id,
+        'alt_text' => 'تصویر نمونه',
+        'is_featured' => $featured,
+    ]);
+}
+
+it('renders the home page with the catalog sections', function (): void {
+    $category = Category::create([
+        'heading' => 'پوشاک',
+        'slug' => 'clothing',
+        'status' => CategoryStatusEnum::ACTIVE,
+    ]);
+    featureImage(Category::class, $category->id, false);
+
+    $product = Product::create([
+        'heading' => 'پیراهن مردانه',
+        'slug' => 'mens-shirt',
+        'price' => 100000,
+        'category_id' => $category->id,
+        'status' => ProductStatusEnum::PUBLISHED,
+        'seen' => 50,
+    ]);
+    featureImage(Product::class, $product->id);
+    Variety::create([
+        'product_id' => $product->id,
+        'price' => 100000,
+        'sale_price' => 80000,
+        'inventory' => 5,
+        'has_stock' => true,
+        'status' => VarietyStatusEnum::PUBLISHED,
+    ]);
+
+    $slider = Slider::create([
+        'name' => 'home slider',
+        'position' => 'home-main',
+        'status' => SliderStatusEnum::PUBLISHED,
+    ]);
+    $slide = Slide::create([
+        'slider_id' => $slider->id,
+        'heading' => 'حراج بهاره',
+        'url' => '/campaign',
+        'order' => 1,
+    ]);
+    featureImage(Slide::class, $slide->id, false);
+
+    $banner = Banner::create([
+        'position' => 'home-middle',
+        'heading' => 'بنر تبلیغاتی',
+        'url' => '/promo',
+        'sort' => 1,
+        'status' => BannerStatusEnum::PUBLISHED,
+    ]);
+    featureImage(Banner::class, $banner->id);
+
+    $brand = Brand::create([
+        'heading' => 'نایک',
+        'slug' => 'nike',
+        'status' => BrandStatusEnum::ACTIVE,
+    ]);
+    featureImage(Brand::class, $brand->id, false);
+
+    $this->get('/')
+        ->assertOk()
+        ->assertInertia(fn (AssertableInertia $page): AssertableInertia => $page
+            ->component('Home')
+            ->has('slides', 1)
+            ->has('categories', 1)
+            ->has('banners', 1)
+            ->has('brands', 1)
+            ->has('productRows', 2)
+            ->has('productRows.0.products', 1, fn (AssertableInertia $card): AssertableInertia => $card
+                ->where('heading', 'پیراهن مردانه')
+                ->where('price', 100000)
+                ->where('salePrice', 80000)
+                ->where('discountPercent', 20)
+                ->etc()
+            )
+        );
+});
+
+it('shares header navigation categories with their children', function (): void {
+    $parent = Category::create([
+        'heading' => 'لوازم جانبی گوشی',
+        'slug' => 'mobile-accessories',
+        'status' => CategoryStatusEnum::ACTIVE,
+    ]);
+    Category::create([
+        'heading' => 'قاب و کاور',
+        'slug' => 'phone-cases',
+        'parent_id' => $parent->id,
+        'status' => CategoryStatusEnum::ACTIVE,
+    ]);
+
+    $this->get('/')
+        ->assertOk()
+        ->assertInertia(fn (AssertableInertia $page): AssertableInertia => $page
+            ->has('nav.categories', 1, fn (AssertableInertia $category): AssertableInertia => $category
+                ->where('heading', 'لوازم جانبی گوشی')
+                ->where('url', '/categories/mobile-accessories')
+                ->has('children', 1)
+                ->etc()
+            )
+        );
+});
+
+it('renders the home page when the catalog is empty', function (): void {
+    $this->get('/')
+        ->assertOk()
+        ->assertInertia(fn (AssertableInertia $page): AssertableInertia => $page
+            ->component('Home')
+            ->where('slides', [])
+            ->where('productRows', [])
+            ->where('brands', [])
+        );
+});
diff --git a/shop/tests/Feature/ProductPageTest.php b/shop/tests/Feature/ProductPageTest.php
new file mode 100644
index 00000000..00f66ca8
--- /dev/null
+++ b/shop/tests/Feature/ProductPageTest.php
@@ -0,0 +1,207 @@
+<?php
+
+declare(strict_types=1);
+
+use App\Enums\CategoryStatusEnum;
+use App\Enums\ProductStatusEnum;
+use App\Enums\ReviewStatusEnum;
+use App\Enums\VarietyStatusEnum;
+use App\Models\Attribute;
+use App\Models\Category;
+use App\Models\Image;
+use App\Models\Product;
+use App\Models\Review;
+use App\Models\Variety;
+use Illuminate\Support\Facades\DB;
+use Inertia\Testing\AssertableInertia;
+
+function makeImage(string $type, int $id, bool $featured = true): void
+{
+    Image::create([
+        'path' => 'media/sample.jpg',
+        'imageable_type' => $type,
+        'imageable_id' => $id,
+        'alt_text' => 'تصویر نمونه',
+        'is_featured' => $featured,
+    ]);
+}
+
+function makeProduct(): Product
+{
+    $category = Category::create([
+        'heading' => 'پوشاک مردانه',
+        'slug' => 'mens-clothing',
+        'status' => CategoryStatusEnum::ACTIVE,
+    ]);
+
+    $product = Product::create([
+        'heading' => 'پولوشرت مردانه نقرآبی',
+        'slug' => 'mens-polo-shirt',
+        'price' => 1989000,
+        'content' => '<p>یک پولوشرت باکیفیت.</p>',
+        'title' => 'خرید پولوشرت مردانه',
+        'description' => 'بهترین پولوشرت مردانه',
+        'category_id' => $category->id,
+        'status' => ProductStatusEnum::PUBLISHED,
+        'seen' => 10,
+    ]);
+    makeImage(Product::class, $product->id);
+
+    Variety::create([
+        'product_id' => $product->id,
+        'attribute_value' => 'L',
+        'color' => '#0a58ca',
+        'price' => 1989000,
+        'sale_price' => 1489000,
+        'inventory' => 5,
+        'has_stock' => true,
+        'status' => VarietyStatusEnum::PUBLISHED,
+    ]);
+
+    return $product;
+}
+
+it('renders the product page with details, varieties and breadcrumbs', function (): void {
+    $product = makeProduct();
+
+    Review::create([
+        'heading' => 'عالی بود',
+        'content' => 'کیفیت خوبی داشت.',
+        'product_id' => $product->id,
+        'status' => ReviewStatusEnum::APPROVED,
+    ]);
+
+    $this->get('/products/'.$product->slug)
+        ->assertOk()
+        ->assertInertia(fn (AssertableInertia $page): AssertableInertia => $page
+            ->component('Product/Show')
+            ->where('product.heading', 'پولوشرت مردانه نقرآبی')
+            ->where('product.price', 1989000)
+            ->where('product.salePrice', 1489000)
+            ->where('product.discountPercent', 25)
+            ->where('product.inStock', true)
+            ->has('product.varieties', 1)
+            ->has('product.reviews', 1)
+            ->where('product.reviewCount', 1)
+            ->has('breadcrumbs', 3)
+            ->where('breadcrumbs.0.heading', 'خانه')
+        );
+});
+
+it('counts a view on each visit', function (): void {
+    $product = makeProduct();
+
+    $this->get('/products/'.$product->slug)->assertOk();
+
+    expect($product->refresh()->seen)->toBe(11);
+});
+
+it('returns related products from the same category', function (): void {
+    $product = makeProduct();
+
+    $related = Product::create([
+        'heading' => 'تیشرت مردانه',
+        'slug' => 'mens-tshirt',
+        'price' => 500000,
+        'category_id' => $product->category_id,
+        'status' => ProductStatusEnum::PUBLISHED,
+        'seen' => 0,
+    ]);
+    makeImage(Product::class, $related->id);
+
+    $this->get('/products/'.$product->slug)
+        ->assertOk()
+        ->assertInertia(fn (AssertableInertia $page): AssertableInertia => $page
+            ->has('related', 1)
+            ->where('related.0.heading', 'تیشرت مردانه')
+        );
+});
+
+it('returns 404 for an unpublished product', function (): void {
+    $category = Category::create([
+        'heading' => 'دسته',
+        'slug' => 'draft-category',
+        'status' => CategoryStatusEnum::ACTIVE,
+    ]);
+
+    $product = Product::create([
+        'heading' => 'محصول پیش‌نویس',
+        'slug' => 'draft-product',
+        'price' => 100000,
+        'category_id' => $category->id,
+        'status' => ProductStatusEnum::DRAFT,
+        'seen' => 0,
+    ]);
+
+    $this->get('/products/'.$product->slug)->assertNotFound();
+});
+
+it('returns 404 for a missing product', function (): void {
+    $this->get('/products/does-not-exist')->assertNotFound();
+});
+
+it('builds a selectable axis from variety attributes', function (): void {
+    $category = Category::create([
+        'heading' => 'پوشاک',
+        'slug' => 'apparel',
+        'status' => CategoryStatusEnum::ACTIVE,
+    ]);
+
+    $ancestorId = DB::table('ancestors')->insertGetId([
+        'name' => 'رنگ',
+        'created_at' => now(),
+        'updated_at' => now(),
+    ]);
+    $groupId = DB::table('attribute_groups')->insertGetId([
+        'ancestor_id' => $ancestorId,
+        'name' => 'رنگ ظاهری',
+        'created_at' => now(),
+        'updated_at' => now(),
+    ]);
+
+    $green = Attribute::create(['attribute_group_id' => $groupId, 'value' => 'سبز', 'color' => '#003300']);
+    $blue = Attribute::create(['attribute_group_id' => $groupId, 'value' => 'آبی', 'color' => '#000099']);
+
+    $product = Product::create([
+        'heading' => 'ست تیشرت',
+        'slug' => 'tshirt-set',
+        'price' => 500000,
+        'category_id' => $category->id,
+        'status' => ProductStatusEnum::PUBLISHED,
+        'seen' => 0,
+    ]);
+    makeImage(Product::class, $product->id);
+
+    Variety::create([
+        'product_id' => $product->id,
+        'attribute_id' => $green->id,
+        'attribute_value' => 'سبز',
+        'color' => '#003300',
+        'price' => 500000,
+        'inventory' => 25,
+        'has_stock' => true,
+        'status' => VarietyStatusEnum::PUBLISHED,
+    ]);
+    Variety::create([
+        'product_id' => $product->id,
+        'attribute_id' => $blue->id,
+        'attribute_value' => 'آبی',
+        'color' => '#000099',
+        'price' => 500000,
+        'inventory' => 0,
+        'has_stock' => true,
+        'status' => VarietyStatusEnum::PUBLISHED,
+    ]);
+
+    $this->get('/products/'.$product->slug)
+        ->assertOk()
+        ->assertInertia(fn (AssertableInertia $page): AssertableInertia => $page
+            ->has('product.variantAxes', 1, fn (AssertableInertia $axis): AssertableInertia => $axis
+                ->where('name', 'رنگ ظاهری')
+                ->has('options', 2)
+                ->etc()
+            )
+            ->has('product.varieties', 2)
+            ->has('product.varieties.0.options')
+        );
+});